/* ============================================================================
   Light theme.

   Loaded last; every rule below is scoped to [data-theme=light], so the dark
   theme is untouched by this file.

   Design note: this is deliberately not an inversion of the dark theme. A dark
   UI builds hierarchy from luminosity — glows, bright rims, forms emerging out
   of black. None of that survives on white. So the light theme builds hierarchy
   from elevation instead: layered shadows, hairline borders, and a much tighter
   hold on saturation. Colour is spent only where it carries meaning.
   ========================================================================== */

/* ---- Theme switcher (shares the language switcher's shape) ---- */
.theme-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #ffffff1f;border-radius:8px;background:#ffffff08;flex-shrink:0}
.theme-switch button{border:0;background:none;color:#9fadbd;font-size:13px;line-height:1;padding:6px 8px;border-radius:6px;transition:background .2s,color .2s;min-width:28px}
.theme-switch button:hover{color:#eaf4ff}
.theme-switch button[aria-pressed=true]{background:#ffffff14;color:#eaf4ff;box-shadow:inset 0 1px 0 #ffffff18}

/* ============================ TOKENS ====================================== */
:root[data-theme=light]{
  color-scheme:light;

  /* Surfaces. The page is pure white; hierarchy comes from shadow, not from
     progressively darker panels. --sunken is the one exception: a whisper of
     cool grey for wells that must read as *behind* the page. */
  --bg:#ffffff;
  --panel:#ffffff;
  --sunken:#f7f8fa;
  --sunken-deep:#f1f4f8;

  /* Hairlines. Cool near-black at low alpha reads as a true hairline at any
     zoom, where a flat grey (#e3e8ee) reads as a drawn line. */
  --line:rgba(15,23,42,.09);
  --line-strong:rgba(15,23,42,.15);
  --line-faint:rgba(15,23,42,.06);

  /* Type. Four steps, all AA or better on white. */
  --text:#0a0f1a;
  --text-2:#414c5e;
  --muted:#5b6675;
  --text-4:#68717f;

  /* Accent. The dark theme's #77bfff is unreadable on white, so the light
     theme runs a deeper azure and keeps tints below 10% alpha. */
  --accent:#0b5fd0;
  --accent-press:#0a4fae;
  --accent-tint:rgba(11,95,208,.07);
  --accent-tint-2:rgba(11,95,208,.12);
  --accent-ring:rgba(11,95,208,.22);

  --green:#0a7a5a;
  --green-tint:rgba(10,122,90,.09);
  --violet:#5b46a8;
  --violet-tint:rgba(91,70,168,.09);

  --ice:#0b5fd0;
  --blue:#0b5fd0;

  /* Elevation. Shadows are tinted toward cool navy — pure black shadows go
     muddy on white. Each level pairs a tight contact shadow with a broad
     ambient one, which is what makes the surface feel lit rather than outlined. */
  --e1:0 1px 2px rgba(16,32,64,.05);
  --e2:0 1px 2px rgba(16,32,64,.05),0 2px 6px rgba(16,32,64,.05);
  --e3:0 2px 4px rgba(16,32,64,.04),0 8px 20px rgba(16,32,64,.07);
  --e4:0 4px 10px rgba(16,32,64,.05),0 20px 44px rgba(16,32,64,.09);
  --e5:0 8px 22px rgba(16,32,64,.07),0 38px 80px rgba(16,32,64,.11);

  background:#ffffff;
  color:var(--text);
}

/* ============================ BASE ======================================== */
[data-theme=light] body{background:#ffffff}
[data-theme=light] ::selection{background:rgba(11,95,208,.16);color:var(--text)}
[data-theme=light] .skip{background:var(--text);color:#fff;box-shadow:var(--e4)}
[data-theme=light] a:focus-visible,[data-theme=light] button:focus-visible,[data-theme=light] summary:focus-visible{outline-color:var(--accent);outline-offset:4px}
/* The brand crop is screened onto the dark ground; on white it must sit as-is. */
[data-theme=light] .logo-mark{mix-blend-mode:normal}
[data-theme=light] .status-dot{background:var(--green);box-shadow:0 0 0 3px rgba(10,122,90,.12)}

/* ============================ HEADER ====================================== */
/* Frosted white rather than grey: high blur, high saturation, and a hairline
   that only appears where the glass meets content behind it. */
[data-theme=light] .header{
  border-color:rgba(15,23,42,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.68));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(16,32,64,.04),0 8px 28px rgba(16,32,64,.07);
}
[data-theme=light] .header.scrolled{
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(16,32,64,.05),0 10px 34px rgba(16,32,64,.10);
}
[data-theme=light] .header nav{color:var(--text-2)}
[data-theme=light] .header nav a:hover,[data-theme=light] .header nav a[aria-current=true]{color:var(--text)}
[data-theme=light] .header nav a:after{background:var(--accent)}
[data-theme=light] .menu-toggle{color:var(--text-2)}

/* ============================ BUTTONS ===================================== */
/* Secondary: white on white, held by a hairline and a contact shadow. */
[data-theme=light] .button{
  border-color:var(--line-strong);background:#fff;color:var(--text);
  box-shadow:inset 0 1px 0 #fff,var(--e1);
}
[data-theme=light] .button:hover{background:var(--sunken);border-color:rgba(15,23,42,.2);box-shadow:inset 0 1px 0 #fff,var(--e2)}

/* Primary: ink. The strongest possible contrast on white, and it keeps the
   page's one loud element loud. */
[data-theme=light] .primary,
[data-theme=light] .hero-actions .primary,
[data-theme=light] .header .small{
  color:#fff;
  background:linear-gradient(180deg,#2a3444,#0d1220);
  border:1px solid rgba(6,10,20,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(16,32,64,.16),0 6px 18px rgba(16,32,64,.16);
}
[data-theme=light] .primary:hover,
[data-theme=light] .hero-actions .primary:hover,
[data-theme=light] .header .small:hover{
  background:linear-gradient(180deg,#3a4557,#161c2c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 4px rgba(16,32,64,.16),0 10px 26px rgba(16,32,64,.2);
}
[data-theme=light] .primary:active,
[data-theme=light] .hero-actions .primary:active,
[data-theme=light] .header .small:active{
  background:#0d1220;box-shadow:inset 0 2px 4px rgba(0,0,0,.28);
}

/* ============================ HERO ======================================== */
[data-theme=light] .hero-art{background:#ffffff}
/* Fades the canvas into the page at both ends so the ribbons read as printed
   on the paper rather than pasted onto it. */
[data-theme=light] .hero-art-shade{
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 20%,rgba(255,255,255,0) 58%,#fff 100%),
             radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.34),transparent 62%);
}
/* Grain keeps a large white field from going plastic. Screen is invisible on
   white, so it flips to multiply and drops to a whisper. */
[data-theme=light] .hero-grain{mix-blend-mode:multiply;opacity:.035}
/* A glow means nothing on white, so it becomes a soft two-hue wash instead. */
[data-theme=light] .hero-glow{
  background:radial-gradient(ellipse at 50% 62%,rgba(11,95,208,.10),transparent 55%),
             radial-gradient(ellipse at 22% 42%,rgba(91,70,168,.06),transparent 52%),
             radial-gradient(ellipse at 80% 52%,rgba(10,122,90,.05),transparent 50%);
}
[data-theme=light] .hero .intro-pill{
  background:rgba(255,255,255,.78);border-color:var(--line-strong);color:var(--text-2);
  box-shadow:inset 0 1px 0 #fff,var(--e2);
}
[data-theme=light] .intro-pill>span:last-child{color:var(--text-4)}
/* Dark-on-light reads optically lighter than light-on-dark, so the display
   weight comes up a step to match the dark theme's presence. */
[data-theme=light] .hero h1{color:#05080f;text-shadow:none;font-weight:600}
[data-theme=light] .hero>p{color:var(--text-2);text-shadow:none}
[data-theme=light] .hero .text-link{color:var(--text)}
[data-theme=light] .text-link:hover{color:var(--accent)}
[data-theme=light] .hero-note{color:var(--text-4)}

/* ============================ WORKSPACE PREVIEW =========================== */
/* The product shot: the most elevated object on the page. */
[data-theme=light] .workspace{
  background:#fff;border-color:var(--line);
  box-shadow:0 0 0 1px rgba(16,32,64,.02),var(--e5);
}
[data-theme=light] .workspace.demo-done{
  box-shadow:0 0 0 1px var(--accent-ring),0 8px 22px rgba(16,32,64,.07),0 38px 80px rgba(11,95,208,.16);
}
[data-theme=light] .window-bar{background:var(--sunken);border-bottom-color:var(--line);color:var(--text-4)}
[data-theme=light] .window-dots i{background:#d3d8e0}
[data-theme=light] .workspace-sidebar{border-right-color:var(--line);color:var(--muted);background:var(--sunken)}
[dir=rtl][data-theme=light] .workspace-sidebar{border-left-color:var(--line);border-right:0}
[data-theme=light] .demo-brand{color:var(--text)}
[data-theme=light] .workspace-sidebar .side-active{color:var(--accent);background:#fff;border-color:var(--line);box-shadow:var(--e1)}
[data-theme=light] .dashboard-stats>div{border-color:var(--line);background:var(--sunken)}
[data-theme=light] .dashboard-stats>div>span{color:var(--muted)}
[data-theme=light] .dashboard-stats strong{color:var(--text)}
[data-theme=light] .dashboard-stats strong small{color:var(--green)}
[data-theme=light] .avatar{background:var(--text);color:#fff}
[data-theme=light] .activity-head{color:var(--muted)}
[data-theme=light] .live i{background:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
[data-theme=light] .activity-row{border-bottom-color:var(--line-faint)}
[data-theme=light] .activity-row b{color:var(--text)}
[data-theme=light] .activity-row small{color:var(--text-4)}
[data-theme=light] .purple{color:var(--violet);background:var(--violet-tint)}
[data-theme=light] .blue{color:var(--accent);background:var(--accent-tint)}
[data-theme=light] .green{color:var(--green);background:var(--green-tint)}
[data-theme=light] .demo-done .activity-icon{background:var(--green-tint);color:var(--green)}
[data-theme=light] .badge{color:var(--green);background:var(--green-tint);border-color:transparent}
[data-theme=light] .demo-done .badge{color:var(--green)}
[data-theme=light] .demo-command{background:var(--sunken);border-top-color:var(--line);color:var(--text-2)}
[data-theme=light] .demo-command:hover{background:var(--sunken-deep)}
[data-theme=light] .command-key{background:#fff;border-color:var(--line);box-shadow:var(--e1);color:var(--muted)}
[data-theme=light] .sparkle{color:var(--accent)}
[data-theme=light] .sun{color:#c08a1e}
/* Floating callouts read as cards lifted off the mockup. */
[data-theme=light] .float-label{
  background:rgba(255,255,255,.92);border-color:var(--line);color:var(--text);
  box-shadow:var(--e4);backdrop-filter:blur(12px) saturate(160%);
}
[data-theme=light] .float-label small{color:var(--muted)}
[data-theme=light] .mini-icon{color:var(--accent)}
[data-theme=light] .check-circle{border-color:transparent;background:var(--green-tint);color:var(--green)}
[data-theme=light] .capabilities>span{color:var(--text-4)}
[data-theme=light] .capabilities>div{color:var(--text-2)}

/* ============================ SOLUTION CARDS ============================== */
[data-theme=light] .solution-card{background:#fff;border-color:var(--line);box-shadow:var(--e2)}
[data-theme=light] .solution-card:hover{border-color:var(--line-strong);box-shadow:var(--e4)}
[data-theme=light] .solution-card:before{
  background:radial-gradient(350px circle at var(--pointer-x,50%) var(--pointer-y,0%),rgba(11,95,208,.06),transparent 70%);
}
[data-theme=light] .card-art{border-bottom-color:var(--line)}
/* Three washes at one value, so the row reads as a set rather than three
   unrelated illustrations. */
[data-theme=light] .website-art{background:radial-gradient(ellipse at 60% 92%,rgba(11,95,208,.16),transparent 68%),#f2f6fc}
[data-theme=light] .app-art{background:radial-gradient(ellipse at 55% 92%,rgba(91,70,168,.15),transparent 74%),#f5f3fb}
[data-theme=light] .automation-art{background:radial-gradient(ellipse at 50% 92%,rgba(10,122,90,.14),transparent 74%),#f0f7f5}
[data-theme=light] .mini-browser{border-color:rgba(15,23,42,.12);box-shadow:var(--e4)}
[data-theme=light] .phone{box-shadow:var(--e5)}
[data-theme=light] .app-float{background:#fff;border-color:var(--line);color:var(--text);box-shadow:var(--e3)}
[data-theme=light] .service-icon{color:var(--accent)}
[data-theme=light] .card-copy h3{color:var(--text)}
[data-theme=light] .card-copy p{color:var(--muted)}
[data-theme=light] .card-copy a{color:var(--text)}
[data-theme=light] .card-copy a:hover{color:var(--accent)}
[data-theme=light] .flow-node,[data-theme=light] .flow-center{background:#fff;border-color:var(--line);color:var(--text-2);box-shadow:var(--e2)}
[data-theme=light] .flow-center{box-shadow:var(--e3)}
[data-theme=light] .flow-node b{color:var(--green)}
[data-theme=light] .flow-center b{color:var(--accent)}
[data-theme=light] .flow-line{background:linear-gradient(rgba(15,23,42,.22),rgba(15,23,42,.06))}
[data-theme=light] .flow-branches{color:var(--green)}
[data-theme=light] .flow-branches span{background:#fff;border-color:var(--line);box-shadow:var(--e1)}

/* ============================ APPROACH ==================================== */
[data-theme=light] .step{color:var(--accent)}
[data-theme=light] .step:after{background:linear-gradient(90deg,rgba(15,23,42,.16),rgba(15,23,42,.02))}
[dir=rtl][data-theme=light] .step:after{background:linear-gradient(270deg,rgba(15,23,42,.16),rgba(15,23,42,.02))}
[data-theme=light] .process h3{color:var(--text)}
[data-theme=light] .process p{color:var(--muted)}

/* ============================ WHY ========================================= */
[data-theme=light] .why{border-top-color:var(--line)}
[data-theme=light] .why-symbol{background:radial-gradient(ellipse,rgba(11,95,208,.10),transparent 62%)}
[data-theme=light] .why-symbol .orbit{border-color:rgba(11,95,208,.16)}
[data-theme=light] .why-symbol .orbit-two{border-color:rgba(11,95,208,.10)}
[data-theme=light] .why-symbol>.logo-mark{filter:none;box-shadow:var(--e5)}
[data-theme=light] .orbit-point{background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
[data-theme=light] .why li>span{border-color:transparent;background:var(--accent-tint);color:var(--accent)}
[data-theme=light] .why li h3{color:var(--text)}

/* ============================ CONTACT ===================================== */
[data-theme=light] .contact{
  border-color:var(--line);
  background:radial-gradient(ellipse at 0 0,rgba(11,95,208,.06),transparent 58%),#fff;
  box-shadow:var(--e4);
}
[data-theme=light] .contact:before{background:linear-gradient(90deg,transparent,var(--accent-ring),transparent)}
[data-theme=light] .contact-kicker{color:var(--text-2)}
[data-theme=light] .contact h2{color:var(--text)}
[data-theme=light] .contact-reassurance>span{color:var(--accent)}
[data-theme=light] .contact-reassurance p{color:var(--muted)}
[data-theme=light] .contact-reassurance strong{color:var(--text)}
[data-theme=light] form label{color:var(--text-2)}
/* Inputs sit slightly recessed, which is the light-mode equivalent of the dark
   theme's inset well. */
[data-theme=light] input,[data-theme=light] textarea,[data-theme=light] select{
  background:var(--sunken);border-color:var(--line-strong);color:var(--text);
  box-shadow:inset 0 1px 2px rgba(16,32,64,.04);
}
[data-theme=light] input:focus,[data-theme=light] textarea:focus,[data-theme=light] select:focus{
  background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);
}
[data-theme=light] input::placeholder,[data-theme=light] textarea::placeholder{color:var(--text-4)}
[data-theme=light] .optional{color:var(--text-4)}
[data-theme=light] .consent{color:var(--muted)!important}
[data-theme=light] .consent input{accent-color:var(--accent)}
[data-theme=light] .form-footnote{color:var(--text-4)}
[data-theme=light] .form-status{color:var(--green)}
[data-theme=light] .form-status.error{color:#b3261e}

/* ============================ FAQ + FOOTER ================================ */
[data-theme=light] details{border-bottom-color:var(--line)}
[data-theme=light] summary{color:var(--text)}
[data-theme=light] summary>span{color:var(--text-4)}
[data-theme=light] details p{color:var(--muted)}
[data-theme=light] footer{border-top-color:var(--line)}
[data-theme=light] footer p{color:var(--muted)}
[data-theme=light] footer>span{color:var(--text-4)}

/* ============================ SWITCH CHROME ============================== */
[data-theme=light] .lang-switch,[data-theme=light] .theme-switch{
  border-color:var(--line);background:var(--sunken);box-shadow:inset 0 1px 1px rgba(16,32,64,.03);
}
[data-theme=light] .lang-switch button,[data-theme=light] .theme-switch button{color:var(--muted)}
[data-theme=light] .lang-switch button:hover,[data-theme=light] .theme-switch button:hover{color:var(--text)}
[data-theme=light] .lang-switch button[aria-pressed=true],[data-theme=light] .theme-switch button[aria-pressed=true]{
  background:#fff;color:var(--text);box-shadow:var(--e1),inset 0 1px 0 #fff;
}

/* ============================ RESPONSIVE ================================== */
/* The header now carries two switches; buy the width back on small screens. */
@media(max-width:700px){
  .header{gap:8px}
  .lang-switch,.theme-switch{padding:2px}
  .lang-switch button{padding:5px 6px;min-width:24px;font-size:10px}
  .theme-switch button{padding:5px 6px;min-width:24px;font-size:12px}
  [data-theme=light] .header nav{
    background:rgba(255,255,255,.94);border-color:var(--line);box-shadow:var(--e5);
    backdrop-filter:blur(20px) saturate(180%);
  }
}
@media(max-width:560px){
  /* Keep the mark, drop the wordmark, so the CTA and both switches still fit. */
  .header .brand span:last-child{display:none}
}