:root{
    --paper:#FFFFFF; --cloud:#F4F8FB; --mist:#EAF2F8; --frost:#E0ECF5;
    --sky:#349DD7; --sky-light:#5BB8E6; --sky-bright:#86D2F4; --sky-deep:#1F7FB8; --sky-dark:#15628F;
    --navy:#0E2A3F; --ink:#15293A; --ink-soft:#46606E; --ink-mute:#6E8492;
    --silver:#C9D7E2; --line:rgba(14,42,63,.10); --line-2:rgba(14,42,63,.055);
    --ease:cubic-bezier(.22,.72,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-io:cubic-bezier(.76,0,.24,1);
    --spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938,1.017,1.062 19.8%,1.071,1.07,1.054 24.7%,1.013 29.5%,.991 32.7%,.974,.972 38.4%,.98 44.9%,1.004 54.8%,1.012 62.4%,1.008 71.4%,.999 81.3%,1);
  }
  *{ -webkit-font-smoothing:antialiased; }
  html{ scroll-behavior:smooth; }
  body{ font-family:'Manrope',sans-serif; color:var(--ink); background:var(--cloud); overflow-x:hidden; }
  h1,h2,h3,h4,.font-display{ font-family:'Sora',sans-serif; letter-spacing:-.02em; }
  .em{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; }
  .kicker{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; }
  ::selection{ background:rgba(52,157,215,.22); color:#0E2A3F; }
  ::-webkit-scrollbar{ width:11px; } ::-webkit-scrollbar-track{ background:#EAF2F8; }
  ::-webkit-scrollbar-thumb{ background:#C9D7E2; border-radius:8px; border:3px solid #EAF2F8; }

  /* ===== pointer on every clickable ===== */
  a, button, select, summary, label[for], input[type="checkbox"],
  .ex, .ftab, .hdot, .faq-q, .seg button, [onclick], [role="button"]{ cursor:pointer; }

  #prog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:300; background:linear-gradient(90deg,var(--sky-light),var(--sky),var(--sky-deep)); }
  #cursor{ position:fixed; top:0; left:0; width:480px; height:480px; border-radius:50%; pointer-events:none; z-index:0; margin:-240px 0 0 -240px; transition:opacity .6s var(--ease); will-change:transform;
    background:radial-gradient(circle, rgba(52,157,215,.11), rgba(52,157,215,.04) 36%, transparent 62%); opacity:0; }

  /* light atmosphere */
  .blob{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }
  .blob-sky{ background:radial-gradient(circle, rgba(52,157,215,.20), transparent 66%); }
  .blob-bright{ background:radial-gradient(circle, rgba(134,210,244,.30), transparent 66%); }
  @keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(32px,26px) scale(1.08);} }
  .drift{ animation:drift 26s var(--ease) infinite; } .drift-r{ animation:drift 30s var(--ease) infinite reverse; }
  .techgrid{ position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(52,157,215,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(52,157,215,.055) 1px,transparent 1px);
    background-size:54px 54px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 25%,transparent 85%); mask-image:radial-gradient(120% 90% at 50% 0%,#000 25%,transparent 85%); }

  .frame{ border:1px solid var(--line); } .hair{ height:1px; background:var(--line); }
  .soft{ box-shadow:0 18px 50px -28px rgba(14,42,63,.28); }
  .soft-lg{ box-shadow:0 40px 90px -50px rgba(14,42,63,.4); }

  /* nav — sticky, no gap */
  #nav{ transition:background .4s var(--ease), box-shadow .4s, border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; }
  #nav.solid{ background:rgba(255,255,255,.82); backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid var(--line); box-shadow:0 8px 30px -22px rgba(14,42,63,.4); }
  .navlink{ position:relative; color:var(--ink); transition:color .3s var(--ease), transform .3s var(--ease); font-weight:600; }
  .navlink:hover{ color:var(--sky-deep); transform:translateY(-1px); }
  .navlink::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--sky),var(--sky-light)); transition:width .4s var(--ease); }
  .navlink:hover::after, .navlink.active::after{ width:100%; }
  .navlink.active{ color:var(--sky-deep); }

  /* ===== buttons — gradient shifts (reverses) on hover + shine + lift ===== */
  .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; border-radius:11px; overflow:hidden; cursor:pointer; border:none;
    transition:transform .5s var(--spring), box-shadow .45s var(--ease), background-position .7s var(--ease), border-color .4s, color .4s; }
  .btn:active{ transform:scale(.96); transition:transform .12s var(--ease); }
  .btn svg{ transition:transform .4s var(--ease); }
  .btn-sky{ color:#fff; background-image:linear-gradient(135deg,#15628F,#349DD7,#15628F); background-size:220% 100%; background-position:100% 0; box-shadow:0 16px 36px -16px rgba(31,127,184,.7); }
  .btn-sky:hover{ background-position:0 0; transform:translateY(-2px); box-shadow:0 26px 54px -18px rgba(31,127,184,.95); }
  .btn-sky:hover svg{ transform:translateX(3px); }
  .btn-sky::after{ content:""; position:absolute; top:0; left:-60%; width:36%; height:100%; transform:skewX(-20deg); pointer-events:none; background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent); transition:left .7s var(--ease); }
  .btn-sky:hover::after{ left:140%; }
  .btn-ghost{ background:#fff; border:1px solid var(--line); color:var(--navy); }
  .btn-ghost:hover{ border-color:var(--sky); color:var(--sky-dark); background:rgba(52,157,215,.06); transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(31,127,184,.55); }
  .btn-ghost:hover svg{ transform:translateX(3px); }
  .mag{ transition:transform .5s var(--spring); will-change:transform; }

  /* ===== reusable premium CARD (equal height + hover + cursor-follow light) ===== */
  .card{ position:relative; width:100%; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transform-style:preserve-3d; will-change:transform;
    transition:transform .24s var(--ease-out), box-shadow .5s var(--ease), border-color .45s, background .45s; }
  .card::before{ content:""; position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .45s; pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(52,157,215,.16), transparent 60%); }
  .card > *{ position:relative; z-index:1; }
  .card:hover{ transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px) scale(1.015); border-color:rgba(52,157,215,.5); box-shadow:0 38px 72px -34px rgba(31,127,184,.6), 0 0 0 1px rgba(52,157,215,.1); background:linear-gradient(180deg,#FFFFFF,#EFF8FE); z-index:6; }
  .card:hover::before{ opacity:1; }
  .card:hover h3{ color:var(--sky-dark); }
  .card-head{ display:flex; align-items:center; gap:.75rem; }
  .card h3{ transition:color .35s var(--ease); }
  .ico{ display:grid; place-items:center; border-radius:13px; background:linear-gradient(160deg,#EAF4FB,#D6EAF7); border:1px solid rgba(52,157,215,.18); flex-shrink:0; transition:transform .45s var(--ease), background .45s; }
  .card:hover .ico{ transform:translateY(-2px) rotate(-5deg); background:linear-gradient(160deg,#D6EAF7,#BFE2F6); }
  .ico svg{ transition:stroke .35s; }

  /* AI badge */
  .ai-badge{ position:absolute; top:1.1rem; right:1.1rem; z-index:2; font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:.18em; padding:3px 8px; border-radius:999px; background:rgba(52,157,215,.1); color:var(--sky-deep); border:1px solid rgba(52,157,215,.25); transition:background .35s, color .35s; }
  .card:hover .ai-badge{ background:var(--sky); color:#fff; }

  /* index rail — glassy, no white box */
  #rail{ position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:3px; }
  #rail a{ display:flex; align-items:center; gap:10px; padding:7px 11px 7px 8px; border-radius:999px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--ink-mute); transition:.3s var(--ease); }
  #rail a .dot{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--silver); background:rgba(255,255,255,.7); transition:.3s; flex-shrink:0; }
  #rail a .lbl{ max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .4s var(--ease), opacity .35s var(--ease); }
  #rail a:hover{ color:var(--sky-dark); background:rgba(52,157,215,.1); }
  #rail a:hover .dot{ border-color:var(--sky); }
  #rail a:hover .lbl{ max-width:140px; opacity:1; }
  #rail a.active{ background:rgba(52,157,215,.14); color:var(--sky-dark); box-shadow:inset 0 0 0 1px rgba(52,157,215,.28); }
  #rail a.active .dot{ background:var(--sky); border-color:var(--sky); box-shadow:0 0 0 4px rgba(52,157,215,.18); }
  #rail a.active .lbl{ max-width:140px; opacity:1; font-weight:700; }
  @media (max-width:1280px){ #rail{ display:none; } }

  /* ===== reveal — fade-up + blur removal ===== */
  .rv{ opacity:0; translate:0 30px; filter:blur(10px); transition:opacity 1s var(--ease-out), translate 1s var(--ease-out), filter 1s var(--ease-out); }
  .rv.in{ opacity:1; translate:0 0; filter:blur(0); }
  .card.rv{ transition:opacity 1s var(--ease-out), translate 1s var(--ease-out), filter 1s var(--ease-out), transform .24s var(--ease-out), box-shadow .5s var(--ease), border-color .45s, background .45s; }
  .d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.24s } .d4{ transition-delay:.32s } .d5{ transition-delay:.4s }

  /* ===== hero slider — equal height, fade + horizontal slide ===== */
  #hero{ position:relative; }
  #heroStage{ position:relative; min-height:clamp(540px,66vh,720px); touch-action:pan-y; }
  .slide{ position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(var(--sx,46px)) scale(.97); transition:opacity .65s var(--ease-out), transform .9s var(--ease-out), visibility .9s; display:flex; align-items:center; }
  .slide.on{ opacity:1; visibility:visible; pointer-events:auto; position:relative; transform:translateX(0) scale(1); }
  .slide .anim{ opacity:0; transform:translateY(26px); }
  .slide.on .anim{ animation:slideIn .85s var(--ease-out) forwards; }
  .slide.on .anim:nth-child(1){ animation-delay:.12s } .slide.on .anim:nth-child(2){ animation-delay:.24s }
  .slide.on .anim:nth-child(3){ animation-delay:.36s } .slide.on .anim:nth-child(4){ animation-delay:.48s } .slide.on .anim:nth-child(5){ animation-delay:.6s }
  @keyframes slideIn{ to{ opacity:1; transform:none; } }
  .hdot{ position:relative; width:30px; height:5px; border-radius:5px; background:var(--silver); transition:width .45s var(--ease-out), background .3s; border:none; }
  .hdot::after{ content:""; position:absolute; inset:-11px -3px; border-radius:9px; }
  .hdot .fill{ position:absolute; inset:0; border-radius:5px; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,var(--sky-dark),var(--sky-light)); }
  .hdot:hover{ background:#AEC8D8; }
  .hdot.on{ width:58px; background:rgba(52,157,215,.22); box-shadow:0 3px 12px -3px rgba(52,157,215,.6); }
  .hdot.on .fill{ animation:dotfill var(--dur,5.5s) linear forwards; }
  #hdots.paused .hdot.on .fill{ animation-play-state:paused; }
  @keyframes dotfill{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
  .harrow{ transition:transform .45s var(--spring), border-color .35s, box-shadow .35s, background .35s; }
  .harrow:hover{ border-color:var(--sky); box-shadow:0 0 0 5px rgba(52,157,215,.14); background:rgba(52,157,215,.07); transform:scale(1.09); }
  .harrow:active{ transform:scale(.93); }

  /* floating cards */
  @keyframes floaty{ 0%,100%{ translate:0 0;} 50%{ translate:0 -9px;} }
  .floaty{ animation:floaty 5.5s ease-in-out infinite; }
  .fl-2{ animation-delay:.7s } .fl-3{ animation-delay:1.4s } .fl-4{ animation-delay:2.1s }

  /* ===== orbit text (circular motion around objects) ===== */
  .orbit{ position:absolute; inset:-30px; pointer-events:none; animation:spin 20s linear infinite; }
  .orbit-2{ animation-duration:26s; animation-direction:reverse; }
  .orbit text{ font-family:'Space Mono',monospace; font-size:8.4px; letter-spacing:.34em; fill:var(--sky-deep); text-transform:uppercase; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* tabs / explorer */
  .ftab{ transition:.3s var(--ease); border:1px solid var(--line); color:var(--ink-soft); background:#fff; }
  .ftab:hover{ border-color:var(--sky); color:var(--sky-deep); transform:translateY(-1px); }
  .ftab.active{ background-image:linear-gradient(135deg,#15628F,#349DD7); color:#fff; border-color:transparent; box-shadow:0 12px 26px -16px rgba(31,127,184,.7); }
  .ex{ transition:.35s var(--ease); border-left:3px solid transparent; }
  .ex:hover{ background:rgba(52,157,215,.06); }
  .ex.active{ border-left-color:var(--sky); background:rgba(52,157,215,.08); }
  .ex.active .ex-t{ color:var(--sky-dark); }
  .ex .ex-t{ transition:color .3s; }
  #osPanel{ transition:opacity .25s, transform .25s; }

  /* marquee */
  .marq{ display:flex; width:max-content; animation:marq 42s linear infinite; }
  .marq:hover{ animation-play-state:paused; }
  @keyframes marq{ to{ transform:translateX(-50%); } }

  /* faq */
  .faq{ transition:border-color .35s, box-shadow .35s, background .35s; }
  .faq:hover{ border-color:rgba(52,157,215,.4); box-shadow:0 18px 44px -30px rgba(31,127,184,.5); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
  .faq.open{ border-color:rgba(52,157,215,.4); }
  .faq.open .faq-a{ max-height:300px; }
  .faq.open .faq-ic{ transform:rotate(45deg); background:var(--sky); color:#fff; border-color:var(--sky); }
  .faq-ic{ transition:transform .4s var(--ease), background .3s, color .3s; }
  .faq-q span:first-child{ transition:color .3s; }
  .faq:hover .faq-q span:first-child{ color:var(--sky-dark); }

  .tcard{ transition:opacity .6s var(--ease), transform .6s var(--ease); }

  /* form fields */
  .field label{ display:block; font-size:12px; font-weight:600; color:var(--navy); margin-bottom:7px; }
  .field-in{ position:relative; }
  .field-in input, .field-in select{ width:100%; background:#fff; border:1px solid var(--line); border-radius:11px; padding:.9rem 1rem; font-size:14.5px; color:var(--ink); transition:border-color .3s, box-shadow .3s; }
  .field-in input.pad{ padding-left:2.7rem; }
  .field-in input::placeholder{ color:#9fb0bd; }
  .field-in input:focus, .field-in select:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 4px rgba(52,157,215,.14); }
  .field-in > svg{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); stroke:var(--ink-mute); pointer-events:none; transition:stroke .3s; }
  .field-in input:focus ~ svg{ stroke:var(--sky-deep); }

  #toTop{ transition:opacity .4s, transform .4s; }

  @media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .rv{ opacity:1 !important; transform:none !important; translate:none !important; filter:none !important; }
    .slide .anim{ opacity:1 !important; transform:none !important; }
    .slide{ transition:none; } .orbit{ animation:none !important; }
    .card:hover{ transform:none !important; } .harrow:hover, .btn:hover{ transform:none !important; }
  }