/* ==========================================================================
   Section layout
   ========================================================================== */

.section{ padding:var(--sp-8) 0; position:relative; }
.section-head{ max-width:760px; margin-bottom:var(--sp-6); }
.section-head h2{ font-size:var(--fs-h2); margin:var(--sp-2) 0 var(--sp-2); }
.section-lead{ font-size:var(--fs-lead); max-width:620px; }

.mobile-nav[hidden]{ display:none; }
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:99;
  background:rgba(9,11,15,0.98);
  backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
}
.mobile-nav nav{ display:flex; flex-direction:column; gap:4px; padding:0 var(--edge); width:100%; }
.mobile-nav a{ padding:16px 4px; font-family:var(--font-display); font-size:1.6rem; color:var(--ink-1); border-bottom:1px solid var(--surface-line); }
.mobile-nav a.btn{ margin-top:20px; border-bottom:none; text-align:center; font-family:var(--font-body); font-size:.95rem; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:120px;
  overflow:hidden;
}
.hero-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.55;
  pointer-events:none;
}
.hero-grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(148,168,196,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,168,196,0.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1000px 640px at 70% 20%, black, transparent 75%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; max-width:900px; }
.hero-title{
  font-size:var(--fs-display);
  margin:20px 0 26px;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .word{ display:inline-block; }
.hero-title em{ font-style:normal; color:var(--signal-0); }
.hero-lead{ font-size:var(--fs-lead); max-width:560px; color:var(--ink-1); margin-bottom:36px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-stats{ position:relative; z-index:2; margin-top:var(--sp-8); border-top:1px solid var(--surface-line); }
.hero-stats-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:26px 0;
}
.hero-stat{ display:flex; flex-direction:column; gap:4px; padding-right:24px; }
.hero-stat + .hero-stat{ border-left:1px solid var(--surface-line); padding-left:24px; }
.stat-num{ font-family:var(--font-display); font-size:1.9rem; color:var(--ink-0); font-weight:600; }
.stat-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-3); text-transform:uppercase; }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid var(--surface-line-strong); border-radius:20px;
  display:flex; justify-content:center; padding-top:8px; z-index:2;
}
.scroll-cue span{ width:4px; height:8px; border-radius:2px; background:var(--signal-0); animation:scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue{ 0%{opacity:1; transform:translateY(0);} 70%{opacity:0; transform:translateY(14px);} 100%{opacity:0;} }

/* ---------------- Intro ---------------- */
.intro{ padding-top:var(--sp-9); }
.intro-statement{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 1.6vw + 1.1rem, 2.4rem);
  color:var(--ink-0);
  line-height:1.35;
  max-width:920px;
  margin:16px 0 34px;
}
.pill-row{ display:flex; flex-wrap:wrap; gap:12px; }
.pill{
  padding:9px 16px; border-radius:999px; border:1px solid var(--surface-line);
  font-size:.82rem; color:var(--ink-2); font-family:var(--font-mono); letter-spacing:.02em;
}

/* ---------------- Ecosystem (positioning visual) ---------------- */
.ecosystem{ margin-top:var(--sp-7); }
.ecosystem-inner{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-7);
  align-items:center;
}
.ecosystem-copy h2{ font-size:var(--fs-h2); margin:16px 0 16px; }
.ecosystem-diagram{ width:100%; }
.ecosystem-diagram svg{ width:100%; height:auto; }
.ecosystem-hub text{ user-select:none; }

/* ---------------- Capabilities ---------------- */
.capability-layout{ display:grid; grid-template-columns:200px 1fr; gap:var(--sp-6); align-items:start; }

.capability-rail{
  position:sticky; top:110px;
  display:flex; flex-direction:column; gap:2px;
}
.capability-rail a{
  display:flex; flex-direction:column; gap:4px;
  padding:12px 0 12px 16px;
  border-left:2px solid var(--surface-line);
  color:var(--ink-3);
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rail-num{ font-family:var(--font-mono); font-size:11px; }
.rail-label{ font-size:.82rem; font-weight:500; }
.capability-rail a:hover{ color:var(--ink-1); }
.capability-rail a.is-active{ color:var(--ink-0); border-left-color:var(--signal-0); }
.capability-rail a.is-active .rail-num{ color:var(--signal-0); }

.capability-groups{ display:grid; gap:var(--sp-7); }
.capability-group{ scroll-margin-top:100px; }
.group-head{
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  align-items:baseline; margin-bottom:22px;
}
.group-num{ font-family:var(--font-mono); font-size:.85rem; color:var(--signal-0); }
.group-title{ font-size:clamp(1.4rem, .8vw + 1.15rem, 1.9rem); margin-bottom:6px; }
.group-desc{ font-size:.92rem; max-width:520px; }

.capability-list{ border-top:1px solid var(--surface-line); }
.capability-row{ border-bottom:1px solid var(--surface-line); }
.capability-trigger{
  width:100%;
  display:grid;
  grid-template-columns:56px 1fr auto 24px;
  align-items:center;
  gap:20px;
  padding:22px 4px;
  text-align:left;
}
.cap-index{ font-family:var(--font-mono); color:var(--ink-3); font-size:.85rem; }
.cap-title{ font-family:var(--font-display); font-size:clamp(1.15rem, .6vw + 1rem, 1.6rem); color:var(--ink-0); font-weight:500; transition:color var(--dur-fast) var(--ease-out); }
.capability-trigger:hover .cap-title{ color:var(--signal-0); }
.cap-tag{ justify-self:end; }
.cap-chevron{ color:var(--ink-3); transition:transform var(--dur-fast) var(--ease-out); }
.capability-trigger[aria-expanded="true"] .cap-chevron{ transform:rotate(180deg); color:var(--signal-0); }

.capability-body{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--dur-med) var(--ease-in-out);
}
.cap-detail{ padding:2px 4px 26px 76px; display:grid; gap:18px; max-width:640px; }
.cap-detail p{ font-size:.95rem; }
.cap-detail strong{ color:var(--ink-0); font-weight:600; }
.cap-block{ display:grid; gap:8px; }
.cap-subhead{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.cap-block ul{ display:grid; gap:6px; }
.cap-block li{
  font-size:.9rem; color:var(--ink-1);
  padding-left:16px; position:relative;
}
.cap-block li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:5px; height:5px; border-radius:50%;
  background:var(--signal-0);
}
.cap-pricing p{ color:var(--ink-2); }
.cap-quote-link{
  color:var(--signal-0); font-weight:600; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
.cap-quote-link:hover{ color:var(--signal-1); text-decoration:underline; }

/* ---------------- Technology ---------------- */
.technology{ background:var(--surface-1); border-top:1px solid var(--surface-line); border-bottom:1px solid var(--surface-line); }
.tech-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-7); align-items:start; }
.tech-copy h2{ font-size:var(--fs-h2); margin:16px 0 16px; }
.tech-stack-list{ display:grid; gap:22px; }
.tech-domain{
  padding:22px;
  border:1px solid var(--surface-line);
  border-radius:var(--radius-md);
  background:var(--surface-2);
}
.tech-domain-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--signal-0); display:block; margin-bottom:14px; }
.tech-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tech-tag{
  font-size:.82rem; color:var(--ink-1);
  padding:7px 13px; border-radius:8px;
  background:var(--surface-3);
  border:1px solid var(--surface-line);
}

/* ---------------- Process (pinned scene) ---------------- */
.process-section{ padding-bottom:0; }
.process-scene{ position:relative; height:100svh; }
.process-stage{
  position:absolute; inset:0;
  height:100svh;
  display:flex; align-items:center;
  opacity:0;
}
.process-stage:first-child{ opacity:1; }
.process-stage-inner{ max-width:640px; }
.process-index{
  font-family:var(--font-mono); font-size:.9rem; color:var(--signal-0);
  display:block; margin-bottom:18px;
}
.process-stage h3{ font-size:clamp(2.4rem,3vw+1.6rem,4.5rem); margin-bottom:20px; }
.process-stage p{ font-size:var(--fs-lead); max-width:520px; }

/* ---------------- Why ---------------- */
.why-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-7); align-items:start; }
.why-grid h2{ font-size:var(--fs-h2); margin:16px 0 16px; }
.why-list{ display:grid; gap:0; border-top:1px solid var(--surface-line); }
.why-item{ display:grid; grid-template-columns:52px 1fr; gap:18px; padding:26px 0; border-bottom:1px solid var(--surface-line); }
.why-num{ font-family:var(--font-mono); color:var(--ink-3); font-size:.85rem; }
.why-item h3{ font-size:1.15rem; margin-bottom:6px; }
.why-item p{ font-size:.92rem; }

/* ---------------- CTA ---------------- */
.cta-section{ padding-top:0; }
.cta-panel{
  background:linear-gradient(135deg, var(--signal-2), var(--signal-1) 55%, var(--signal-0));
  border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-6);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.cta-panel::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(600px 300px at 85% 0%, black, transparent 70%);
  opacity:.5;
}
.cta-panel .section-num{ color:rgba(255,255,255,0.7); }
.cta-panel h3{ color:#fff; font-size:clamp(1.6rem,1.6vw+1.2rem,2.4rem); margin:8px 0 8px; }
.cta-panel p{ color:rgba(255,255,255,0.85); }
.cta-panel .btn.primary{ background:#fff; color:var(--signal-2); box-shadow:none; position:relative; z-index:1; }
.cta-panel .btn.primary:hover{ background:#eef4ff; }

/* ---------------- Enquiry form ---------------- */
.enquiry-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  padding:var(--sp-6);
  border:1px solid var(--surface-line);
  border-radius:var(--radius-lg);
  background:var(--surface-1);
}
.form-submit-row{ display:flex; align-items:center; gap:18px; flex-direction:row; }

/* ---------------- Contact ---------------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-7); align-items:start; }
.contact-grid h2{ font-size:var(--fs-h2); margin:16px 0 16px; }
.contact-card{ padding:var(--sp-5); display:grid; gap:2px; }
.contact-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; border-bottom:1px solid var(--surface-line);
  transition:color var(--dur-fast) var(--ease-out);
}
.contact-row:hover{ color:var(--signal-0); }
.contact-label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.contact-value{ font-size:1rem; font-weight:500; }
.contact-whatsapp{ margin-top:16px; width:100%; }

/* ---------------- Footer ---------------- */
.site-footer{ border-top:1px solid var(--surface-line); padding:32px 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; }
.footer-inner .brand{ gap:10px; }

/* ============================== RESPONSIVE ============================== */
@media(max-width:980px){
  .tech-grid, .why-grid, .contact-grid{ grid-template-columns:1fr; gap:var(--sp-5); }
  .ecosystem-inner{ grid-template-columns:1fr; gap:var(--sp-5); }
  .ecosystem-diagram{ max-width:440px; margin-inline:auto; }
  .hero-stats-grid{ grid-template-columns:1fr; gap:16px; }
  .hero-stat + .hero-stat{ border-left:none; padding-left:0; border-top:1px solid var(--surface-line); padding-top:16px; }

  /* Capability rail: sticky sidebar doesn't work in a single column —
     becomes a horizontal scrollable strip instead. */
  .capability-layout{ grid-template-columns:1fr; gap:var(--sp-5); }
  .capability-rail{
    position:static;
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .capability-rail a{
    flex:0 0 auto;
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-left:none;
    border-bottom:2px solid var(--surface-line);
    white-space:nowrap;
  }
  .capability-rail a.is-active{ border-bottom-color:var(--signal-0); }
}

@media(max-width:900px){
  .primary-nav, .nav-actions .btn.primary{ display:none; }
  .menu-toggle{ display:inline-flex; }
}

@media(max-width:680px){
  .section{ padding:var(--sp-7) 0; }
  .hero{ padding-top:110px; min-height:92svh; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .enquiry-form{ grid-template-columns:1fr; padding:var(--sp-4); }
  .capability-trigger{ grid-template-columns:36px 1fr 20px; gap:12px; }
  .cap-tag{ display:none; }
  .cap-detail{ padding-left:48px; }
  .cta-panel{ flex-direction:column; align-items:flex-start; padding:var(--sp-5); }
  .cta-panel .btn{ width:100%; }
  .process-stage h3{ font-size:2.4rem; }
  .footer-inner{ flex-direction:column; text-align:center; }
}