:root{
    --dark-green: #043935;
    --dark-green-2: #06433d;
    --deep-teal: #0a2e2a;
    --mint: #5CECA7;
    --mint-bright: #8BF1B0;
    --mint-pale: #C3E7DB;
    --mint-soft-bg: #DCEFE6;
    --ink: #16241F;
    --ink-soft: #4B5B55;
    --red: #E5392B;
    --red-soft-bg: #FBE4E1;
    --white: #ffffff;
    --off-white: #F7F9F8;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --max-width: 1280px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Motion tokens — one shared vocabulary for the whole page */
    --ease-out: cubic-bezier(.22,.61,.36,1);
    --ease-out-strong: cubic-bezier(.16,.8,.3,1);
    --ease-spring: cubic-bezier(.34,1.45,.64,1);
    --dur-fast: .18s;
    --dur-med: .3s;
  }

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

  html{scroll-behavior:smooth;}

  body{
    font-family: var(--font);
    color: var(--ink);
    background: var(--white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img{max-width:100%; display:block;}

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

  .wrap{
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 40px;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 8px;
    letter-spacing: 0.2px;
  }

  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    font-size:15px;
    padding: 15px 26px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn:active{ transform: translateY(0) scale(.985); transition-duration: .08s; }
  a:focus-visible,
  button:focus-visible{
    outline: 2px solid var(--mint);
    outline-offset: 3px;
  }

  .btn-primary{
    background: linear-gradient(135deg, var(--mint-bright), var(--mint));
    color: #06332E;
    box-shadow: 0 8px 24px rgba(92,236,167,0.25);
  }
  .btn-primary:hover{ box-shadow: 0 12px 32px rgba(92,236,167,0.38); }
  /* Sheen sweep on hover — animates background-position only, no layout */
  .btn-primary::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,0.4) 50%, transparent 68%);
    background-size: 250% 100%;
    background-position: 170% 0;
    background-repeat: no-repeat;
    opacity:0;
    transition: opacity .25s var(--ease-out);
    pointer-events:none;
  }
  .btn-primary:hover::after{
    opacity:1;
    background-position: -70% 0;
    transition: background-position .65s var(--ease-out), opacity .15s;
  }

  .btn-outline{
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255,255,255,0.35);
  }

  .btn-outline:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }

  /* ============ CONTACT MODAL ============ */
  .contact-modal-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    background: rgba(6,15,12,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 24px;
    opacity:0;
    visibility:hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .contact-modal-overlay.is-open{
    opacity:1;
    visibility:visible;
  }
  .contact-modal{
    position:relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    max-width: 520px;
    width:100%;
    max-height: 90vh;
    overflow-y:auto;
    padding-right: 6px;
    transform: scale(0.94) translateY(12px);
    transition: transform 0.34s var(--ease-spring);
    scrollbar-width: thin;
    scrollbar-color: rgba(10,90,68,0.3) transparent;
  }
  .contact-modal::-webkit-scrollbar{ width:6px; }
  .contact-modal::-webkit-scrollbar-thumb{ background: rgba(10,90,68,0.3); border-radius:999px; }
  .contact-modal::-webkit-scrollbar-track{ background:transparent; }
  .contact-modal-inner{
    padding: 40px;
  }
  .contact-modal-overlay.is-open .contact-modal{
    transform: scale(1) translateY(0);
  }
  .contact-modal-close{
    position:absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--off-white);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color: var(--ink-soft);
    transition: background 0.2s ease, transform 0.25s var(--ease-out);
  }
  .contact-modal-close:hover{ background: var(--mint-soft-bg); transform: rotate(90deg); }
  .contact-modal-close:active{ transform: rotate(90deg) scale(.9); }
  .contact-modal-close svg{ width:18px; height:18px; }
  .contact-modal h2{
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .contact-modal h2 .accent{ color: #0a8f6e; }
  .contact-modal-sub{
    font-size:14px;
    color: var(--ink-soft);
    margin-bottom: 26px;
  }
  .contact-modal .form-group{ margin-bottom: 18px; }
  .contact-modal .form-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .contact-modal .form-group label{
    display:block;
    font-size:13px;
    font-weight:600;
    color: var(--ink);
    margin-bottom: 7px;
  }
  .contact-modal .form-group input,
  .contact-modal .form-group textarea{
    width:100%;
    font-family: var(--font);
    font-size:14px;
    color: var(--ink);
    background: var(--off-white);
    border: 1.5px solid rgba(10,90,68,0.12);
    border-radius: 10px;
    padding: 11px 14px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }
  .contact-modal .form-group input:focus,
  .contact-modal .form-group textarea:focus{
    outline:none;
    border-color: #1FA97C;
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(31,169,124,0.14);
  }
  .contact-modal .form-group textarea{
    resize: vertical;
    min-height: 110px;
    line-height:1.5;
  }
  .contact-modal .form-group label span{
    color: var(--red);
  }
  .contact-modal .form-submit{
    width:100%;
    justify-content:center;
    margin-top: 4px;
    background: var(--dark-green);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(4,57,53,0.25);
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
  }
  .contact-modal .form-submit:hover{
    transform: translateY(-2px);
  }
  .contact-modal .form-submit:disabled{
    background: var(--mint-pale);
    color: rgba(10,90,68,0.5);
    box-shadow:none;
    cursor:not-allowed;
    transform:none;
  }
  .contact-modal .form-note{
    font-size:12px;
    color: var(--ink-soft);
    text-align:center;
    margin-top:14px;
  }
  body.modal-open{ overflow:hidden; }

  /* Staggered entrance for modal content each time it opens */
  @keyframes modalRise{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: none; }
  }
  .contact-modal-overlay.is-open .contact-modal h2,
  .contact-modal-overlay.is-open .contact-modal-sub,
  .contact-modal-overlay.is-open #contact-form > *{
    animation: modalRise .45s var(--ease-out) both;
  }
  .contact-modal-overlay.is-open .contact-modal h2{ animation-delay: .05s; }
  .contact-modal-overlay.is-open .contact-modal-sub{ animation-delay: .1s; }
  .contact-modal-overlay.is-open #contact-form > *:nth-child(1){ animation-delay: .14s; }
  .contact-modal-overlay.is-open #contact-form > *:nth-child(2){ animation-delay: .18s; }
  .contact-modal-overlay.is-open #contact-form > *:nth-child(3){ animation-delay: .22s; }
  .contact-modal-overlay.is-open #contact-form > *:nth-child(4){ animation-delay: .26s; }
  .contact-modal-overlay.is-open #contact-form > *:nth-child(5){ animation-delay: .3s; }
  .contact-modal-overlay.is-open #contact-form > *:nth-child(6){ animation-delay: .34s; }
  @media (prefers-reduced-motion: reduce){
    .contact-modal-overlay.is-open .contact-modal h2,
    .contact-modal-overlay.is-open .contact-modal-sub,
    .contact-modal-overlay.is-open #contact-form > *{ animation:none; }
    .contact-modal{ transition:none; }
    .contact-modal-close:hover, .contact-modal-close:active{ transform:none; }
  }

  @media (max-width: 560px){
    .contact-modal-inner{ padding: 28px 22px; }
    .contact-modal .form-row{ grid-template-columns: 1fr; gap:0; }
    .contact-modal h2{ font-size:22px; }
  }

  section{ position:relative; }

  /* ============ NAV / HERO ============ */
  .hero{
    position:relative;
    background:
      radial-gradient(80% 60% at 18% 8%, rgba(92,236,167,0.18) 0%, transparent 60%),
      radial-gradient(70% 70% at 88% 18%, rgba(60,200,150,0.2) 0%, transparent 55%),
      linear-gradient(180deg, rgba(3,57,52,0.88) 0%, rgba(3,57,52,0.84) 80%, rgba(3,57,52,0.74) 100%);
    background-size: 160% 160%, 160% 160%, 100% 100%;
    background-position: 0% 0%, 100% 0%, center;
    background-repeat: no-repeat;
    animation: heroDrift 28s ease-in-out infinite;
    color: var(--white);
    padding-top: 28px;
    overflow:hidden;
  }
  .hero-bg-photo{
    position:absolute;
    inset:0;
    z-index:-1;
    background-image: url('https://ayki-storage.fra1.cdn.digitaloceanspaces.com/Website/Hero%20background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: heroZoom 40s ease-in-out infinite;
  }
  .hero > .wrap{ position:relative; z-index:1; }

  @keyframes heroDrift{
    0%, 100%{ background-position: 0% 0%, 100% 0%, center; }
    50%{ background-position: 20% 15%, 80% 28%, center; }
  }
  @keyframes heroZoom{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.06); }
  }

  @media (prefers-reduced-motion: reduce){
    .hero-bg-photo{ animation: none; }
  }

  .hero-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
  }
  .hero-particles .ap{
    position:absolute;
  }
  .hero-particles .ap svg{ display:block; }
  .hero-particles .ap.p1{ top:14%; animation: blowAcross1 12s linear infinite -2s; }
  .hero-particles .ap.p2{ top:58%; animation: blowAcross2 9.5s linear infinite -7s; }
  .hero-particles .ap.p3{ top:10%; animation: blowAcross1 14s linear infinite -10s; }
  .hero-particles .ap.p4{ top:74%; animation: blowAcross2 10.5s linear infinite -3.5s; }
  .hero-particles .ap.p5{ top:66%; animation: blowAcross1 13s linear infinite -5s; }
  .hero-particles .ap.p6{ top:22%; animation: blowAcross2 11s linear infinite -8.5s; }
  .hero-particles .ap.p7{ top:46%; animation: blowAcross1 10s linear infinite -1s; }
  .hero-particles .ap.p8{ top:34%; animation: blowAcross2 13.5s linear infinite -11s; }
  .hero-particles .ap.p1 svg{ width:22px; color:rgba(255,255,255,0.4); animation: spin1 2.4s linear infinite; }
  .hero-particles .ap.p2 svg{ width:10px; color:rgba(139,241,176,0.5); filter:blur(0.6px); animation: spin2 1.8s linear infinite; }
  .hero-particles .ap.p3 svg{ width:17px; color:rgba(255,255,255,0.32); filter:blur(0.4px); animation: spin1 2.8s linear infinite; }
  .hero-particles .ap.p4 svg{ width:12px; color:rgba(139,241,176,0.42); filter:blur(0.8px); animation: spin2 2.1s linear infinite; }
  .hero-particles .ap.p5 svg{ width:20px; color:rgba(255,255,255,0.36); animation: spin1 2.6s linear infinite; }
  .hero-particles .ap.p6 svg{ width:14px; color:rgba(139,241,176,0.46); filter:blur(0.5px); animation: spin2 2.2s linear infinite; }
  .hero-particles .ap.p7 svg{ width:11px; color:rgba(255,255,255,0.28); filter:blur(0.9px); animation: spin1 2s linear infinite; }
  .hero-particles .ap.p8 svg{ width:16px; color:rgba(139,241,176,0.4); animation: spin2 2.7s linear infinite; }

  /* Transform-only drift: runs on the compositor, no per-frame layout
     (previously animated `left`, which forced continuous reflow). */
  .hero-particles .ap,
  .assistant-particles .ap,
  .features-particles .ap,
  .faq-particles .ap,
  .gallery-particles .ap,
  .donors-particles .ap,
  .cta-particles .ap{ left:0; }
  @keyframes blowAcross1{
    0%{ transform:translate3d(-8vw,0,0); }
    30%{ transform:translate3d(27vw,-10px,0); }
    60%{ transform:translate3d(62vw,8px,0); }
    100%{ transform:translate3d(108vw,0,0); }
  }
  @keyframes blowAcross2{
    0%{ transform:translate3d(-8vw,0,0); }
    35%{ transform:translate3d(33vw,10px,0); }
    65%{ transform:translate3d(67vw,-8px,0); }
    100%{ transform:translate3d(108vw,0,0); }
  }
  @keyframes spin1{ 0%{ rotate:0deg; } 100%{ rotate:360deg; } }
  @keyframes spin2{ 0%{ rotate:0deg; } 100%{ rotate:-360deg; } }

  @media (prefers-reduced-motion: reduce){
    .hero{ animation: none; }
    .hero-particles{ display:none; }
  }

  @media (max-width: 720px){
    .hero-particles .ap.p3, .hero-particles .ap.p7, .hero-particles .ap.p8{ display:none; }
  }

  .nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    display:flex;
    justify-content:center;
    padding: 19px 0 14px;
    background: rgba(3,57,52,0.5);
    transition: padding 0.3s ease, background 0.3s ease;
  }
  .nav-spacer{
    height: 0;
  }
  .nav.scrolled{
    padding: 8px 0 6px;
    background: rgba(3,57,52,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  }
  .nav.scrolled .logo-lockup{
    height: 48px;
  }
  .nav-inner{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    padding: 0 40px;
    min-height: 90px;
    transition: min-height 0.3s ease;
  }
  .nav.scrolled .nav-inner{ min-height: 48px; }
  .nav .logo-lockup{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    height:90px;
    width:auto;
    transition: height 0.3s ease;
  }
  .nav-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 12px;
  }
  .nav-actions .btn{
    padding: 10px 18px;
    font-size:13px;
    transition: padding 0.3s ease;
  }
  .nav.scrolled .nav-actions .btn{
    padding: 8px 14px;
    font-size:12px;
  }

  .hero-grid{
    display:grid;
    grid-template-columns: auto auto;
    align-items:center;
    justify-content:center;
    gap: 152px;
    padding-bottom: 50px;
    padding-top: 6px;
  }

  .hero-eyebrow{
    background: rgba(92,236,167,0.12);
    border: 1px solid rgba(92,236,167,0.35);
    color: var(--mint-bright);
    margin-bottom: 22px;
  }

  .hero-copy h1{
    font-size: 56px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
    margin-bottom: 22px;
  }
  .hero-copy h1 .accent{ color: var(--mint-bright); }

  .hero-copy p{
    font-size: 17px;
    color: rgba(255,255,255,0.78);
    max-width: 460px;
    margin-bottom: 8px;
  }
  .hero-copy p.muted{
    color: rgba(255,255,255,0.55);
    font-size:15px;
    margin-bottom: 32px;
  }

  .hero-actions{ display:flex; gap: 14px; align-items:center; flex-wrap: wrap; }

  /* Hero copy: parent fades in place while children cascade upward */
  .hero-copy[data-reveal="left"]{ transform:none; }
  .hero-copy > *{
    opacity:0;
    transform: translateY(16px);
    transition: opacity .55s var(--ease-out-strong), transform .55s var(--ease-out-strong);
  }
  .hero-copy.is-visible > *{ opacity:1; transform:none; }
  .hero-copy.is-visible > *:nth-child(1){ transition-delay:.1s; }
  .hero-copy.is-visible > *:nth-child(2){ transition-delay:.18s; }
  .hero-copy.is-visible > *:nth-child(3){ transition-delay:.26s; }
  .hero-copy.is-visible > *:nth-child(4){ transition-delay:.32s; }
  .hero-copy.is-visible > *:nth-child(5){ transition-delay:.38s; }
  @media (prefers-reduced-motion: reduce){
    .hero-copy > *{ opacity:1; transform:none; transition:none; }
  }

  .hero-phones{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding: 12px 0;
    perspective: 1200px;
  }
  .phone-3d-wrap{
    transform-style: preserve-3d;
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    transition: transform .45s var(--ease-out);
    will-change: transform;
  }
  /* Gentle idle float so the device never feels frozen */
  .iphone16{ animation: phoneFloat 7s ease-in-out infinite; }
  @keyframes phoneFloat{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
  }
  @media (prefers-reduced-motion: reduce){
    .iphone16{ animation:none; }
    .phone-3d-wrap{ transition:none; }
  }


  /* iPhone 16 style frame */
  .iphone16{
    position:relative;
    width: 243px;
    aspect-ratio: 9 / 19.5;
    background: linear-gradient(155deg, #4a4a4d 0%, #2c2c2e 12%, #1c1c1e 50%, #2c2c2e 88%, #4a4a4d 100%);
    border-radius: 52px;
    padding: 4px;
    box-shadow:
      0 50px 80px rgba(0,0,0,0.55),
      0 10px 30px rgba(0,0,0,0.4),
      inset 0 0 0 1px rgba(255,255,255,0.15);
    flex-shrink: 0;
  }
  .iphone16-inner{
    position:relative;
    width:100%;
    height:100%;
    background:#000;
    border-radius: 48px;
    overflow:hidden;
    padding: 3px;
  }
  .iphone16-screen{
    position:relative;
    width:100%;
    height:100%;
    border-radius: 46px;
    overflow:hidden;
    background:#000;
  }
  .iphone16-screen img{
    width:100%; height:100%;
    object-fit:cover;
    object-position: top center;
    display:block;
  }
  .screen-scan{
    position:absolute;
    left:0; right:0;
    height: 64px;
    top:-20%;
    background: linear-gradient(
      180deg,
      rgba(139,241,176,0) 0%,
      rgba(178,255,214,0.45) 50%,
      rgba(139,241,176,0) 100%
    );
    z-index: 2;
    pointer-events:none;
    animation: screenScanMove 4.2s ease-in-out infinite;
  }
  .screen-scan::before{
    content:'';
    position:absolute;
    left:0; right:0;
    top:50%;
    height:1.5px;
    background: rgba(214,255,232,0.85);
    box-shadow: 0 0 8px rgba(178,255,214,0.9);
  }
  @keyframes screenScanMove{
    0%{ top:-12%; }
    50%{ top:104%; }
    50.001%{ top:104%; }
    100%{ top:-12%; }
  }
  @media (prefers-reduced-motion: reduce){
    .screen-scan{ display:none; }
  }
  .iphone16-island{
    position:absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 24px;
    background: #000;
    border-radius: 16px;
    z-index: 3;
  }
  /* side controls */
  .iphone16-btn{
    position:absolute;
    background: linear-gradient(90deg, #1c1c1e, #3a3a3c, #1c1c1e);
    border-radius: 3px;
    z-index: 1;
  }
  .iphone16-btn.action{
    left: -3px;
    top: 16%;
    width: 4px;
    height: 26px;
  }
  .iphone16-btn.vol-up{
    left: -3px;
    top: 26%;
    width: 4px;
    height: 44px;
  }
  .iphone16-btn.vol-down{
    left: -3px;
    top: 36%;
    width: 4px;
    height: 44px;
  }
  .iphone16-btn.power{
    right: -3px;
    top: 26%;
    width: 4px;
    height: 56px;
  }
  .iphone16-btn.camera-control{
    right: -3px;
    top: 40%;
    width: 4px;
    height: 38px;
  }

  /* ============ PROBLEM SECTION (rebuilt) ============ */
  .problem{
    position:relative;
    height: clamp(420px, 52vw, 560px);
    width: 100%;
    overflow:hidden;
    color: var(--white);
  }
  .problem-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: 50% 0%;
    filter: saturate(0.85) brightness(0.85);
    z-index:0;
  }
  .problem-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(180deg,
        rgba(8,20,16,0.78) 0%,
        rgba(10,25,20,0.40) 32%,
        rgba(10,25,20,0.45) 65%,
        rgba(6,15,12,0.82) 100%);
  }
  .problem-content{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    padding: clamp(16px, 3vw, 40px);
  }
  .problem-head{
    text-align:center;
    max-width: 60%;
    margin: 0 auto;
  }
  .problem h2{
    font-size: clamp(16px, 3vw, 28px);
    font-weight: 800;
    line-height:1.2;
    letter-spacing:-0.3px;
    margin: 0 0 clamp(4px, 0.8vw, 8px);
  }
  .problem h2 .red-underline{
    display:inline-block;
    padding-bottom: 2px;
    border-bottom: 2.5px solid #FF8478;
  }
  .problem h2 .red{ color: #FF8478; }
  .problem-intro{
    font-size: 16px;
    color: rgba(255,255,255,0.78);
    margin: clamp(4px, 0.8vw, 10px) 0 0;
  }
  .problem-pills{
    position:relative;
    flex: 1;
    margin-top: clamp(6px, 1.5vw, 16px);
  }
  .problem-list{
    list-style:none;
    position:relative;
    width:100%;
    height:100%;
    z-index:1;
  }
  .problem-list li{
    position:absolute;
    display:inline-flex;
    align-items:center;
    gap: clamp(6px, 0.9vw, 10px);
    background: rgba(255,255,255,0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #0E1814;
    border-radius: 8px;
    padding: clamp(6px, 0.9vw, 10px) clamp(12px, 1.6vw, 18px) clamp(6px, 0.9vw, 10px) clamp(7px, 1vw, 11px);
    font-size: clamp(10px, 1.4vw, 15px);
    font-weight: 600;
    border: 1px solid rgba(229,57,43,0.6);
    box-shadow:
      0 4px 14px rgba(0,0,0,0.22),
      0 0 14px rgba(229,57,43,0.35),
      inset 0 0 0 1px rgba(255,255,255,0.25);
    animation: pillFloat 5s ease-in-out infinite;
  }
  .problem-list li:nth-child(2){ animation-duration: 4.4s; }
  .problem-list li:nth-child(3){ animation-duration: 5.6s; }
  .problem-list li:nth-child(4){ animation-duration: 4.8s; animation-delay: .4s; }
  .problem-list li:nth-child(5){ animation-duration: 5.2s; animation-delay: .2s; }
  @keyframes pillFloat{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
  }
  .problem-list .icon{
    width: clamp(19.5px, 2.65vw, 26.5px); height:clamp(19.5px, 2.65vw, 26.5px);
    border-radius: 6px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .problem-list .icon svg{ width:63%; height:63%; }
  .problem-pill-text{
    display:flex;
    align-items:center;
  }
  .problem-pill-question{
    font-weight: 600;
    color: #0E1814;
  }
  .problem-quote-wrap{
    text-align:center;
    margin-top: clamp(4px, 1vw, 12px);
    max-width: 55%;
    margin-left:auto;
    margin-right:auto;
  }
  .problem .rule{
    width: clamp(36px, 6vw, 64px); height: 2px;
    background: linear-gradient(90deg, transparent, var(--mint), transparent);
    margin: 0 auto clamp(6px, 1.2vw, 16px);
  }
  .problem-quote{
    font-style: italic;
    font-size: clamp(9px, 1.4vw, 15px);
    font-weight:500;
    color: var(--mint-bright);
    margin:0;
  }
  @media (prefers-reduced-motion: reduce){
    .problem-list li{ animation:none; }
  }
  @media (max-width: 720px){
    .problem{ height: auto; min-height: 600px; }
    .problem-head{ max-width: 90%; }
    .problem-quote-wrap{ max-width: 90%; }
    .problem-pills{ display:flex; align-items:center; justify-content:center; }
    .problem-list{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      width:100%;
      height:auto;
      gap: 16px;
    }
    .problem-list li{
      position:relative !important;
      top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
      font-size: 14px;
      padding: 10px 16px 10px 11px;
      gap: 9px;
    }
    .problem-list .icon{
      width: 28px; height:28px;
    }
  }

  /* ============ INTELLIGENT ASSISTANT ============ */
  .assistant{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(55% 60% at 80% 10%, rgba(31,169,124,0.14) 0%, transparent 65%),
      linear-gradient(160deg, var(--mint-soft-bg) 0%, #E9F4EF 55%, #fbfdfc 100%);
    background-size: 140% 140%, 100% 100%;
    background-position: 100% 0%, center;
    animation: assistantDrift 24s ease-in-out infinite;
    padding: 96px 0;
  }
  @keyframes assistantDrift{
    0%, 100%{ background-position: 100% 0%, center; }
    50%{ background-position: 70% 25%, center; }
  }
  .assistant-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
  }
  .assistant-particles .ap{
    position:absolute;
  }
  .assistant-particles .ap svg{ display:block; }
  .assistant-particles .ap.a1{ top:18%; animation: blowAcross1 12s linear infinite -2s; }
  .assistant-particles .ap.a2{ top:62%; animation: blowAcross2 9.5s linear infinite -7s; }
  .assistant-particles .ap.a3{ top:12%; animation: blowAcross1 14s linear infinite -10s; }
  .assistant-particles .ap.a4{ top:78%; animation: blowAcross2 10.5s linear infinite -3.5s; }
  .assistant-particles .ap.a5{ top:70%; animation: blowAcross1 13s linear infinite -5s; }
  .assistant-particles .ap.a6{ top:20%; animation: blowAcross2 11s linear infinite -8.5s; }
  .assistant-particles .ap.a7{ top:65%; animation: blowAcross1 10s linear infinite -1s; }
  .assistant-particles .ap.a8{ top:35%; animation: blowAcross2 13.5s linear infinite -11s; }
  .assistant-particles .ap.a1 svg{ width:20px; color:rgba(31,169,124,0.26); animation: spin1 2.4s linear infinite; }
  .assistant-particles .ap.a2 svg{ width:9px; color:rgba(31,169,124,0.18); filter:blur(0.6px); animation: spin2 1.8s linear infinite; }
  .assistant-particles .ap.a3 svg{ width:16px; color:rgba(31,169,124,0.22); filter:blur(0.4px); animation: spin1 2.8s linear infinite; }
  .assistant-particles .ap.a4 svg{ width:11px; color:rgba(31,169,124,0.18); filter:blur(0.8px); animation: spin2 2.1s linear infinite; }
  .assistant-particles .ap.a5 svg{ width:18px; color:rgba(31,169,124,0.2); animation: spin1 2.6s linear infinite; }
  .assistant-particles .ap.a6 svg{ width:13px; color:rgba(31,169,124,0.2); filter:blur(0.5px); animation: spin2 2.2s linear infinite; }
  .assistant-particles .ap.a7 svg{ width:10px; color:rgba(31,169,124,0.16); filter:blur(0.9px); animation: spin1 2s linear infinite; }
  .assistant-particles .ap.a8 svg{ width:15px; color:rgba(31,169,124,0.2); animation: spin2 2.7s linear infinite; }
  @media (prefers-reduced-motion: reduce){
    .assistant{ animation:none; }
    .assistant-particles{ display:none; }
  }
  .assistant-grid{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap: 70px;
    width: fit-content;
    margin: 0 auto;
  }
  .assistant-copy h2{
    font-size: 30px;
    font-weight: 800;
    line-height:1.25;
    margin-bottom: 22px;
    color: var(--ink);
  }
  .assistant-copy h2 .accent{ color: #1FA97C; }
  .assistant-copy p{
    font-size:16px;
    color: var(--ink-soft);
    margin-bottom: 16px;
    max-width: 460px;
  }
  .pill-row{ display:flex; gap:12px; margin-top: 26px; flex-wrap:wrap; }
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: rgba(255,255,255,0.7);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .pill:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
  .pill svg{ width:16px; height:16px; color:#1FA97C; }

  .assistant-card{
    border-radius: var(--radius-lg);
    overflow:hidden;
    box-shadow: 0 30px 60px rgba(4,40,36,0.25);
    animation: cardGlow 5s ease-in-out infinite;
    max-width: 277.7px;
    margin: 0 auto;
  }
  .assistant-card img{ width:100%; height:100%; object-fit:cover; display:block; }

  @keyframes cardGlow{
    0%, 100%{ box-shadow: 0 30px 60px rgba(4,40,36,0.25), 0 0 0 rgba(92,236,167,0); }
    50%{ box-shadow: 0 30px 60px rgba(4,40,36,0.25), 0 0 36px rgba(92,236,167,0.22); }
  }

  /* ============ FEATURE ROWS ============ */
  .features{
    position:relative;
    overflow:hidden;
    padding: 96px 0;
  }
  .features-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
  }
  .features-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(60% 70% at 50% 0%, rgba(92,236,167,0.16) 0%, transparent 60%),
      radial-gradient(80% 60% at 100% 100%, rgba(31,169,124,0.3) 0%, transparent 60%),
      linear-gradient(160deg, rgba(6,67,61,0.8) 0%, rgba(12,90,81,0.78) 55%, rgba(21,128,95,0.76) 100%);
    background-size: 150% 150%, 150% 150%, 100% 100%;
    background-position: 50% 0%, 100% 100%, center;
    animation: featuresDrift 26s ease-in-out infinite;
  }
  @keyframes featuresDrift{
    0%, 100%{ background-position: 50% 0%, 100% 100%, center; }
    50%{ background-position: 35% 20%, 80% 75%, center; }
  }
  @media (prefers-reduced-motion: reduce){
    .features-overlay{ animation:none; }
  }
  .features .wrap{ position:relative; z-index:3; }
  .features-head{
    position:relative;
    z-index:1;
    text-align:center;
    max-width: 700px;
    margin: 0 auto 0;
  }
  .features-head h2{
    font-size: 32px;
    font-weight: 800;
    line-height:1.3;
    color: var(--white);
  }
  .features-head h2 .accent{ color: var(--mint-bright); }
  .features-arrow{
    margin-top: 8px;
  }
  .features-arrow svg{
    width: 22px;
    height: 22px;
  }
  .features-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:2;
  }
  .features-particles .ap{
    position:absolute;
  }
  .features-particles .ap svg{ display:block; }
  .features-particles .ap.f1{ top:10%; animation: blowAcross1 12s linear infinite -2s; }
  .features-particles .ap.f2{ top:28%; animation: blowAcross2 9.5s linear infinite -7s; }
  .features-particles .ap.f3{ top:46%; animation: blowAcross1 14s linear infinite -10s; }
  .features-particles .ap.f4{ top:62%; animation: blowAcross2 10.5s linear infinite -3.5s; }
  .features-particles .ap.f5{ top:78%; animation: blowAcross1 13s linear infinite -5s; }
  .features-particles .ap.f6{ top:18%; animation: blowAcross2 11s linear infinite -8.5s; }
  .features-particles .ap.f7{ top:54%; animation: blowAcross1 10s linear infinite -1s; }
  .features-particles .ap.f8{ top:88%; animation: blowAcross2 13.5s linear infinite -11s; }
  .features-particles .ap.f9{ top:4%; animation: blowAcross1 11.5s linear infinite -4.2s; }
  .features-particles .ap.f10{ top:36%; animation: blowAcross2 12.5s linear infinite -6.1s; }
  .features-particles .ap.f11{ top:70%; animation: blowAcross1 9.5s linear infinite -8.8s; }
  .features-particles .ap.f12{ top:94%; animation: blowAcross2 14.5s linear infinite -2.6s; }
  .features-particles .ap.f13{ top:22%; animation: blowAcross1 13.5s linear infinite -9.4s; }
  .features-particles .ap.f14{ top:82%; animation: blowAcross2 10s linear infinite -1.3s; }
  .features-particles .ap.f1 svg{ width:20px; color:rgba(255,255,255,0.32); animation: spin1 2.4s linear infinite; }
  .features-particles .ap.f2 svg{ width:9px; color:rgba(139,241,176,0.4); filter:blur(0.6px); animation: spin2 1.8s linear infinite; }
  .features-particles .ap.f3 svg{ width:16px; color:rgba(255,255,255,0.28); filter:blur(0.4px); animation: spin1 2.8s linear infinite; }
  .features-particles .ap.f4 svg{ width:11px; color:rgba(139,241,176,0.36); filter:blur(0.8px); animation: spin2 2.1s linear infinite; }
  .features-particles .ap.f5 svg{ width:18px; color:rgba(255,255,255,0.3); animation: spin1 2.6s linear infinite; }
  .features-particles .ap.f6 svg{ width:13px; color:rgba(139,241,176,0.36); filter:blur(0.5px); animation: spin2 2.2s linear infinite; }
  .features-particles .ap.f7 svg{ width:10px; color:rgba(255,255,255,0.26); filter:blur(0.9px); animation: spin1 2s linear infinite; }
  .features-particles .ap.f8 svg{ width:15px; color:rgba(139,241,176,0.34); animation: spin2 2.7s linear infinite; }
  .features-particles .ap.f9 svg{ width:12px; color:rgba(255,255,255,0.3); filter:blur(0.5px); animation: spin1 2.3s linear infinite; }
  .features-particles .ap.f10 svg{ width:17px; color:rgba(139,241,176,0.38); animation: spin2 2.9s linear infinite; }
  .features-particles .ap.f11 svg{ width:9px; color:rgba(255,255,255,0.27); filter:blur(0.7px); animation: spin1 1.9s linear infinite; }
  .features-particles .ap.f12 svg{ width:19px; color:rgba(139,241,176,0.36); animation: spin2 2.5s linear infinite; }
  .features-particles .ap.f13 svg{ width:10px; color:rgba(255,255,255,0.28); filter:blur(0.8px); animation: spin1 2.1s linear infinite; }
  .features-particles .ap.f14 svg{ width:14px; color:rgba(139,241,176,0.32); filter:blur(0.4px); animation: spin2 2.6s linear infinite; }
  @media (prefers-reduced-motion: reduce){
    .features-particles{ display:none; }
  }
  .feature-row{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns: 250px 460px;
    grid-template-areas: "media copy" "media highlight";
    align-items:center;
    column-gap: 30px;
    row-gap: 0;
    padding: 30px 48px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 24px;
    background: rgba(4,57,52,0.55);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(139,241,176,0.12);
    transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .35s var(--ease-out);
  }
  @media (hover: hover){
    .feature-row:hover{
      transform: translateY(-4px);
      border-color: rgba(139,241,176,0.3);
      background-color: rgba(4,57,52,0.65);
      box-shadow: 0 18px 44px rgba(2,25,22,0.35);
    }
    .feature-row:hover .feature-icon{ transform: rotate(-6deg) scale(1.1); }
    .feature-row:hover .feature-media img{ transform: scale(1.03); }
  }
  @media (prefers-reduced-motion: reduce){
    .feature-row:hover,
    .feature-row:hover .feature-icon,
    .feature-row:hover .feature-media img{ transform:none; }
  }
  .feature-row:last-child{ margin-bottom: 0; }
  .feature-media{
    grid-area: media;
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    width: 203px;
    height: 203px;
    margin: 0 auto;
  }
  .feature-copy{
    grid-area: copy;
    align-self:end;
  }
  .feature-highlight{
    grid-area: highlight;
    align-self:start;
    margin:0;
  }

  .feature-title-row{
    display:flex;
    align-items:center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .feature-icon{
    width: 30px; height:30px;
    border-radius: 9px;
    background: linear-gradient(160deg, #1FA97C, #0a5a44);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    box-shadow: 0 8px 20px rgba(10,90,68,0.25);
    transition: transform .35s var(--ease-spring);
  }
  .feature-icon svg{ width:15px; height:15px; color:white; }

  .feature-copy h3{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--white);
  }
  .feature-copy p{
    font-size: 16px;
    color: rgba(255,255,255,0.78);
    margin-bottom: 14px;
    max-width: 420px;
  }
  .feature-row .highlight{
    font-style: italic;
    color: var(--mint-bright);
    font-weight:500;
  }

  .feature-media img{
    border-radius: var(--radius-md);
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 20px 50px rgba(20,60,45,0.15);
    transition: transform .5s var(--ease-out);
  }
  .feature-media.shadow-none img{ box-shadow:none; }

  /* ============ PHILOSOPHY ============ */
  .philosophy{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(60% 55% at 50% 0%, rgba(92,236,167,0.1) 0%, transparent 60%),
      linear-gradient(180deg, var(--deep-teal) 0%, var(--dark-green) 100%);
    color: var(--white);
    padding: 96px 0;
    text-align:center;
  }
  .philosophy .wrap{ position:relative; z-index:1; max-width: 720px; }
  .philosophy-eyebrow{
    background: rgba(92,236,167,0.12);
    border: 1px solid rgba(92,236,167,0.35);
    color: var(--mint-bright);
    margin-bottom: 24px;
  }
  .philosophy h2{
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin-bottom: 28px;
  }
  .philosophy h2 .accent{ color: var(--mint-bright); }
  .philosophy p{
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
    margin-bottom: 18px;
    text-align:left;
  }
  .philosophy-pillars{
    display:flex;
    flex-direction:column;
    gap: 12px;
    margin: 28px 0;
    text-align:left;
  }
  .philosophy-pillar{
    display:flex;
    gap: 16px;
    align-items:baseline;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(139,241,176,0.14);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    transition: border-color var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
  }
  .philosophy-pillar:hover{
    border-color: rgba(139,241,176,0.3);
    background: rgba(255,255,255,0.07);
  }
  .philosophy-pillar strong{
    color: var(--mint-bright);
    font-weight: 700;
    flex-shrink:0;
    width: 108px;
  }
  .philosophy-pillar span{
    color: rgba(255,255,255,0.78);
    font-size: 15px;
    line-height:1.6;
  }
  .philosophy-close{
    font-style: italic;
    color: var(--mint-bright);
    font-weight: 500;
    margin-top: 8px;
    text-align:center !important;
  }
  @media (max-width: 560px){
    .philosophy-pillar{ flex-direction:column; gap: 4px; }
    .philosophy-pillar strong{ width:auto; }
  }

  /* ============ FAQ ============ */
  .faq{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(55% 60% at 50% 0%, rgba(92,236,167,0.14) 0%, transparent 65%),
      linear-gradient(160deg, #eaf8f1 0%, #f5fbf8 55%, #ffffff 100%);
    color: var(--ink);
    padding: 96px 0;
  }
  .faq-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
  }
  .faq-particles .ap{ position:absolute; }
  .faq-particles .ap svg{ display:block; }
  .faq-particles .ap.q1{ top:14%; animation: blowAcross1 12s linear infinite -2s; }
  .faq-particles .ap.q2{ top:50%; animation: blowAcross2 9.5s linear infinite -7s; }
  .faq-particles .ap.q3{ top:34%; animation: blowAcross1 14s linear infinite -10s; }
  .faq-particles .ap.q4{ top:78%; animation: blowAcross2 10.5s linear infinite -3.5s; }
  .faq-particles .ap.q1 svg{ width:16px; color:rgba(10,90,68,0.28); animation: spin1 2.4s linear infinite; }
  .faq-particles .ap.q2 svg{ width:9px; color:rgba(10,90,68,0.2); filter:blur(0.6px); animation: spin2 1.8s linear infinite; }
  .faq-particles .ap.q3 svg{ width:13px; color:rgba(10,90,68,0.24); filter:blur(0.4px); animation: spin1 2.8s linear infinite; }
  .faq-particles .ap.q4 svg{ width:10px; color:rgba(10,90,68,0.22); filter:blur(0.7px); animation: spin2 2.1s linear infinite; }
  @media (prefers-reduced-motion: reduce){
    .faq-particles{ display:none; }
  }
  .faq .wrap{ position:relative; z-index:1; max-width: 760px; }
  .faq h2{
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 36px;
    color: var(--ink);
    text-align:center;
  }
  .faq h2 .accent{ color: #0a8f6e; }
  .faq-list{
    display:flex;
    flex-direction:column;
    gap: 12px;
  }
  .faq-item{
    background: rgba(10,90,68,0.04);
    border: 1px solid rgba(10,90,68,0.1);
    border-radius: var(--radius-md);
    overflow:hidden;
    transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
  }
  .faq-item:hover{ border-color: rgba(31,169,124,0.35); }
  .faq-item.is-open{ border-color: rgba(31,169,124,0.45); background-color: rgba(10,90,68,0.06); }
  .faq-question:focus-visible{ outline-offset:-3px; border-radius: var(--radius-md); }
  .faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
    padding: 18px 22px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }
  .faq-icon{
    width:20px; height:20px;
    flex-shrink:0;
    color: #0a8f6e;
    transition: transform 0.25s ease;
  }
  .faq-item.is-open .faq-icon{
    transform: rotate(180deg);
  }
  .faq-answer{
    max-height:0;
    overflow:hidden;
    transition: max-height 0.34s var(--ease-out);
  }
  .faq-answer p{
    opacity:0;
    transform: translateY(6px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .faq-item.is-open .faq-answer p{
    opacity:1;
    transform:none;
    transition-delay: .08s;
  }
  .faq-answer p{
    padding: 0 22px 20px;
    margin:0;
    font-size: 15px;
    line-height:1.6;
    color: var(--ink-soft);
  }

  /* ============ GALLERY ============ */
  .gallery{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(60% 70% at 50% 0%, rgba(92,236,167,0.16) 0%, transparent 60%),
      radial-gradient(80% 60% at 100% 100%, rgba(31,169,124,0.3) 0%, transparent 60%),
      linear-gradient(160deg, #06433d 0%, #0c5a51 55%, #15805f 100%);
    background-size: 150% 150%, 150% 150%, 100% 100%;
    background-position: 50% 0%, 100% 100%, center;
    animation: galleryDrift 26s ease-in-out infinite;
    padding: 96px 0;
    text-align:center;
  }
  @keyframes galleryDrift{
    0%, 100%{ background-position: 50% 0%, 100% 100%, center; }
    50%{ background-position: 35% 20%, 80% 75%, center; }
  }
  .gallery-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
  }
  .gallery-particles .ap{ position:absolute; }
  .gallery-particles .ap svg{ display:block; }
  .gallery-particles .ap.g1{ top:14%; animation: blowAcross1 12s linear infinite -2s; }
  .gallery-particles .ap.g2{ top:55%; animation: blowAcross2 9.5s linear infinite -7s; }
  .gallery-particles .ap.g3{ top:32%; animation: blowAcross1 14s linear infinite -10s; }
  .gallery-particles .ap.g4{ top:75%; animation: blowAcross2 10.5s linear infinite -3.5s; }
  .gallery-particles .ap.g1 svg{ width:18px; color:rgba(255,255,255,0.32); animation: spin1 2.4s linear infinite; }
  .gallery-particles .ap.g2 svg{ width:10px; color:rgba(139,241,176,0.4); filter:blur(0.6px); animation: spin2 1.8s linear infinite; }
  .gallery-particles .ap.g3 svg{ width:15px; color:rgba(255,255,255,0.28); filter:blur(0.4px); animation: spin1 2.8s linear infinite; }
  .gallery-particles .ap.g4 svg{ width:12px; color:rgba(139,241,176,0.36); filter:blur(0.7px); animation: spin2 2.1s linear infinite; }
  @media (prefers-reduced-motion: reduce){
    .gallery{ animation:none; }
    .gallery-particles{ display:none; }
  }
  .gallery .wrap{ position:relative; z-index:1; }

  /* ============ DONORS ============ */
  .donors{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(55% 60% at 50% 0%, rgba(92,236,167,0.14) 0%, transparent 65%),
      linear-gradient(160deg, #eaf8f1 0%, #f5fbf8 55%, #ffffff 100%);
    color: var(--ink);
    padding: 64px 0;
    text-align:center;
  }
  .donors-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
  }
  .donors-particles .ap{ position:absolute; }
  .donors-particles .ap svg{ display:block; }
  .donors-particles .ap.d1{ top:16%; animation: blowAcross1 12s linear infinite -2s; }
  .donors-particles .ap.d2{ top:55%; animation: blowAcross2 9.5s linear infinite -7s; }
  .donors-particles .ap.d3{ top:32%; animation: blowAcross1 14s linear infinite -10s; }
  .donors-particles .ap.d4{ top:75%; animation: blowAcross2 10.5s linear infinite -3.5s; }
  .donors-particles .ap.d1 svg{ width:16px; color:rgba(10,90,68,0.28); animation: spin1 2.4s linear infinite; }
  .donors-particles .ap.d2 svg{ width:9px; color:rgba(10,90,68,0.2); filter:blur(0.6px); animation: spin2 1.8s linear infinite; }
  .donors-particles .ap.d3 svg{ width:13px; color:rgba(10,90,68,0.24); filter:blur(0.4px); animation: spin1 2.8s linear infinite; }
  .donors-particles .ap.d4 svg{ width:10px; color:rgba(10,90,68,0.22); filter:blur(0.7px); animation: spin2 2.1s linear infinite; }
  @media (prefers-reduced-motion: reduce){
    .donors-particles{ display:none; }
  }
  .donors .wrap{ position:relative; z-index:1; }
  .donors h2{
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--ink);
  }
  .donors h2 .accent{ color: #0a8f6e; }
  .donors-sub{
    font-size: 13px;
    color: var(--ink-soft);
    max-width: 480px;
    margin: 0 auto 24px;
  }
  .donors-grid{
    display:flex;
    justify-content:center;
    gap: 34px;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 10px;
    max-width: 980px;
    margin: 0 auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(10,90,68,0.3) transparent;
  }
  .donors-grid::-webkit-scrollbar{ height:5px; }
  .donors-grid::-webkit-scrollbar-thumb{ background: rgba(10,90,68,0.3); border-radius:999px; }
  .donors-grid::-webkit-scrollbar-track{ background:transparent; }
  .donor-card{
    flex: 0 0 90px;
    width:90px;
  }
  .donor-logo{
    background: rgba(10,90,68,0.04);
    border: 1px solid rgba(10,90,68,0.1);
    border-radius: var(--radius-md);
    aspect-ratio: 1 / 1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
  }
  .donor-card:hover .donor-logo{
    background: rgba(10,90,68,0.07);
    border-color: rgba(31,169,124,0.4);
    transform: translateY(-3px);
  }
  .donor-logo img{
    max-width: 70%;
    max-height: 70%;
    width:auto;
    object-fit:contain;
    opacity:1;
    transition: opacity 0.25s;
  }
  @media (hover: hover){
    .donor-logo img{ opacity:0.85; }
    .donor-card:hover .donor-logo img{ opacity:1; }
  }

  @media (max-width: 980px){
    .donor-card{ flex: 0 0 80px; width:80px; }
    .donors-grid{ gap:24px; justify-content:flex-start; padding-left:24px; padding-right:24px; }
  }
  @media (max-width: 560px){
    .donor-card{ flex: 0 0 72px; width:72px; }
    .donors-grid{ gap:18px; padding-left:20px; padding-right:20px; }
  }

  .gallery h2{
    font-size: 34px;
    font-weight:800;
    color: var(--white);
    margin-bottom: 46px;
  }
  .gallery h2 .accent{
    color: var(--mint-bright);
  }
  .gallery-grid{
    display:flex;
    gap: 18px;
    overflow-x:auto;
    scroll-behavior:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,241,176,0.4) transparent;
  }
  .gallery-grid::-webkit-scrollbar{ height:6px; }
  .gallery-grid::-webkit-scrollbar-thumb{ background: rgba(139,241,176,0.4); border-radius:999px; }
  .gallery-grid::-webkit-scrollbar-track{ background:transparent; }
  .gallery-grid img{
    border-radius: var(--radius-md);
    flex: 0 0 calc((100% - 3 * 18px) / 3.3);
    width: calc((100% - 3 * 18px) / 3.3);
    height: 300px;
    object-fit:cover;
    box-shadow: 0 16px 40px rgba(20,60,45,0.15);
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  }
  @media (hover: hover){
    .gallery-grid img:hover{
      transform: translateY(-4px) scale(1.015);
      box-shadow: 0 22px 50px rgba(10,40,30,0.3);
    }
  }

  /* ============ CTA ============ */
  .cta{
    position:relative;
    padding: 128px 0;
    text-align:center;
    color:white;
    overflow:hidden;
  }
  .cta .bg-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
  }
  .cta .overlay{
    position:absolute; inset:0;
    background:
      radial-gradient(60% 80% at 50% 30%, rgba(20,90,68,0.25) 0%, transparent 65%),
      linear-gradient(180deg, rgba(2,35,32,0.92), rgba(3,45,41,0.8) 50%, rgba(2,35,32,0.92));
    background-size: 150% 150%, 100% 100%;
    background-position: 50% 30%, center;
    animation: ctaDrift 20s ease-in-out infinite;
    z-index:1;
  }
  @keyframes ctaDrift{
    0%, 100%{ background-position: 50% 30%, center; }
    50%{ background-position: 40% 50%, center; }
  }
  .cta-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
  }
  .cta-particles .ap{ position:absolute; }
  .cta-particles .ap svg{ display:block; }
  .cta-particles .ap.c1{ top:14%; animation: blowAcross1 12s linear infinite -2s; }
  .cta-particles .ap.c2{ top:58%; animation: blowAcross2 9.5s linear infinite -7s; }
  .cta-particles .ap.c3{ top:35%; animation: blowAcross1 14s linear infinite -10s; }
  .cta-particles .ap.c4{ top:78%; animation: blowAcross2 10.5s linear infinite -3.5s; }
  .cta-particles .ap.c5{ top:20%; animation: blowAcross1 13s linear infinite -5s; }
  .cta-particles .ap.c1 svg{ width:20px; color:rgba(255,255,255,0.36); animation: spin1 2.4s linear infinite; }
  .cta-particles .ap.c2 svg{ width:10px; color:rgba(139,241,176,0.46); filter:blur(0.6px); animation: spin2 1.8s linear infinite; }
  .cta-particles .ap.c3 svg{ width:16px; color:rgba(255,255,255,0.3); filter:blur(0.4px); animation: spin1 2.8s linear infinite; }
  .cta-particles .ap.c4 svg{ width:12px; color:rgba(139,241,176,0.4); filter:blur(0.8px); animation: spin2 2.1s linear infinite; }
  .cta-particles .ap.c5 svg{ width:18px; color:rgba(255,255,255,0.32); animation: spin1 2.6s linear infinite; }
  @media (prefers-reduced-motion: reduce){
    .cta-particles{ display:none; }
  }
  .cta .content{ position:relative; z-index:2; }
  .cta-eyebrow{
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--mint-bright);
    margin-bottom: 26px;
  }
  .cta h2{
    font-size: 42px;
    font-weight: 800;
    line-height:1.2;
    margin-bottom: 20px;
  }
  .cta h2 .accent{ color: var(--white); }
  .cta p{
    font-size: 17px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 34px;
  }
  /* Soft breathing glow draws the eye to the final download CTA.
     Animates only pseudo-element opacity — fully compositor-friendly. */
  .cta .btn-primary::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    box-shadow: 0 0 42px 6px rgba(92,236,167,0.4);
    opacity:0;
    z-index:-1;
    animation: ctaGlowPulse 3.8s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes ctaGlowPulse{
    0%, 100%{ opacity:.15; }
    50%{ opacity:.6; }
  }
  @media (prefers-reduced-motion: reduce){
    .cta .btn-primary::before{ animation:none; opacity:.2; }
  }

  /* ============ FOOTER ============ */
  footer{
    background: var(--dark-green);
    color: rgba(255,255,255,0.85);
    padding: 32px 0 16px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding-bottom: 40px;
    flex-wrap:wrap;
    gap: 24px;
  }
  .footer-brand{ display:flex; align-items:center; margin-bottom: 14px;}
  .footer-brand img{ height:26px; width:auto; }
  .footer-desc{ font-size:14px; color: rgba(255,255,255,0.55); max-width:320px; }
  .footer-contact{ text-align:right; }
  .footer-contact a{ font-size:14px; color: rgba(255,255,255,0.7); transition: color var(--dur-fast) var(--ease-out); }
  .footer-contact a:hover{ color: var(--mint-bright); }
  .social-row{ display:flex; gap:10px; margin-top:14px; justify-content:flex-end; }
  .social-row a{
    width:38px; height:38px;
    border-radius:10px;
    background: rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center;
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .social-row a:hover{ background: rgba(92,236,167,0.22); transform: translateY(-2px); }
  .social-row a:active{ transform: translateY(0); }
  .social-row svg{ width:17px; height:17px; color:white; }
  .footer-bottom{
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 22px;
    text-align:center;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
  }

  @media (prefers-reduced-motion: reduce){
    .hero, .assistant, .gallery, .cta .overlay, .assistant-card{
      animation: none !important;
    }
    .btn:hover, .btn:active,
    .pill:hover,
    .gallery-grid img:hover,
    .social-row a:hover,
    .donor-card:hover .donor-logo{
      transform: none !important;
    }
    .btn-primary::after{ display:none; }
    .faq-answer p{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* ============ SCROLL REVEAL ANIMATION ============ */
  [data-reveal]{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }
  [data-reveal="fade"]{ transform: none; }
  [data-reveal="left"]{ transform: translateX(-32px); }
  [data-reveal="right"]{ transform: translateX(32px); }
  [data-reveal="scale"]{ transform: scale(.94); }
  [data-reveal].is-visible{
    opacity: 1;
    transform: none;
  }
  .hero [data-reveal]{ transition-delay: calc(var(--reveal-delay, 0s) + .1s); }

  @media (prefers-reduced-motion: reduce){
    [data-reveal]{
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 980px){
    .wrap{ padding: 0 24px; }
    .features-overlay{ animation: none; background-position: 50% 0%, 100% 100%, center; }
    .hero-grid{
      grid-template-columns: 1fr;
    }
    .hero-grid{ gap: 8px; }
    .assistant-grid{
      flex-direction: column;
      width: 100%;
      max-width: 460px;
      gap: 24px;
    }
    .assistant-card{
      max-width: 277.7px;
    }
    .assistant-copy{
      text-align:center;
    }
    .assistant-copy p{
      margin-left:auto;
      margin-right:auto;
    }
    .pill-row{
      display:none;
    }
    .feature-row{
      display:grid;
      grid-template-columns: 1fr;
      grid-template-areas: "copy" "media" "highlight";
      width: 100%;
      max-width: 460px;
      padding: 36px 24px;
      row-gap: 16px;
      column-gap: 0;
    }
    .feature-copy{ width:100%; }
    .feature-media{ width:203px; height:203px; }
    .feature-copy, .feature-highlight{ align-self:auto; }
    .feature-icon{ display:none; }
    .feature-title-row{ justify-content:center; margin-bottom:6px; }
    .feature-copy{ text-align:center; }
    .feature-copy p{ margin-left:auto; margin-right:auto; margin-bottom:0; }
    .feature-highlight{ text-align:center; }
    .hero-copy h1{ font-size:40px; }
    .hero-copy{ text-align:center; }
    .hero-copy p{ margin-left:auto; margin-right:auto; }
    .hero-actions{ justify-content:center; }
    .problem h2{ font-size:28px; }
    .features-head h2{ font-size:24px; }
    /* Section spacing scale (mobile): 40 compact / 64 standard / 88 climactic */
    .assistant{ padding: 64px 0; }
    .philosophy{ padding: 64px 0; }
    .philosophy h2{ font-size:24px; }
    .features{ padding: 64px 0; }
    .faq{ padding: 64px 0; }
    .gallery{ padding: 64px 0; }
    .donors{ padding: 40px 0; }
    .cta{ padding: 88px 0; }
    .faq h2{ font-size:24px; margin-bottom:24px; }
    .faq-question{ padding: 15px 18px; font-size:15px; }
    .faq-answer p{ padding: 0 18px 16px; font-size:14px; }
    .footer-top{ flex-direction:column; }
    .footer-contact{ text-align:left; }
    .social-row{ justify-content:flex-start; }
    .gallery-grid img{ flex: 0 0 calc((100% - 18px) / 2.3); width: calc((100% - 18px) / 2.3); height:240px; }
    .nav .logo-lockup{ height:60px; position:static; transform:none; }
    .nav.scrolled .logo-lockup{ height:40px; }
    .nav-actions .btn{ padding:8px 12px; font-size:12px; }
    .nav.scrolled .nav-actions .btn{ padding:6px 10px; font-size:11px; }
    .nav-actions{ gap:8px; }
    .nav-inner{ justify-content: space-between; }
    .nav{ padding: 10px 0; }
    .nav-spacer{ height:80px; }
  }
  @media (max-width: 560px){
    .gallery-grid img{ flex: 0 0 78%; width:78%; height:220px; }
    .cta h2{ font-size:30px; }
    .nav .logo-lockup{ height:42px; }
    .nav.scrolled .logo-lockup{ height:32px; }
    .nav-actions .btn{ padding:7px 10px; font-size:11px; }
    .nav.scrolled .nav-actions .btn{ padding:5px 8px; font-size:10px; }
    .nav-inner{ padding: 0 16px; justify-content: space-between; }
    .nav{ padding: 8px 0; }
    .nav-spacer{ height:58px; }
  }