/* ============================================================
   XEROUR — SECTIONS
============================================================ */

.section{
  padding: 120px 32px;
  max-width: 1320px;
  margin: 0 auto;
}
.section--tinted{
  max-width: none;
  background: var(--bg-secondary);
}
.section--tinted > *{ max-width: 1320px; margin-left:auto; margin-right:auto; }

.section__head{ margin-bottom: 56px; max-width: 640px; }
.section__title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* ---------- Services grid ---------- */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow:hidden;
}
.service-card{
  background: var(--bg);
  padding: 40px 32px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: background .3s ease, transform .3s ease;
  cursor: pointer;
}
.service-card:hover{
  background: var(--card);
  transform: translateY(-4px);
}
.service-card__num{
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--accent);
  font-weight:700;
  letter-spacing:0.05em;
}
.service-card h3{ font-family: var(--font-display); font-size:1.15rem; font-weight:700; }
.service-card p{ color: var(--text-soft); font-size:0.92rem; line-height:1.55; }
.service-card__link{
  margin-top:auto;
  padding-top:10px;
  font-size:0.85rem;
  font-weight:600;
  color: var(--accent);
}
.service-card__link span{ display:inline-block; transition: transform .2s ease; }
.service-card:hover .service-card__link span{ transform: translateX(4px); }

/* ---------- Solutions tabs ---------- */
.solutions-tabs__list{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 32px;
}
.solutions-tab{
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight:600;
  cursor:pointer;
  transition: all .25s ease;
}
.solutions-tab.is-active,
.solutions-tab:hover{
  border-color: var(--accent);
  color: var(--text);
  background: rgba(124,92,255,0.12);
}
.solutions-panel{
  display:none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px;
  font-size: 1.05rem;
  color: var(--text-soft);
  line-height:1.6;
  max-width: 720px;
}
.solutions-panel.is-active{ display:block; }

/* ---------- Split sections (LMS / School / Mobile) ---------- */
.split-section{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.split-section--reverse{ direction: rtl; }
.split-section--reverse > *{ direction: ltr; }
.split-section__desc{ color: var(--text-soft); line-height:1.65; margin: 20px 0 32px; max-width: 460px; }
.split-section__ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.split-section__panel{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dash-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px;
  font-size: 0.95rem;
  font-weight:600;
  opacity:0;
  transform: translateY(16px);
  animation: dashIn .6s ease forwards;
  animation-delay: var(--d, 0s);
}
@keyframes dashIn{ to{ opacity:1; transform:none; } }

.phone-mock{ display:flex; justify-content:center; }
.phone-mock__frame{
  width: 240px; height: 480px;
  border-radius: 36px;
  border: 8px solid rgba(255,255,255,0.08);
  background: linear-gradient(160deg, rgba(124,92,255,0.18), rgba(255,255,255,0.03));
  box-shadow: 0 30px 80px rgba(124,92,255,0.15);
  padding: 24px 14px;
}
.phone-mock__screen{
  display:flex; flex-direction:column; gap:10px; height:100%;
}
.phone-mock__screen span{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius:10px;
  padding: 10px 12px;
  font-size:0.78rem;
  color: var(--text-soft);
}

/* ---------- Game dev ---------- */
.section--game{ text-align:center; }
.section--game .section__head{ margin:0 auto 32px; }
.game-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom: 36px; }
.game-tags span{
  padding:10px 20px; border-radius:999px;
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(124,92,255,0.15), rgba(0,229,255,0.08));
  font-size:0.85rem; font-weight:600;
}

/* ---------- Portfolio ---------- */
.portfolio-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.portfolio-card{
  border:1px solid var(--border); border-radius:18px; overflow:hidden;
  background: var(--card);
  transition: transform .35s ease;
}
.portfolio-card:hover{ transform: translateY(-6px); }
.portfolio-card__media{
  height: 200px;
  background: linear-gradient(135deg, rgba(124,92,255,0.25), rgba(11,16,23,0.6));
}
.portfolio-card h3{ padding: 20px 20px 4px; font-family: var(--font-display); }
.portfolio-card p{ padding: 0 20px; color: var(--text-soft); font-size:0.85rem; }
.portfolio-card .service-card__link{ display:block; padding: 14px 20px 22px; }

/* ---------- About ---------- */
.about-layout{ display:grid; grid-template-columns: 1.3fr 1fr; gap:60px; align-items:center; }
.about-pillars{ display:flex; flex-direction:column; gap:12px; }
.pillar{
  padding: 18px 24px; border:1px solid var(--border); border-radius:14px;
  background: var(--card); font-weight:600;
}

/* ---------- Tech cloud ---------- */
.tech-cloud{ display:flex; flex-wrap:wrap; gap:14px; }
.tech-cloud span{
  padding: 12px 20px; border-radius:999px;
  border:1px solid var(--border); background: var(--card);
  font-size:0.88rem; color: var(--text-soft);
  transition: color .2s ease, border-color .2s ease;
}
.tech-cloud span:hover{ color:#fff; border-color: var(--accent); }

/* ---------- Process timeline ---------- */
.timeline{ position:relative; }
.timeline__line{
  position:absolute; left:0; right:0; top: 14px;
  height:2px; background: var(--border);
}
.timeline__line-fill{
  display:block; height:100%; width: 0%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
  transition: width .1s linear;
}
.timeline__steps{
  display:grid; grid-template-columns: repeat(7,1fr); gap: 20px;
}
.timeline__step{ position:relative; padding-top: 30px; }
.timeline__num{ font-family: var(--font-display); color:var(--accent); font-weight:700; font-size:0.85rem; }
.timeline__step h4{ margin: 8px 0 6px; font-family: var(--font-display); }
.timeline__step p{ color: var(--text-soft); font-size:0.82rem; line-height:1.5; }

/* ---------- Why grid ---------- */
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.why-card{
  padding: 26px 20px; border:1px solid var(--border); border-radius:14px;
  background: var(--card); font-weight:600; font-size:0.95rem;
  transition: border-color .25s ease, transform .25s ease;
}
.why-card:hover{ border-color: var(--accent); transform: translateY(-3px); }

/* ---------- CTA section ---------- */
.cta-section{
  text-align:center;
  padding: 160px 32px;
}
.cta-section__title{
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height:1.05;
  margin: 20px 0 24px;
}

/* ---------- Contact ---------- */
.contact-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-list{ list-style:none; display:flex; flex-direction:column; gap:18px; margin: 24px 0 10px; }
.contact-list li{ display:flex; flex-direction:column; gap:4px; }
.contact-list strong{ font-size:0.78rem; letter-spacing:0.1em; color: var(--text-soft); text-transform:uppercase; }
.contact-list a{ color: var(--accent); font-weight:600; }
.contact-note{ color: var(--text-soft); font-size:0.8rem; font-style:italic; }

.contact-form{ display:flex; flex-direction:column; gap:14px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.contact-form input,
.contact-form textarea,
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal textarea{
  width:100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size:0.92rem;
}
.contact-form input:focus,
.contact-form textarea:focus,
.modal input:focus,
.modal textarea:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.form-status{ font-size:0.85rem; color: var(--text-soft); min-height: 1.2em; }
.form-status.is-error{ color:#ff6b6b; }
.form-status.is-ok{ color:#5CFFB0; }

/* ---------- Footer ---------- */
.footer{ background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 80px 32px 30px; }
.footer__top{
  max-width:1320px; margin:0 auto 50px;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px;
}
.footer__brand p{ color: var(--text-soft); margin-top:10px; font-size:0.9rem; }
.footer__col{ display:flex; flex-direction:column; gap:12px; }
.footer__col h5{ font-size:0.78rem; letter-spacing:0.1em; color: var(--text-soft); text-transform:uppercase; margin-bottom:4px; }
.footer__col a{ color: var(--text-soft); font-size:0.9rem; transition: color .2s ease; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{
  max-width:1320px; margin:0 auto; padding-top:26px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color: var(--text-soft); font-size:0.82rem;
}
.footer__bottom a{ color: var(--text-soft); }

/* ============================================================
   INQUIRY MODAL
============================================================ */
.modal{
  position: fixed; inset:0; z-index: 200;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  opacity:0; pointer-events:none;
  transition: opacity .3s ease;
}
.modal.is-open{ opacity:1; pointer-events:all; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(5,7,11,0.8); backdrop-filter: blur(6px); }
.modal__panel{
  position:relative; z-index:1;
  width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y:auto;
  background: var(--bg-secondary);
  border:1px solid var(--border);
  border-radius: 22px;
  padding: 40px;
  transform: translateY(20px) scale(.98);
  transition: transform .35s ease;
}
.modal.is-open .modal__panel{ transform:none; }
.modal__close{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px; border-radius:50%;
  background: var(--card); border:1px solid var(--border);
  color:#fff; cursor:pointer;
}
.modal__progress{ height:3px; background:var(--border); border-radius:3px; margin-bottom:28px; overflow:hidden; }
.modal__progress span{ display:block; height:100%; width:20%; background:var(--accent); transition: width .3s ease; }

.modal__step{ display:none; flex-direction:column; gap:12px; }
.modal__step.is-active{ display:flex; }
.modal__step h3{ font-family: var(--font-display); font-size:1.3rem; margin-bottom:8px; }

.option-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.option-grid--list{ grid-template-columns: 1fr; }
.option{
  border:1px solid var(--border); border-radius:12px; padding:14px 16px;
  cursor:pointer; font-size:0.9rem; color: var(--text-soft);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
  position:relative;
}
.option input{ position:absolute; opacity:0; }
.option:has(input:checked){
  border-color: var(--accent); color:#fff; background: rgba(124,92,255,0.1);
}

.modal__step--success{ align-items:center; text-align:center; padding: 30px 0; }
.success-check{
  width:64px; height:64px; border-radius:50%;
  background: rgba(124,92,255,0.15); border:1px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color: var(--accent); margin-bottom:6px;
}

.modal__nav{ display:flex; justify-content:space-between; gap:10px; margin-top: 26px; }
#modalSubmit, #modalPrev, #modalNext{ display:none; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 980px){
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .split-section{ grid-template-columns: 1fr; }
  .split-section--reverse{ direction: ltr; }
  .split-section__panel{ order: -1; }
  .portfolio-grid{ grid-template-columns: 1fr; }
  .about-layout{ grid-template-columns: 1fr; }
  .contact-layout{ grid-template-columns: 1fr; }
  .footer__top{ grid-template-columns: 1fr 1fr; }
  .timeline__steps{ grid-template-columns: repeat(4,1fr); gap: 26px 16px; }
  .timeline__line{ display:none; }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .section{ padding: 80px 20px; }
  .services-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .timeline__steps{ grid-template-columns: repeat(2,1fr); }
  .why-grid{ grid-template-columns: 1fr; }
  .footer__top{ grid-template-columns: 1fr; }
  .option-grid{ grid-template-columns: 1fr; }
}