:root {
    --deep:      #06122B;   /* blue-ink near-black — dark sections + strong marks */
    --deep-2:    #0C1D40;   /* layered ink */
    --deep-3:    #040D1F;   /* footer deepest ink */
    --white:     #FFFFFF;   /* pure white — cards / light surfaces */
    --cloud:     #F6F8FC;   /* whisper-cool white — page base (white-forward) */
    --mist:      #EDF1F9;   /* cool light-blue alternating section */
    --mist-2:    #DFE6F3;   /* tracks / dividers */
    --ink:       #06122B;   /* primary text — blue ink */
    --ink-soft:  #47536E;   /* muted cool slate body text */
    --ink-mute:  #8790A6;
    --line:      rgba(6,18,43,.12);
    --line-2:    rgba(6,18,43,.20);
    --on-dark:   #EEF2FF;   /* cool white text on dark */
    --on-dark-soft: rgba(238,242,255,.72);
    --line-dark: rgba(238,242,255,.15);
    --cyan:      #2340FF;   /* electric cobalt — primary accent (buttons, fills, highlight) */
    --cyan-deep: #1B32CC;   /* darker cobalt — hover / links / tags */
    --cyan-bright: #5D77FF; /* periwinkle — accent on dark surfaces */
    --blue:      #47536E;
    --danger:    #C0392B;
    --ok:        #1E8E5A;
    /* ── Spacing scale · clean 4px-based system (single source of truth) ── */
    --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px;
    --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-120: 120px;



    --f-display: 'Newsreader', 'Noto Serif Thai', Georgia, 'Times New Roman', serif;
    --f-body:    'Anuphan', 'Inter', system-ui, -apple-system, sans-serif;

    --wrap: 1240px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--f-body);
    background: var(--cloud);
    color: var(--ink);
    line-height: 1.75;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }

  a { color: inherit; text-decoration: none; }

  h1, h2, h3 { font-family: var(--f-display); font-weight: 500; line-height: 1.14; letter-spacing: -.005em; color: var(--ink); }

  /* ---------- Eyebrow / labels ---------- */
  .eyebrow {
    font-family: var(--f-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-12);
    color: var(--cyan-deep);
  }
  .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--cyan); display: inline-block; }
  .eyebrow.on-dark { color: var(--cyan-bright); }
  .eyebrow.on-dark::before { background: var(--cyan-bright); }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: var(--sp-12);
    font-family: var(--f-body); font-weight: 600; font-size: 15.5px;
    padding: var(--sp-16) var(--sp-32);
    border: 1px solid var(--cyan);
    border-radius: 0;
    background: var(--cyan);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    line-height: 1;
  }
  .btn:hover { background: var(--cyan-deep); border-color: var(--cyan-deep); }
  .btn svg { width: 17px; height: 17px; transition: transform .2s ease; }
  .btn:hover svg { transform: translateX(3px); }
  .btn.big { padding: var(--sp-20) var(--sp-40); font-size: 16.5px; }

  .btn.light { background: #fff; color: var(--deep); border-color: #fff; }
  .btn.light:hover { background: transparent; color: #fff; }
  .btn.ghost { background: transparent; color: var(--deep); }
  .btn.ghost:hover { background: var(--deep); color: #fff; }
  .btn.ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.55); }
  .btn.ghost.on-dark:hover { background: #fff; color: var(--deep); border-color: #fff; }

  /* arrow text-link */
  .alink { display: inline-flex; align-items: center; gap: var(--sp-8); font-weight: 600; font-size: 16px; color: var(--cyan-deep); position: relative; padding-bottom: var(--sp-4); }
  .alink svg { width: 16px; height: 16px; transition: transform .2s ease; }
  .alink::after { content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
  .alink:hover::after { transform: scaleX(1); }
  .alink:hover svg { transform: translateX(4px); }
  .alink.on-dark { color: #fff; }

  /* ---------- Nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
  }
  header.nav.scrolled { border-bottom-color: var(--line); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
  .brand { display: flex; align-items: center; gap: var(--sp-12); }
  .brand .mark { width: 30px; height: 30px; flex: 0 0 auto; }
  .brand .name { font-family: var(--f-display); font-weight: 500; font-size: 23px; letter-spacing: .01em; line-height: 1; display: inline-flex; flex-direction: column; align-items: stretch; }
  .brand .name b { font-weight: 500; color: var(--deep); }
  .brand .name .amp { color: var(--cyan); font-style: normal; font-weight: 500; }
  /* sub-label letter-justified to span the full wordmark width (logo lockup) */
  .brand .sub { font-family: var(--f-body); font-weight: 600; font-size: 9px; letter-spacing: 0; color: var(--ink-mute); text-transform: uppercase; margin-top: var(--sp-4); display: flex; justify-content: space-between; }
  .brand .sub > span { display: block; }
  .brand .sub > i { flex: 0 0 .5em; }
  .nav-links { display: flex; align-items: center; gap: var(--sp-32); }
  .nav-links a.lnk { font-size: 15px; font-weight: 500; color: var(--ink-soft); transition: color .15s ease; position: relative; padding: var(--sp-4) 0; }
  .nav-links a.lnk:hover { color: var(--ink); }
  .nav-links a.lnk::after { content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--cyan); transition: width .22s ease; }
  .nav-links a.lnk:hover::after { width: 100%; }
  .nav-cta { padding: var(--sp-12) var(--sp-24); font-size: 14.5px; }
  .menu-btn { display: none; background: none; border: 1px solid var(--line-2); border-radius: 0; width: 44px; height: 42px; cursor: pointer; align-items: center; justify-content: center; }
  .menu-btn span { display:block; width:18px; height:1.5px; background:var(--ink); position: relative; }
  .menu-btn span::before, .menu-btn span::after { content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); }
  .menu-btn span::before { top:-6px; } .menu-btn span::after { top:6px; }

  /* ---------- Hero ---------- */
  .hero { position: relative; background: radial-gradient(760px circle at 78% 12%, rgba(35,64,255,.05), transparent 55%), var(--cloud); color: var(--ink); overflow: hidden; }
  .hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .72; z-index: 1; }
  .hero-lines g { transform-origin: 50% 50%; }
  .hero-inner { position: relative; z-index: 2; padding: var(--sp-120) 0 var(--sp-120); max-width: 900px; }
  .hero h1 { font-size: clamp(42px, 6.4vw, 78px); font-weight: 500; letter-spacing: -.015em; line-height: 1.08; margin: var(--sp-32) 0 0; color: var(--ink); }
  .hero h1 .hl { color: var(--cyan); }
  .hero p.lead { font-size: clamp(18px, 2.1vw, 21px); color: var(--ink-soft); margin: var(--sp-32) 0 var(--sp-40); max-width: 660px; font-weight: 300; line-height: 1.72; }
  .hero p.lead b { color: var(--ink); font-weight: 500; }
  .hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-24); align-items: center; }
  .hero-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-32); margin-top: var(--sp-56); padding-top: var(--sp-32); border-top: 1px solid var(--line); }
  .chip { display: inline-flex; align-items: center; gap: var(--sp-12); font-size: 14.5px; font-weight: 400; color: var(--ink-soft); }
  .chip svg { width: 16px; height: 16px; color: var(--cyan-deep); flex: 0 0 auto; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- Section frame ---------- */
  section { position: relative; z-index: 1; }
  .sec { padding-block: var(--sp-120); }
  #services, #process {
    background-color: var(--mist);
    background-image: radial-gradient(rgba(35,64,255,.05) 1px, transparent 1.5px);
    background-size: 24px 24px;
  }
  .sec-head { max-width: 760px; margin-bottom: var(--sp-64); }
  .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .sec-head h2 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 500; margin: var(--sp-20) 0 0; letter-spacing: -.01em; }
  .sec-head p { color: var(--ink-soft); font-size: 19px; margin-top: var(--sp-20); font-weight: 300; line-height: 1.7; }

  /* ---------- Problem ---------- */
  .prob { background: var(--white); }
  .prob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-40); }
  .prob-cell { padding-top: var(--sp-24); border-top: 2px solid var(--deep); }
  .prob-cell .num { font-family: var(--f-display); font-size: 15px; color: var(--cyan-deep); font-weight: 500; letter-spacing: .04em; }
  .prob-cell h3 { font-size: 21px; margin: var(--sp-16) 0 var(--sp-12); font-weight: 500; }
  .prob-cell p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; font-weight: 300; }

  /* ---------- Services ---------- */
  .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-32); }
  .svc-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--deep);
    border-radius: 0;
    padding: var(--sp-40) var(--sp-40);
    transition: transform .22s ease, box-shadow .22s ease, border-top-color .22s ease;
    display: flex; flex-direction: column;
    scroll-margin-top: 100px;
    box-shadow: 0 8px 26px rgba(6,18,43,.05);
  }
  .svc-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(6,18,43,.13); border-top-color: var(--cyan); }
  .svc-card.match { border-top-color: var(--cyan); background: #EEF2FF; box-shadow: 0 22px 50px rgba(35,64,255,.10); }
  .svc-top { display: flex; align-items: flex-start; gap: var(--sp-20); margin-bottom: var(--sp-24); }
  .svc-icon { flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: flex-start; justify-content: flex-start; }
  .svc-icon svg { width: 38px; height: 38px; color: var(--deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .svc-tag { font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-deep); }
  .svc-card h3 { font-size: 26px; margin: var(--sp-8) 0 0; font-weight: 500; }
  .svc-card > p { color: var(--ink-soft); font-size: 16px; margin: var(--sp-8) 0 var(--sp-24); font-weight: 300; line-height: 1.65; }
  .svc-list { list-style: none; margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--sp-20); }
  .svc-list li { display: flex; gap: var(--sp-12); align-items: flex-start; font-size: 15px; padding: var(--sp-8) 0; color: var(--ink); font-weight: 300; }
  .svc-list li svg { width: 16px; height: 16px; color: var(--cyan); flex: 0 0 auto; margin-top: var(--sp-4); }

  /* ---------- Assessment tool ---------- */
  .tool { background: var(--white); }
  .tool-card {
    background: var(--white); color: var(--ink);
    border: 1px solid var(--line-2); border-radius: 0;
    box-shadow: 0 30px 70px rgba(6,18,43,.10);
    max-width: 820px; margin: 0 auto;
    overflow: hidden;
  }
  .tool-bar { height: 3px; background: var(--mist-2); }
  .tool-bar > i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .4s ease; }
  .tool-body { padding: var(--sp-56); }

  .tool-intro { text-align: center; }
  .tool-intro .badge { display:inline-flex; align-items:center; gap:var(--sp-8); font-family:var(--f-body); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-deep); border:1px solid var(--line-2); border-radius:0; padding:var(--sp-8) var(--sp-16); margin-bottom: var(--sp-24); }
  .tool-intro .badge svg { color: var(--cyan); stroke-linecap: round; stroke-linejoin: round; }
  .tool-intro h3 { font-size: 32px; font-weight: 500; }
  .tool-intro p { color: var(--ink-soft); max-width: 500px; margin: var(--sp-16) auto var(--sp-32); font-weight: 300; }
  .tool-meta { display:flex; justify-content:center; gap: 0; flex-wrap: wrap; margin-bottom: var(--sp-40); }
  .tool-meta > div { text-align:center; padding: 0 var(--sp-32); border-right: 1px solid var(--line); }
  .tool-meta > div:last-child { border-right: none; }
  .tool-meta .k { font-family: var(--f-display); font-weight: 500; font-size: 34px; color: var(--deep); line-height: 1; }
  .tool-meta .l { font-size: 13px; color: var(--ink-mute); margin-top: var(--sp-8); letter-spacing: .02em; }

  .q-step .q-count { font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--cyan-deep); text-transform: uppercase; }
  .q-step .q-dim { font-family: var(--f-body); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-mute); margin-left: var(--sp-12); }
  .q-step h3 { font-size: 27px; font-weight: 500; margin: var(--sp-16) 0 var(--sp-32); line-height: 1.32; }
  .opts { display: flex; flex-direction: column; gap: var(--sp-12); }
  .opt {
    display: flex; align-items: center; gap: var(--sp-16);
    border: 1px solid var(--line-2); border-radius: 0;
    padding: var(--sp-16) var(--sp-24); cursor: pointer; background: var(--white);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    font-size: 16.5px; font-weight: 400; text-align: left; width: 100%; font-family: var(--f-body); color: var(--ink);
  }
  .opt:hover { border-color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); }
  .opt .dot { width: 20px; height: 20px; border: 1.5px solid var(--line-2); border-radius: 50%; flex: 0 0 auto; position: relative; transition: border-color .15s; }
  .opt:hover .dot { border-color: var(--cyan); }
  .opt.sel { background: var(--deep); color: #fff; border-color: var(--deep); box-shadow: none; }
  .opt.sel .dot { border-color: #fff; }
  .opt.sel .dot::after { content:""; position:absolute; inset:4px; border-radius:50%; background: var(--cyan-bright); }
  .q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-32); }
  .q-back { background: none; border: none; font-family: var(--f-body); font-size: 15px; color: var(--ink-soft); cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: var(--sp-8); }
  .q-back:hover { color: var(--ink); }
  .q-back[disabled] { opacity: .3; cursor: default; }
  .q-nav .hint { font-size: 13px; color: var(--ink-mute); }

  /* result */
  .result { text-align: center; }
  .score-ring { width: 180px; height: 180px; margin: 0 auto var(--sp-12); position: relative; }
  .score-ring svg { transform: rotate(-90deg); }
  .score-ring .track { fill:none; stroke: var(--mist-2); stroke-width: 10; }
  .score-ring .val { fill:none; stroke: var(--deep); stroke-width: 10; stroke-linecap: butt; transition: stroke-dashoffset 1.1s ease; }
  .score-ring .center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .score-ring .center .pct { font-family: var(--f-display); font-weight: 500; font-size: 50px; line-height: 1; color: var(--deep); }
  .score-ring .center .pl { font-size: 12px; color: var(--ink-mute); letter-spacing: .06em; margin-top: var(--sp-4); text-transform: uppercase; }
  .tier-badge { display:inline-block; font-family: var(--f-display); font-weight: 500; font-size: 27px; color: var(--deep); padding-bottom: var(--sp-8); border-bottom: 2px solid var(--cyan); margin: var(--sp-12) 0 var(--sp-8); }
  .result > p.tier-desc { color: var(--ink-soft); max-width: 540px; margin: var(--sp-16) auto var(--sp-4); font-weight: 300; }

  .bars { text-align: left; max-width: 580px; margin: var(--sp-40) auto; display: flex; flex-direction: column; gap: var(--sp-20); }
  .bar-row .bar-top { display:flex; justify-content: space-between; font-size: 14.5px; font-weight: 500; margin-bottom: var(--sp-8); }
  .bar-row .bar-top .bv { font-family: var(--f-display); color: var(--ink-soft); font-weight: 500; }
  .bar-track { height: 6px; background: var(--mist-2); border-radius: 0; overflow: hidden; }
  .bar-fill { height: 100%; width: 0; background: var(--deep); transition: width 1s cubic-bezier(.2,.7,.2,1); }
  .bar-row.weak .bar-fill { background: var(--cyan); }
  .bar-row.weak .bar-top .lab::after { content: " · จุดที่ควรเสริมก่อน"; color: var(--cyan-deep); font-weight: 600; font-size: 12px; }

  .rec { text-align: left; background: var(--mist); border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 0; padding: var(--sp-32) var(--sp-32); max-width: 580px; margin: 0 auto var(--sp-32); }
  .rec h4 { font-size: 12.5px; font-family: var(--f-body); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-deep); margin-bottom: var(--sp-16); }
  .rec p { font-size: 16px; color: var(--ink); margin-bottom: var(--sp-16); font-weight: 300; line-height: 1.7; }
  .rec .match-chips { display: flex; flex-wrap: wrap; gap: var(--sp-20); }
  .rec .match-chips a { display:inline-flex; align-items:center; gap:var(--sp-8); font-size: 15px; font-weight: 600; color: var(--cyan-deep); position: relative; padding-bottom: var(--sp-2); }
  .rec .match-chips a::after { content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background: currentColor; transform: scaleX(0); transform-origin:left; transition: transform .22s; }
  .rec .match-chips a:hover::after { transform: scaleX(1); }
  .result-cta { display: flex; gap: var(--sp-16); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-12); }
  .reset-btn { background: none; border: none; color: var(--ink-mute); font-family: var(--f-body); font-size: 14.5px; cursor: pointer; margin-top: var(--sp-24); border-bottom: 1px solid var(--line-2); padding-bottom: var(--sp-2); }
  .reset-btn:hover { color: var(--ink); }

  /* ---------- Process ---------- */
  .proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-40); position: relative; }
  .proc-step { position: relative; padding-top: 0; }
  .proc-step .pn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--cyan); background: var(--mist); color: var(--cyan-deep); font-family: var(--f-display); font-weight: 500; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; position: relative; z-index: 2; }
  .proc-step::before { content: ""; position: absolute; top: 25.5px; left: 52px; right: -40px; height: 1.5px; background: var(--line-2); z-index: 1; transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2,.7,.2,1) .15s; }
  .proc-step.in::before { transform: scaleX(1); }
  .proc-step:last-child::before { display: none; }
  .proc-step .picon { width: 40px; height: 40px; display:flex; align-items:center; justify-content:flex-start; margin: var(--sp-24) 0 var(--sp-16); }
  .proc-step .picon svg { width: 34px; height: 34px; color: var(--deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .proc-step h3 { font-size: 22px; font-weight: 500; margin-bottom: var(--sp-12); }
  .proc-step p { font-size: 15px; color: var(--ink-soft); font-weight: 300; line-height: 1.65; }

  /* ---------- Why ---------- */
  .why { background: var(--white); }
  .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-80); align-items: center; }
  .why-points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-32) var(--sp-32); margin-top: var(--sp-8); }
  .why-point { padding-top: var(--sp-20); border-top: 1px solid var(--line-2); }
  .why-point h3 { font-size: 19px; font-weight: 500; margin-bottom: var(--sp-8); }
  .why-point p { font-size: 14.5px; color: var(--ink-soft); font-weight: 300; line-height: 1.6; }
  .why-card { background: var(--deep); color: var(--on-dark); border-radius: 0; padding: var(--sp-56) var(--sp-56); }
  .mom-fig { margin: 0 0 var(--sp-24); }
  .mom-fig img { display: block; width: 100%; max-width: 240px; height: auto; }
  .mom-fig figcaption { font-size: 12.5px; color: var(--cyan-bright); letter-spacing: .03em; margin-top: var(--sp-12); }
  .why-card .eyebrow { color: var(--cyan-bright); }
  .why-card .eyebrow::before { background: var(--cyan-bright); }
  .why-card h3 { font-size: 30px; font-weight: 500; margin: var(--sp-20) 0 var(--sp-20); color: #fff; line-height: 1.28; }
  .why-card p { color: var(--on-dark-soft); font-size: 17px; font-weight: 300; line-height: 1.7; }
  .why-card .sig { margin-top: var(--sp-32); padding-top: var(--sp-24); border-top: 1px solid var(--line-dark); font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--cyan-bright); }

  /* ---------- FAQ ---------- */
  .faq-list { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line-2); }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-q { width: 100%; text-align: left; background: none; border: none; padding: var(--sp-32) var(--sp-4); font-family: var(--f-display); font-weight: 500; font-size: 22px; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24); transition: color .15s; }
  .faq-q:hover { color: var(--cyan-deep); }
  .faq-q .ic { flex: 0 0 auto; width: 22px; height: 22px; position: relative; }
  .faq-q .ic::before, .faq-q .ic::after { content:""; position:absolute; background: var(--cyan-deep); left:50%; top:50%; transform: translate(-50%,-50%); }
  .faq-q .ic::before { width: 15px; height: 1.5px; }
  .faq-q .ic::after { width: 1.5px; height: 15px; transition: opacity .2s ease, transform .2s ease; }
  .faq-item.open .faq-q .ic::after { opacity: 0; }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .faq-a p { padding: 0 var(--sp-4) var(--sp-32); color: var(--ink-soft); font-size: 16.5px; font-weight: 300; line-height: 1.75; max-width: 720px; }

  /* ---------- Final CTA ---------- */
  .cta { background: radial-gradient(620px circle at 82% 18%, rgba(93,119,255,.16), transparent 60%), var(--deep); color: var(--on-dark); position: relative; overflow: hidden; }
  .cta-rings { position:absolute; left:-200px; bottom:-200px; width: 560px; height: 560px; pointer-events:none; }
  .cta-rings circle { fill:none; stroke: rgba(255,255,255,.06); stroke-width: 1; }
  .cta-inner { position: relative; z-index: 2; text-align: center; max-width: 760px; margin: 0 auto; }
  .cta-inner h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 500; color: #fff; letter-spacing: -.01em; }
  .cta-inner p { color: var(--on-dark-soft); font-size: 19px; margin: var(--sp-24) 0 var(--sp-40); font-weight: 300; line-height: 1.7; }
  .cta-actions { display: flex; gap: var(--sp-20); justify-content: center; flex-wrap: wrap; align-items: center; }
  .cta-contacts { display:flex; gap: 0 var(--sp-40); justify-content:center; flex-wrap: wrap; margin-top: var(--sp-48); padding-top: var(--sp-32); border-top: 1px solid var(--line-dark); font-size: 15px; }
  .cta-contacts a { display:inline-flex; align-items:center; gap:var(--sp-12); color: var(--on-dark-soft); transition: color .15s; }
  .cta-contacts a:hover { color: #fff; }
  .cta-contacts svg { width: 17px; height: 17px; color: var(--cyan-bright); stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- Lead form ---------- */
  .lead-form { background: var(--white); color: var(--ink); text-align: left; max-width: 660px; margin: var(--sp-40) auto 0; padding: var(--sp-40) var(--sp-40); box-shadow: 0 30px 70px rgba(6,18,43,.30); }
  .lead-form .lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }
  .lead-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: var(--sp-20); }
  .lead-form label span { color: var(--cyan-deep); }
  .lead-form input, .lead-form textarea { display: block; width: 100%; margin-top: var(--sp-8); font-family: var(--f-body); font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid var(--line-2); border-radius: 0; padding: var(--sp-12) var(--sp-16); font-weight: 400; }
  .lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(35,64,255,.14); }
  .lead-form textarea { resize: vertical; }
  .lead-form .lf-full { margin-bottom: var(--sp-8); }
  .lead-form .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
  .lead-form .lf-attach { background: var(--mist); border-left: 3px solid var(--cyan); padding: var(--sp-12) var(--sp-16); font-size: 14px; color: var(--ink); margin-bottom: var(--sp-24); }
  .lead-form .lf-foot { display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; margin-top: var(--sp-8); }
  .lead-form .lf-msg { font-size: 14px; font-weight: 600; }
  .lead-form .lf-msg.ok { color: var(--ok); }
  .lead-form .lf-msg.err { color: var(--danger); }
  .lead-form .lf-note { font-size: 12.5px; color: var(--ink-mute); margin-top: var(--sp-20); }
  @media (max-width: 640px) { .lead-form { padding: var(--sp-32) var(--sp-24); } .lead-form .lf-row { grid-template-columns: 1fr; gap: 0; } }

  /* ---------- Footer ---------- */
  footer.ft { background: var(--deep-3); color: var(--on-dark-soft); padding: var(--sp-80) 0 var(--sp-32); }
  .ft-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-40); flex-wrap: wrap; padding-bottom: var(--sp-40); border-bottom: 1px solid var(--line-dark); }
  .ft .brand .name { color: #fff; }
  .ft .brand .name b { color: #fff; }
  .ft .brand .name .amp { color: var(--cyan-bright); }
  .ft .brand .sub { color: rgba(237,240,242,.5); }
  .ft-tag { max-width: 320px; font-size: 14.5px; margin-top: var(--sp-16); font-weight: 300; line-height: 1.6; }
  .ft-links { display: flex; gap: var(--sp-56); flex-wrap: wrap; }
  .ft-col h4 { font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(237,240,242,.45); margin-bottom: var(--sp-16); }
  .ft-col a { display: block; font-size: 14.5px; padding: var(--sp-4) 0; color: var(--on-dark-soft); font-weight: 300; transition: color .15s; }
  .ft-col a:hover { color: #fff; }
  .ft-bot { padding-top: var(--sp-24); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-12); font-size: 13px; color: rgba(237,240,242,.45); }

  /* ---------- Showcase (product mockups) ---------- */
  .showcase { background: var(--white); }
  .show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-32); align-items: start; }
  .mock-cap { font-size: 14.5px; color: var(--ink-soft); margin-top: var(--sp-20); font-weight: 300; line-height: 1.5; }
  .mock { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 26px 64px rgba(6,18,43,.12); }
  .mock-bar { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-12) var(--sp-20); background: var(--mist); border-bottom: 1px solid var(--line); }
  .mock-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mist-2); }
  .mock-bar .mock-title { margin-left: var(--sp-12); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
  .chat-body { padding: var(--sp-24) var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-12); background: var(--cloud); }
  .msg { max-width: 84%; }
  .msg p { padding: var(--sp-12) var(--sp-16); border-radius: 15px; font-size: 14.5px; line-height: 1.55; margin: 0; }
  .msg.out { align-self: flex-end; }
  .msg.out p { background: var(--cyan); color: #fff; border-bottom-right-radius: 4px; }
  .msg.bot { align-self: flex-start; }
  .msg.bot p { background: var(--white); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
  .msg.typing { align-self: flex-start; display: inline-flex; gap: var(--sp-4); align-items: center; background: var(--white); border: 1px solid var(--line); padding: var(--sp-16) var(--sp-16); border-radius: 15px; border-bottom-left-radius: 4px; }
  .msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute); animation: typedot 1.3s infinite ease-in-out; }
  .msg.typing span:nth-child(2) { animation-delay: .2s; }
  .msg.typing span:nth-child(3) { animation-delay: .4s; }
  @keyframes typedot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
  @media (prefers-reduced-motion: reduce) { .msg.typing span { animation: none; } }
  .chat-input { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-12) var(--sp-20); border-top: 1px solid var(--line); color: var(--ink-mute); font-size: 14px; background: var(--white); }
  .chat-input .send { width: 30px; height: 30px; border-radius: 50%; background: var(--cyan); flex: 0 0 auto; }
  .dash-body { padding: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-16); }
  .dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); }
  .tile { background: var(--mist); border-radius: 10px; padding: var(--sp-16) var(--sp-16); }
  .tile .tl { font-size: 11.5px; color: var(--ink-mute); display: block; margin-bottom: var(--sp-8); }
  .tile .tv { font-family: var(--f-display); font-size: 25px; font-weight: 600; color: var(--ink); line-height: 1; }
  .tile .tv em { font-family: var(--f-body); font-size: 11px; font-weight: 400; color: var(--ink-soft); font-style: normal; }
  .dash-chart { border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-16) var(--sp-16) var(--sp-12); }
  .dash-chart svg { display: block; width: 100%; height: auto; }
  .dash-rows { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .dash-rows .row { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); font-size: 14px; color: var(--ink); border-top: 1px solid var(--line); }
  .dash-rows .row:first-child { border-top: none; }
  .dash-rows .row b { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
  .dash-rows .row .st { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
  .dash-rows .row .st.ok { background: var(--ok); }
  .dash-rows .row .st.run { background: var(--cyan); }
  @media (max-width: 860px) { .show-grid { grid-template-columns: 1fr; gap: var(--sp-24); } }

  /* ---------- Credibility band ---------- */
  .cred { background: radial-gradient(560px circle at 15% 85%, rgba(93,119,255,.14), transparent 60%), var(--deep); color: var(--on-dark); }
  .cred-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); align-items: center; }
  .cred h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; color: #fff; margin: var(--sp-20) 0 var(--sp-24); line-height: 1.24; }
  .cred > .wrap > .cred-inner p { color: var(--on-dark-soft); font-size: 17px; font-weight: 300; line-height: 1.72; }
  .cred-points { display: flex; flex-direction: column; gap: var(--sp-16); }
  .cred-point { display: flex; gap: var(--sp-16); align-items: flex-start; padding: var(--sp-20) var(--sp-24); border: 1px solid var(--line-dark); background: rgba(255,255,255,.025); transition: border-color .2s ease, background .2s ease; }
  .cred-point:hover { border-color: rgba(93,119,255,.5); background: rgba(93,119,255,.06); }
  .cred-point svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--cyan-bright); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: var(--sp-2); }
  .cred-point h3 { font-size: 16.5px; font-weight: 500; color: #fff; margin-bottom: var(--sp-4); }
  .cred-point p { font-size: 14.5px; color: var(--on-dark-soft); line-height: 1.6; font-weight: 300; }
  @media (max-width: 860px) { .cred-inner { grid-template-columns: 1fr; gap: var(--sp-40); } }

  /* ---------- Reveal ---------- */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn, .svc-card, .opt, .bar-fill, .faq-a, .score-ring .val, .alink::after, .proc-step::before { transition: none !important; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .prob-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-40); }
    .svc-grid { grid-template-columns: 1fr; }
    .proc-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-40); }
    .proc-step::before { display: none; }
    .why-grid { grid-template-columns: 1fr; gap: var(--sp-48); }
    .why-points { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .wrap { padding-left: max(26px, env(safe-area-inset-left)); padding-right: max(26px, env(safe-area-inset-right)); }
    .nav-links { display: none; }
    .menu-btn { display: inline-flex; }
    .nav-links.open { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: var(--sp-4); background: var(--white); border-bottom: 1px solid var(--line-2); padding: var(--sp-20) var(--sp-24) var(--sp-24); }
    .nav-links.open a.lnk { padding: var(--sp-12) 0; width: 100%; }
    .nav-links.open .nav-cta { margin-top: var(--sp-12); }
    .sec { padding-block: var(--sp-80); }
    .svc-card { padding: var(--sp-32) var(--sp-24); }
    .hero-inner { padding: var(--sp-80) 0 var(--sp-80); }
    .hero-rings { opacity: .5; right: -280px; }
    .tool-body { padding: var(--sp-32) var(--sp-24); }
    .prob-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
    .proc-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
    .why-points { grid-template-columns: 1fr; }
    .why-card { padding: var(--sp-40) var(--sp-32); }
    .tool-meta > div { padding: 0 var(--sp-20); }
    .hero-cta { gap: var(--sp-20); }
  }