/* ========= HOME ========= */
  .hero {
    position: relative;
    background: #0B1B22;
    color: var(--fg-1);
    overflow: hidden;
    padding: clamp(72px, 10vw, 140px) 0 clamp(80px, 9vw, 130px);
    isolation: isolate;
  }
  .hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .hero-bg-base {
    position:absolute; inset:0;
    background: linear-gradient(165deg, #0F2329 0%, #1E394B 50%, #2C6266 120%);
  }
  .hero-orb {
    position:absolute; border-radius:50%; filter: blur(80px); opacity:0.55;
    will-change: transform;
  }
  .hero-orb.o1 { width: 620px; height:620px; background: radial-gradient(circle, rgba(56, 168, 164, 0.2), transparent 65%); top:-180px; right:-120px; animation: orb1 22s ease-in-out infinite alternate;}
  .hero-orb.o2 { width: 480px; height:480px; background: radial-gradient(circle, rgba(56, 168, 164, 0.15), transparent 65%); bottom:-180px; left:-100px; opacity:0.40; animation: orb2 26s ease-in-out infinite alternate;}
  .hero-orb.o3 { width: 360px; height:360px; background: radial-gradient(circle, rgba(56, 168, 164, 0.1), transparent 60%); top:30%; left:30%; opacity:0.30; animation: orb3 32s ease-in-out infinite alternate;}
  @keyframes orb1 { from { transform: translate(0,0) scale(1);} to { transform: translate(-90px, 60px) scale(1.10);}}
  @keyframes orb2 { from { transform: translate(0,0) scale(1);} to { transform: translate(120px,-80px) scale(0.92);}}
  @keyframes orb3 { from { transform: translate(0,0) scale(1);} to { transform: translate(-60px,-100px) scale(1.15);}}
  .hero-grid-lines {
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
    animation: gridDrift 60s linear infinite;
  }
  @keyframes gridDrift { from { background-position: 0 0;} to { background-position: 56px 56px;}}
  .hero-scanline {
    position:absolute; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(56, 168, 164, 0.35), transparent);
    top:30%;
    animation: scanline 9s ease-in-out infinite;
    opacity: 0.55;
  }
  @keyframes scanline {
    0%,100% { transform: translateY(0); opacity:0;}
    20% { opacity:0.65;}
    50% { transform: translateY(220px); opacity:0.85;}
    80% { opacity:0.45;}
  }
  .hero-noise {
    position:absolute; inset:0; opacity:0.05; mix-blend-mode: overlay; pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .hero-text > * { opacity:0; transform: translateY(14px); animation: heroIn 0.9s var(--ease-out) forwards;}
  .hero-text > *:nth-child(1) { animation-delay: 0.05s;}
  .hero-text > *:nth-child(2) { animation-delay: 0.18s;}
  .hero-text > *:nth-child(3) { animation-delay: 0.32s;}
  .hero-text > *:nth-child(4) { animation-delay: 0.46s;}
  .hero-text > *:nth-child(5) { animation-delay: 0.60s;}
  @keyframes heroIn { to { opacity:1; transform: translateY(0);}}

  .hero-mock { animation: mockIn 1.4s var(--ease-out) 0.4s backwards;}
  @keyframes mockIn { from { opacity:0; transform: translateY(24px) scale(0.97);} to { opacity:1; transform:none;}}

  .hero h1 .accent { position:relative; background: linear-gradient(120deg, #5FBDB9 0%, #38A8A4 30%, #C7E8E6 60%, #5FBDB9 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s ease-in-out infinite;}
  @keyframes shimmer { 0%,100% { background-position: 0% 50%;} 50% { background-position: 100% 50%;}}
  .hero-grid {
    position:relative;
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items:center;
  }
  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(44px, 5.4vw, 72px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--fg-1);
    margin: 22px 0 22px;
  }
  .hero p.lead {
    font-size: 18.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    max-width: 540px;
    margin-bottom: 32px;
  }
  .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 36px; }
  .hero-promise {
    display:flex; flex-direction: column; gap: 10px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .hero-promise-row {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 14.5px;
    color: rgba(255,255,255,0.74);
    line-height: 1.5;
  }
  .hero-promise-row b {
    color: var(--fg-1); font-weight: 600;
  }
  .hero-promise-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-aqua);
    box-shadow: 0 0 0 4px rgba(56,168,164,0.18);
    flex-shrink: 0; margin-top: 7px;
  }

  /* mockup composition */
  .hero-mock {
    position: relative; width: 100%; aspect-ratio: 1.05/1;
    perspective: 1800px;
  }
  .mock-window {
    position: absolute;
    background: linear-gradient(180deg, #1A323F 0%, #15293B 100%);
    border: 1px solid rgba(56,168,164,0.18);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(56,168,164,0.06) inset;
    overflow: hidden;
  }
  .mock-window .titlebar {
    height: 30px; display:flex; align-items:center; gap: 7px;
    padding: 0 12px;
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .mock-window .titlebar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); display:inline-block;}
  .mock-window .titlebar i:nth-child(1){ background:#FF6259;} .mock-window .titlebar i:nth-child(2){ background:#FFC23A;} .mock-window .titlebar i:nth-child(3){ background:#28C942;}
  .mock-window .titlebar small { margin-left:auto; font-size:11px; color: rgba(255,255,255,0.4);
    font-family: var(--font-mono); letter-spacing: 0.02em;}

  .mock-main {
    width: 78%; height: 78%;
    top: 8%; left: 0;
    transform: rotate(-2deg);
  }
  .mock-main .mock-body { padding: 18px; display: grid; grid-template-rows: auto auto 1fr; gap: 14px; height: calc(100% - 30px); }
  .mock-row { display:flex; gap: 10px; align-items:center; }
  .mock-pill {
    font-size: 10px; font-weight:600; letter-spacing: 0.06em;
    color: var(--brand-aqua-soft);
    border:1px solid rgba(56,168,164,0.28);
    background: rgba(56,168,164,0.08);
    padding: 3px 8px; border-radius: 6px;
  }
  .mock-h {
    font-family: var(--font-display); color: var(--fg-1); font-weight: 600;
    font-size: 17px; letter-spacing: -0.01em; line-height:1.25;
  }
  .mock-h small { display:block; font-family:var(--font-body); font-weight:400;
    font-size: 11.5px; color: rgba(255,255,255,0.45); margin-top: 4px; letter-spacing:0;}
  .mock-grid { display:grid; grid-template-columns: 1.5fr 1fr; gap: 10px; }
  .mock-card {
    background: rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius: 9px; padding: 11px 13px; display:flex; flex-direction:column; gap:5px;
  }
  .mock-card .lbl { font-size:10px; color: rgba(255,255,255,0.45); letter-spacing: 0.06em; text-transform:uppercase; }
  .mock-card .num { font-family: var(--font-display); font-weight:600; font-size: 22px; color: var(--fg-1); letter-spacing: -0.02em; line-height:1;}
  .mock-card .delta { font-size: 10.5px; color: var(--brand-aqua-soft); font-weight:600;}
  .mock-card .bar-track { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; margin-top: 5px;}
  .mock-card .bar-fill { height: 100%; background: linear-gradient(90deg, #38A8A4, #5FBDB9); border-radius: 2px;}
  .mock-chart {
    background: rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius: 9px; padding: 11px 13px;
    display:flex; flex-direction:column; gap: 8px;
  }
  .mock-chart svg { width:100%; height: 70px; display:block;}
  .mock-list { background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:9px; padding: 6px; }
  .mock-listitem { display:flex; align-items:center; gap: 10px; padding: 7px 10px; border-radius:7px;}
  .mock-listitem:hover { background: rgba(255,255,255,0.03);}
  .mock-listitem .dot { width: 7px; height:7px; border-radius:50%; flex-shrink:0;}
  .mock-listitem .nm { font-size: 11.5px; color: rgba(255,255,255,0.86); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .mock-listitem .tg { font-size: 9.5px; color: rgba(255,255,255,0.42); font-family: var(--font-mono);}

  .mock-side {
    width: 44%; aspect-ratio: 0.62/1;
    bottom: -2%; right: -2%;
    transform: rotate(4deg);
  }
  .mock-phone {
    background: #0E1416;
    border-radius: 28px;
    border: 8px solid #0E1416;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1.5px rgba(56,168,164,0.18);
    overflow: hidden;
  }
  .mock-phone-screen {
    background: linear-gradient(180deg, #1E394B 0%, #15293B 100%);
    height: 100%;
    display: flex; flex-direction: column; padding: 16px 14px 0;
  }
  .mock-phone-h { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
  .mock-phone-greet { font-size:10px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em;}
  .mock-phone-greet b { display:block; font-family: var(--font-display); font-weight:600; font-size: 14px; color: var(--fg-1); margin-top:3px; letter-spacing:-0.01em; }
  .mock-phone-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(160deg, #38A8A4, #1E394B); }

  .mock-phone-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(56,168,164,0.18);
    border-radius: 12px; padding: 12px; margin-bottom: 9px;
  }
  .mock-phone-card .pl { font-size: 9px; letter-spacing: 0.1em; color: var(--brand-aqua-soft); text-transform: uppercase; font-weight: 600; }
  .mock-phone-card .pt { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg-1); margin-top: 5px; line-height: 1.3; }
  .mock-phone-card .ring {
    margin-top:9px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08);
    position: relative; overflow:hidden;
  }
  .mock-phone-card .ring::after {
    content:""; position:absolute; inset:0 30% 0 0;
    background: linear-gradient(90deg, #38A8A4, #5FBDB9);
    border-radius: 3px;
  }
  .mock-phone-card .pm { display:flex; justify-content:space-between; margin-top: 6px;
    font-size: 9.5px; color: rgba(255,255,255,0.55); }
  .mock-phone-card .pm b { font-family: var(--font-mono); color: var(--fg-1); }

  /* logos band */
  .logos-band {
    background: var(--neutral-100);
    padding: 36px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
  }
  .logos-band-inner {
    display: flex; align-items: center; gap: 48px; flex-wrap: wrap; justify-content:space-between;
  }
  .logos-band-label {
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--fg-3);
  }
  .logos-row {
    display:flex; gap: 44px; flex-wrap: wrap; align-items:center;
    flex: 1; justify-content:flex-end;
  }
  .logo-mark {
    font-family: var(--font-display);
    font-weight: 700; font-size: 19px; letter-spacing:-0.02em;
    color: var(--brand-deep); opacity: 0.55;
    transition: opacity var(--dur-base);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .logo-mark:hover { opacity: 1; }
  .logo-mark .glyph {
    width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(160deg, #2C6266 0%, #1E394B 100%);
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--fg-1); font-size:11px; font-weight:700;
  }

  /* services / pillars */
  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .pillar {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex; flex-direction: column; gap: 14px;
    transition: all var(--dur-base) var(--ease-out);
    position: relative; overflow: hidden;
  }
  .pillar::before {
    content:""; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(56,168,164,0.06), transparent 60%);
    opacity: 0; transition: opacity var(--dur-base);
  }
  .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(56,168,164,0.3); }
  .pillar:hover::before { opacity: 1; }
  .pillar-icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    background: linear-gradient(160deg, rgba(56,168,164,0.14), rgba(30,57,75,0.04));
    color: var(--brand-deep);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--dur-base);
  }
  .pillar-icon svg { width: 22px; height: 22px; }
  .pillar:hover .pillar-icon {
    background: linear-gradient(160deg, var(--brand-aqua), var(--brand-deep));
    color: var(--fg-1);
    box-shadow: var(--shadow-brand);
  }
  .pillar h3 {
    font-family: var(--font-display);
    font-size: 19px; font-weight: 600;
    color: var(--fg-1); letter-spacing: -0.015em;
    line-height: 1.3;
  }
  .pillar p { font-size: 14.5px; color: var(--fg-3); line-height: 1.55; flex: 1;}
  .pillar-link {
    font-size: 13.5px; font-weight: 600; color: var(--brand-aqua);
    display: inline-flex; align-items: center; gap: 6px;
    transition: color var(--dur-fast);
  }
  .pillar:hover .pillar-link { color: var(--brand-deep); }
  .pillar-link .arrow { transition: transform var(--dur-base); }
  .pillar:hover .pillar-link .arrow { transform: translateX(4px); }

  /* method */
  .method {
    background: linear-gradient(170deg, #1E394B 0%, #14303D 100%);
    color: var(--fg-1);
    position: relative; overflow: hidden;
  }
  .method::before {
    content:""; position:absolute; inset:0;
    background: radial-gradient(ellipse 50% 50% at 90% 10%, rgba(56,168,164,0.12), transparent 60%);
  }
  .method .container { position:relative; }
  .method h2, .method .section-head h2 { color: var(--fg-1); }
  .method .section-head p { color: rgba(255,255,255,0.7); }
  .method-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
  }
  .method-step {
    padding: 28px 28px 28px 0;
    border-left: 1px solid rgba(56,168,164,0.18);
    padding-left: 28px;
    position: relative;
  }
  .method-step:first-child { border-left-color: var(--brand-aqua); }
  .method-step .num {
    font-family: var(--font-display);
    font-size: 13px; font-weight: 700;
    color: var(--brand-aqua-soft); letter-spacing: 0.16em;
    margin-bottom: 14px; display: inline-block;
  }
  .method-step h4 {
    font-family: var(--font-display);
    font-size: 21px; font-weight: 600;
    color: var(--fg-1); letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 12px;
    min-height: 3em;
    text-wrap: balance;
  }
  .method-step p {
    font-size: 14px; color: rgba(255,255,255,0.65);
    line-height: 1.6;
  }
  .method-step ul {
    list-style:none; padding:0; margin: 12px 0 0;
    display:flex; flex-direction: column; gap: 6px;
  }
  .method-step li {
    font-size: 12.5px; color: rgba(255,255,255,0.55);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .method-step li::before { content:""; width:4px; height:4px; border-radius:50%; background: var(--brand-aqua); flex-shrink:0; }

  /* cases */
  .cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .case-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    display: flex; flex-direction: column;
    transition: all var(--dur-base) var(--ease-out);
    cursor: pointer;
  }
  .case-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  .case-img {
    height: 220px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: flex; align-items: flex-end; padding: 22px;
  }
  .case-img-1 { background: linear-gradient(135deg, #1E394B 0%, #2C6266 50%, #38A8A4 100%); }
  .case-img-2 { background: linear-gradient(140deg, #2C6266 0%, #38A8A4 100%); }
  .case-img-3 { background: linear-gradient(140deg, #163142 0%, #274950 100%); }
  .case-img-4 { background: linear-gradient(140deg, #38A8A4 0%, #5FBDB9 100%); }
  .case-img::before {
    content:""; position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 80% 20%, rgba(255,255,255,0.16), transparent 50%),
      radial-gradient(circle at 10% 90%, rgba(0,0,0,0.18), transparent 50%);
  }
  .case-glyph {
    position: absolute; top: 22px; right: 22px;
    width: 52px; height: 52px; border-radius: 12px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 19px; color: var(--fg-1); letter-spacing: -0.02em;
  }
  .case-segment {
    position: relative; z-index: 1;
    font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: rgba(255,255,255,0.85);
  }
  .case-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1;}
  .case-body h4 {
    font-family: var(--font-display);
    font-size: 19px; font-weight: 600;
    color: var(--fg-1); letter-spacing: -0.015em; line-height: 1.3;
  }
  .case-card.feat .case-body h4 { font-size: 24px; }
  .case-body p { font-size: 14px; color: var(--fg-3); line-height: 1.55; flex: 1; }
  .case-card.feat .case-body h4 { font-size: 19px; }
  .case-result {
    display: flex; gap: 22px; padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
  }
  .case-result div { display: flex; flex-direction: column; gap: 2px; }
  .case-result b {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600;
    color: var(--brand-deep); letter-spacing: -0.02em; line-height: 1;
  }
  .case-result span {
    font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em;
  }

  /* differentials */
  .diff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated);
  }
  .diff {
    padding: 36px 32px;
    border-right: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; gap: 14px;
    transition: background var(--dur-base);
  }
  .diff:last-child { border-right: none; }
  .diff:hover { background: var(--bg); }
  .diff-num {
    font-family: var(--font-display);
    font-size: 13px; font-weight: 700;
    color: var(--brand-aqua); letter-spacing: 0.16em;
  }
  .diff h4 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600;
    color: var(--fg-1); letter-spacing: -0.015em; line-height: 1.2;
  }
  .diff p { font-size: 14px; color: var(--fg-3); line-height: 1.55; }

  /* testimonials */
  .testimonials {
    background: var(--neutral-100);
  }
  .test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .test {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex; flex-direction: column; gap: 18px;
  }
  .test .quote-mark {
    font-family: var(--font-display);
    font-size: 56px; font-weight: 700;
    color: var(--brand-aqua); line-height: 0.5;
    height: 18px;
  }
  .test blockquote {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 500;
    color: var(--fg-1); line-height: 1.45;
    letter-spacing: -0.01em;
    margin: 0; flex: 1;
  }
  .test-author { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
  .test-av {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--fg-1); font-family: var(--font-display); font-weight: 600; font-size: 14px;
    letter-spacing: -0.01em;
    flex-shrink: 0;
  }
  .test-av.a1 { background: linear-gradient(160deg, #38A8A4, #1E394B); }
  .test-av.a2 { background: linear-gradient(160deg, #5FBDB9, #274950); }
  .test-av.a3 { background: linear-gradient(160deg, #2C6266, #1E394B); }
  .test-author b {
    display: block; font-size: 14px; font-weight: 600; color: var(--fg-1);
  }
  .test-author span {
    font-size: 12.5px; color: var(--fg-3);
  }

  /* big CTA */
  .big-cta {
    background: linear-gradient(135deg, #1E394B 0%, #274950 100%);
    color: var(--fg-1);
    border-radius: var(--radius-2xl);
    padding: clamp(48px, 6vw, 80px);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .big-cta::before {
    content:""; position:absolute; inset: 0;
    background:
      radial-gradient(ellipse 50% 60% at 90% 50%, rgba(56,168,164,0.25), transparent 60%),
      radial-gradient(ellipse 30% 40% at 0% 0%, rgba(56,168,164,0.10), transparent 70%);
    pointer-events:none;
  }
  .big-cta .col { position: relative; }
  .big-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700; line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--fg-1);
    margin-bottom: 18px;
  }
  .big-cta p {
    font-size: 17px; line-height: 1.6;
    color: rgba(255,255,255,0.78);
    max-width: 480px;
    margin-bottom: 28px;
  }
  .big-cta-meta {
    display: flex; gap: 24px; flex-wrap: wrap;
  }
  .big-cta-meta span {
    font-size: 13px; color: rgba(255,255,255,0.7);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .big-cta-meta span::before {
    content:""; width:14px; height:14px; border-radius: 50%;
    background: rgba(56,168,164,0.25);
    border: 1.5px solid var(--brand-aqua);
    flex-shrink:0;
  }

  .big-cta-form {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(56,168,164,0.18);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: 28px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .big-cta-form label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--brand-aqua-soft);
  }
  .big-cta-form input, .big-cta-form select {
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--fg-1);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: 14px;
    transition: all var(--dur-fast);
  }
  .big-cta-form input:focus, .big-cta-form select:focus {
    outline: none;
    border-color: var(--brand-aqua);
    background: rgba(0,0,0,0.30);
  }
  .big-cta-form input::placeholder { color: rgba(255,255,255,0.35); }
  .big-cta-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-mock { max-width: 540px; margin: 0 auto;}
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .method-steps { grid-template-columns: repeat(2, 1fr); gap: 24px;}
    .method-step { border-left: none; padding-left: 0; border-top: 2px solid rgba(56,168,164,0.18); padding-top: 20px;}
    .method-step:first-child { border-top-color: var(--brand-aqua); }
    .cases-grid { grid-template-columns: 1fr 1fr; }
    .diff-grid { grid-template-columns: 1fr 1fr; }
    .diff:nth-child(2) { border-right: none; }
    .diff:nth-child(1), .diff:nth-child(2) { border-bottom: 1px solid var(--border-subtle); }
    .test-grid { grid-template-columns: 1fr; }
    .big-cta { grid-template-columns: 1fr; padding: 40px 28px; }
  }
  @media (max-width: 600px) {
    .pillars-grid { grid-template-columns: 1fr; }
    .cases-grid { grid-template-columns: 1fr; }
    .diff-grid { grid-template-columns: 1fr; }
    .diff { border-right: none; border-bottom: 1px solid var(--border-subtle);}
    .diff:last-child { border-bottom: none;}
    .big-cta-form .row2 { grid-template-columns: 1fr; }
    .hero-promise-row { font-size: 13.5px; }
  }




  /* === Ajuste de contraste: títulos/textos legíveis em superfícies escuras === */
  .hero, .method, .big-cta { --fg-1: #EFF5F6; }

  /* === Hero mais compacto: cabe melhor na primeira tela === */
  .hero { padding-top: clamp(36px, 4.5vw, 76px); padding-bottom: clamp(44px, 4.5vw, 84px); }
  .hero h1 { font-size: clamp(38px, 4.4vw, 60px); margin: 16px 0 18px; }
  .hero p.lead { font-size: 17px; margin-bottom: 24px; }
  .hero-ctas { margin-bottom: 24px; }
  .hero-promise { padding-top: 20px; gap: 8px; }
  .hero-mock { max-width: 470px; margin: 0 auto; }

/* === Reveal on scroll (fade-up + blur, cascata via --stagger) === */
.fade-up{
  opacity:0;
  transform:translateY(24px);
  filter:blur(8px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);
  transition-delay:calc(var(--stagger, 0) * 90ms);
  will-change:opacity, transform, filter;
}
.fade-up.is-visible{ opacity:1; transform:none; filter:blur(0); }

/* === Gooey Text Crossfade (palavra-acento do Hero que "derrete") === */
.gooey{ position:relative; display:inline-block; vertical-align:baseline; }
.gooey-sizer{ visibility:hidden; white-space:nowrap; }
.gooey-layer{
  position:absolute; left:0; top:0; white-space:nowrap;
  transition:opacity .6s var(--ease-out), filter .6s var(--ease-out);
  will-change:opacity, filter;
}
/* O gradiente shimmer do .accent precisa ser aplicado nas camadas (o texto real
   vive nelas, não no container) — senão ficariam transparentes/invisíveis. */
.hero h1 .gooey.accent .gooey-layer{
  background: linear-gradient(120deg, #5FBDB9 0%, #38A8A4 30%, #C7E8E6 60%, #5FBDB9 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity:1; transform:none; filter:none; transition:none; }
  .gooey-layer{ transition:none; }
}

/* === Expanding Services (acordeão de serviços — components/ExpandingServices.jsx) === */
.xcards{
  list-style:none; margin:0; padding:0; width:100%;
  display:grid; gap:12px;
  height:480px;
  transition:grid-template-columns .5s var(--ease-out), grid-template-rows .5s var(--ease-out);
}
.xcard{
  position:relative; overflow:hidden; cursor:pointer;
  border-radius:var(--radius-lg);
  border:1px solid rgba(56,168,164,0.20);
  min-width:0; min-height:0;
  background:#0B1B22;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.xcard:focus-visible{ box-shadow:0 0 0 2px var(--brand-aqua); }

/* fundo em gradiente da marca; dessaturado/escurecido quando inativo */
.xcard-bg{
  position:absolute; inset:0;
  background:linear-gradient(150deg, #123243 0%, #0B1B22 55%, #16414A 120%);
  filter:grayscale(.55) brightness(.62);
  transform:scale(1.08);
  transition:filter .45s var(--ease-out), transform .45s var(--ease-out);
}
.xcard:nth-child(2) .xcard-bg{ background:linear-gradient(150deg, #16414A 0%, #0B1B22 55%, #123243 120%); }
.xcard:nth-child(3) .xcard-bg{ background:linear-gradient(150deg, #0F2E3A 0%, #0B1B22 50%, #1E4E50 120%); }
.xcard:nth-child(4) .xcard-bg{ background:linear-gradient(150deg, #143A44 0%, #0B1B22 55%, #11313E 120%); }
.xcard:nth-child(5) .xcard-bg{ background:linear-gradient(150deg, #103340 0%, #0B1B22 50%, #1A4A4C 120%); }
.xcard[data-active=true] .xcard-bg{ filter:grayscale(0) brightness(1); transform:scale(1); }

/* glow aqua sutil no card ativo */
.xcard-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 85% 15%, rgba(56,168,164,0.22), transparent 60%);
  opacity:0; transition:opacity .45s var(--ease-out);
}
.xcard[data-active=true] .xcard-bg::after{ opacity:1; }

/* ícone-marca d'água grande no canto */
.xcard-watermark{ position:absolute; right:-16px; bottom:-26px; color:rgba(56,168,164,0.10); line-height:0; }
.xcard-watermark svg{ width:200px; height:200px; }

.xcard-shade{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,18,23,0.88) 0%, rgba(7,18,23,0.45) 42%, transparent 100%);
}

.xcard-body{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  padding:22px; color:var(--fg-1);
}

/* título vertical (estado recolhido) */
.xcard-vtitle{
  position:absolute; left:24px; bottom:22px; margin:0;
  transform-origin:left bottom; transform:rotate(-90deg);
  white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:0.10em; text-transform:uppercase; color:rgba(255,255,255,0.72);
  transition:opacity .3s var(--ease-out);
  pointer-events:none;
}
.xcard[data-active=true] .xcard-vtitle{ opacity:0; }

/* conteúdo do estado expandido */
.xcard-icon{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(56,168,164,0.16); border:1px solid rgba(56,168,164,0.32);
  color:var(--brand-aqua-soft);
  opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease-out) .05s, transform .3s var(--ease-out) .05s;
}
.xcard-icon svg{ width:22px; height:22px; }
.xcard-title{
  margin:0; font-family:var(--font-display); font-weight:700; font-size:23px;
  letter-spacing:-0.02em; color:#fff; white-space:nowrap;
  opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease-out) .12s, transform .3s var(--ease-out) .12s;
}
.xcard-desc{
  margin:0; font-size:14px; line-height:1.5; color:rgba(255,255,255,0.82); max-width:34ch;
  opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease-out) .18s, transform .3s var(--ease-out) .18s;
}
.xcard-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:2px;
  font-size:14px; font-weight:600; color:var(--brand-aqua-soft);
  opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease-out) .24s, transform .3s var(--ease-out) .24s;
}
.xcard-link .arrow{ transition:transform var(--dur-base) var(--ease-out); }
.xcard[data-active=true]:hover .xcard-link .arrow{ transform:translateX(4px); }
.xcard[data-active=true] .xcard-icon,
.xcard[data-active=true] .xcard-title,
.xcard[data-active=true] .xcard-desc,
.xcard[data-active=true] .xcard-link{ opacity:1; transform:none; }

/* Mobile: título recolhido fica na horizontal (sem rotação) */
@media (max-width:767px){
  .xcards{ height:560px; }
  .xcard-vtitle{ transform:none; left:22px; bottom:20px; }
}

@media (prefers-reduced-motion: reduce){
  .xcards, .xcard-bg, .xcard-vtitle, .xcard-icon, .xcard-title, .xcard-desc, .xcard-link{ transition:none; }
}

/* === Folga no topo p/ o header em dock flutuante (logo/CTA nos cantos) === */
.hero { padding-top: clamp(84px, 9vw, 104px); }