/* ==========================================================================
   Pragnya IT Solutions — styles.css
   1. Tokens  2. Reset/base  3. Layout  4. Components
   5. Sections  6. Responsive  7. A11y / reduced-motion
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* palette */
  --navy-900:#0B1437;
  --navy-800:#111C44;
  --indigo-700:#2A2F6B;
  --accent:#17E0C4;
  --accent-2:#2F6BFF;
  --on-dark:#E8ECF8;
  --on-dark-muted:#A7B0CC;

  /* Semantic theme tokens — DEFAULT = LIGHT. Dark overrides live under
     :root[data-theme="dark"]. The light sections (framework / why-us /
     testimonials) read from these so a theme switch actually repaints them. */
  --ink-900:#0C1322;        /* primary text on light surfaces */
  --ink-600:#475069;        /* muted text on light surfaces */
  --surface-0:#FFFFFF;      /* card base */
  --surface-50:#F5F7FB;     /* light section background */
  --line:#E3E8F2;

  /* Feature-section tokens (hero + "dark" sections). LIGHT (day) theme values. */
  --feature-bg:linear-gradient(135deg,#EEF3FF,#E3ECFF);
  --feature-text:#374163;
  --feature-heading:#0C1322;
  --feature-muted:#58618A;
  --feature-card-bg:#FFFFFF;
  --feature-card-line:#DCE4F5;
  --feature-field-bg:#FFFFFF;
  --feature-field-line:#CBD5EC;
  --feature-field-text:#0C1322;
  /* Hero backdrop (light = day sky). */
  --hero-bg:linear-gradient(135deg,#DCE7FF,#C9D8FF 60%,#BFE9FF);
  --hero-text:#0C1322;
  --hero-muted:#41507A;
  --header-bg:rgba(255,255,255,0.92);

  /* type */
  --font-display:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-hero:clamp(2.5rem, 6vw, 4.5rem);
  --fs-h2:clamp(1.9rem, 3.5vw, 2.75rem);
  --fs-h3:clamp(1.2rem, 2vw, 1.5rem);
  --fs-lead:clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:1rem;
  --fs-small:0.875rem;
  --fs-count:clamp(2.5rem, 5vw, 3.75rem);

  /* layout */
  --container:1160px;
  --radius:16px;
  --radius-sm:10px;
  --header-h:72px;
  --grad-dark:linear-gradient(135deg, var(--navy-900), var(--indigo-700));
  --grad-accent:linear-gradient(90deg, var(--accent), var(--accent-2));
  --shadow:0 10px 30px rgba(11,20,55,0.12);
  --shadow-dark:0 10px 30px rgba(0,0,0,0.35);
}

/* 2. RESET / BASE ---------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink-900);
  background:var(--surface-0);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--font-display); line-height:1.1; font-weight:700; }
a { color:var(--accent-2); text-decoration:none; }
a:hover { text-decoration:underline; }
img,svg { display:block; max-width:100%; }
ul { list-style:none; padding:0; }

/* 3. LAYOUT ---------------------------------------------------------------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.25rem; }
.section { padding-block:clamp(3.5rem, 7vw, 6rem); }
/* Feature (formerly "dark") sections are theme-aware so the day/night toggle
   visibly repaints them: navy in dark mode, light panel in light mode. */
.section--dark { background:var(--feature-bg); color:var(--feature-text); }
.section--dark h1,.section--dark h2,.section--dark h3 { color:var(--feature-heading); }
.section__head { max-width:760px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.section__head h2 { font-size:var(--fs-h2); }
.section__lead { font-size:var(--fs-lead); color:var(--ink-600); margin-top:0.75rem; }
.section--dark .section__lead { color:var(--feature-muted); }
.eyebrow {
  text-transform:uppercase; letter-spacing:0.14em; font-size:var(--fs-small);
  font-weight:600; color:var(--accent-2); margin-bottom:0.6rem;
}
.section--dark .eyebrow { color:var(--accent); }
.muted { color:var(--ink-600); font-weight:400; }
.section--dark .muted,.testimonials .muted { color:var(--feature-muted); }

/* 4. COMPONENTS ------------------------------------------------------------ */

/* skip link */
.skip-link {
  position:absolute; left:1rem; top:-3rem; z-index:1100;
  background:var(--accent-2); color:#fff; padding:0.6rem 1rem;
  border-radius:var(--radius-sm); transition:top .2s ease;
}
.skip-link:focus { top:1rem; }

.visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0.75rem 1.5rem; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-body);
  cursor:pointer; border:2px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-decoration:none;
}
.btn:hover { text-decoration:none; transform:translateY(-2px); }
.btn--primary { background:var(--grad-accent); color:#06121f; box-shadow:0 8px 20px rgba(47,107,255,0.3); }
.btn--ghost { background:transparent; color:var(--hero-text); border-color:currentColor; opacity:0.9; }
.btn--ghost:hover { border-color:var(--accent-2); color:var(--accent-2); opacity:1; }
:root[data-theme="dark"] .btn--ghost:hover { border-color:var(--accent); color:var(--accent); }

/* header + nav */
.site-header {
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--header-h);
  display:flex; align-items:center; transition:background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { background:var(--header-bg); box-shadow:var(--shadow); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo { font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--hero-text); }
.logo:hover { text-decoration:none; }
.logo__accent { color:var(--accent-2); }
:root[data-theme="dark"] .logo__accent { color:var(--accent); }

.nav__links { display:flex; align-items:center; gap:1.5rem; }
.nav__links ul { display:flex; gap:1.4rem; }
.nav__links a { color:var(--hero-text); font-weight:500; opacity:0.92; }
.nav__links a:hover { color:var(--accent-2); text-decoration:none; opacity:1; }
:root[data-theme="dark"] .nav__links a:hover { color:var(--accent); }
.nav__cta { color:#06121f; }
.nav__cta:hover { color:#06121f; }

.nav__toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; background:transparent; border:0; cursor:pointer; padding:10px;
}
.nav__toggle-bar { display:block; height:2px; width:100%; background:var(--hero-text); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity:0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* cards shared */
.framework-step,.service-card,.stat-card,.testimonial-card {
  border-radius:var(--radius); padding:1.75rem; height:100%;
}

/* 5. SECTIONS -------------------------------------------------------------- */

/* hero */
.hero {
  background:var(--hero-bg); color:var(--hero-text);
  padding-top:calc(var(--header-h) + 3rem); padding-bottom:clamp(3.5rem,7vw,6rem);
  position:relative; overflow:hidden;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 80% 10%, rgba(47,107,255,0.35), transparent 70%);
  pointer-events:none;
}
.hero__inner { position:relative; display:grid; gap:2.5rem; align-items:center; }
.hero__title { font-size:var(--fs-hero); color:var(--hero-text); margin-bottom:1rem; }
.hero__lead { font-size:var(--fs-lead); color:var(--hero-muted); max-width:40ch; }
.hero__actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.hero__visual { justify-self:center; width:min(420px,80vw); position:relative; aspect-ratio:1; }
.hero__visual svg { width:100%; height:auto; position:relative; z-index:2; }

/* Day / night sky scenes stack inside the hero visual. */
.sky { position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:1; }
/* Default (light/day) = show the sun scene, hide the night scene + orbital planets. */
.sky--day { display:block; }
.sky--night { display:none; }
.hero__visual .orbit-ring,.hero__visual .orbit-core-glow,.hero__visual .orbit-nucleus { opacity:0; transition:opacity .4s ease; }
/* Dark/night mode = hide the sun, show stars + orbital planets. */
:root[data-theme="dark"] .sky--day { display:none; }
:root[data-theme="dark"] .sky--night { display:block; }
:root[data-theme="dark"] .hero__visual .orbit-ring,
:root[data-theme="dark"] .hero__visual .orbit-core-glow,
:root[data-theme="dark"] .hero__visual .orbit-nucleus { opacity:1; }
/* The small accent dots read as stars, so keep them only at night. */
.hero__visual .orbit-dot { opacity:0; }
:root[data-theme="dark"] .hero__visual .orbit-dot { opacity:1; }

/* ---- DAY: sun ---- */
.sun { position:absolute; top:50%; left:50%; width:46%; height:46%; transform:translate(-50%,-50%); }
.sun__core {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FFE89A, #FFB03A 55%, #FF8A1E);
  box-shadow:0 0 40px rgba(255,170,40,0.6), 0 0 90px rgba(255,150,20,0.35);
}
.sun__glow {
  position:absolute; inset:-30%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,196,80,0.35), transparent 60%);
  animation:sunPulse 4s ease-in-out infinite;
}
.sun__rays {
  position:absolute; inset:-38%; border-radius:50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,186,64,0.0) 0deg, rgba(255,186,64,0.55) 6deg, rgba(255,186,64,0.0) 12deg,
      rgba(255,186,64,0.0) 30deg, rgba(255,186,64,0.55) 36deg, rgba(255,186,64,0.0) 42deg,
      rgba(255,186,64,0.0) 60deg, rgba(255,186,64,0.55) 66deg, rgba(255,186,64,0.0) 72deg,
      rgba(255,186,64,0.0) 90deg, rgba(255,186,64,0.55) 96deg, rgba(255,186,64,0.0) 102deg,
      rgba(255,186,64,0.0) 120deg, rgba(255,186,64,0.55) 126deg, rgba(255,186,64,0.0) 132deg,
      rgba(255,186,64,0.0) 150deg, rgba(255,186,64,0.55) 156deg, rgba(255,186,64,0.0) 162deg,
      rgba(255,186,64,0.0) 180deg, rgba(255,186,64,0.55) 186deg, rgba(255,186,64,0.0) 192deg,
      rgba(255,186,64,0.0) 210deg, rgba(255,186,64,0.55) 216deg, rgba(255,186,64,0.0) 222deg,
      rgba(255,186,64,0.0) 240deg, rgba(255,186,64,0.55) 246deg, rgba(255,186,64,0.0) 252deg,
      rgba(255,186,64,0.0) 270deg, rgba(255,186,64,0.55) 276deg, rgba(255,186,64,0.0) 282deg,
      rgba(255,186,64,0.0) 300deg, rgba(255,186,64,0.55) 306deg, rgba(255,186,64,0.0) 312deg,
      rgba(255,186,64,0.0) 330deg, rgba(255,186,64,0.55) 336deg, rgba(255,186,64,0.0) 342deg);
  -webkit-mask:radial-gradient(circle, transparent 46%, #000 47%);
  mask:radial-gradient(circle, transparent 46%, #000 47%);
  animation:raySpin 40s linear infinite;
}
@keyframes sunPulse { 0%,100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.08); opacity:1; } }
@keyframes raySpin { to { transform:rotate(360deg); } }

/* ---- NIGHT: stars ---- */
.star {
  position:absolute; width:var(--s,2px); height:var(--s,2px); border-radius:50%;
  background:#fff; box-shadow:0 0 6px rgba(255,255,255,0.8);
  animation:twinkle 2.6s ease-in-out infinite; animation-delay:var(--d,0s);
}
@keyframes twinkle { 0%,100% { opacity:.25; transform:scale(.8); } 50% { opacity:1; transform:scale(1.2); } }
.shooting-star {
  position:absolute; top:18%; left:-10%; width:70px; height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0), #fff); border-radius:2px;
  filter:drop-shadow(0 0 4px #fff); opacity:0;
  animation:shoot 7s ease-in infinite;
}
@keyframes shoot {
  0% { transform:translate(0,0) rotate(18deg); opacity:0; }
  6% { opacity:1; }
  16% { transform:translate(340%,120%) rotate(18deg); opacity:0; }
  100% { opacity:0; }
}

/* framework */
.framework-grid { display:grid; gap:1.5rem; }
.framework-step { background:var(--surface-50); border:1px solid var(--line); box-shadow:var(--shadow); }
.step-icon,.service-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px; margin-bottom:1rem;
  background:var(--grad-accent); color:#06121f;
}
.step-icon svg,.service-icon svg { width:26px; height:26px; }
.framework-step h3,.service-card h3 { font-size:var(--fs-h3); margin-bottom:0.5rem; }
.framework-step p { color:var(--ink-600); }

/* services (feature section) */
.services-grid { display:grid; gap:1.5rem; }
.service-card {
  background:var(--feature-card-bg); border:1px solid var(--feature-card-line);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.service-card:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 16px 40px rgba(23,224,196,0.18); }
.service-icon { background:rgba(23,224,196,0.14); color:var(--accent-2); }
:root[data-theme="dark"] .service-icon { color:var(--accent); }
.service-card h3 { color:var(--feature-heading); }
.service-card p { color:var(--feature-muted); }

/* why us */
.why-grid { display:grid; gap:1.5rem; }
.stat-card {
  background:var(--surface-0); border:1px solid var(--line);
  border-top:4px solid var(--accent); box-shadow:var(--shadow);
}
.stat-card h3 { font-size:var(--fs-h3); margin-bottom:0.4rem; color:var(--ink-900); }
.stat-card p { color:var(--ink-600); }

/* metrics */
.metrics-grid { display:grid; gap:1.5rem; text-align:center; }
.metric { padding:1.5rem 1rem; border-radius:var(--radius); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); }
.metric__num { display:block; font-family:var(--font-display); font-size:var(--fs-count); font-weight:700; color:var(--accent); line-height:1; }
.metric__label { display:block; margin-top:0.6rem; color:var(--on-dark-muted); font-size:var(--fs-small); }

/* testimonials */
.testimonials { background:var(--surface-50); }
/* .testimonials-grid is now the carousel container; the grid lives on the track. */
.testimonials-grid { display:block; }
.testimonial-card { background:var(--surface-0); border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:1rem; }
.testimonial-card blockquote { font-size:1.05rem; color:var(--ink-900); position:relative; padding-left:1.25rem; }
.testimonial-card blockquote::before { content:"\201C"; position:absolute; left:-0.1rem; top:-0.6rem; font-size:2.5rem; color:var(--accent); font-family:var(--font-display); }
.testimonial-card figcaption { color:var(--ink-600); font-weight:600; font-size:var(--fs-small); margin-top:auto; }

/* contact */
.contact__inner { display:grid; gap:2.5rem; }
.contact__details { margin:1.5rem 0 0; display:grid; gap:0.75rem; }
.contact__details li { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:baseline; }
.contact__details strong { min-width:70px; color:var(--accent-2); font-weight:600; }
:root[data-theme="dark"] .contact__details strong { color:var(--accent); }
.contact__details a { color:var(--feature-text); }
.contact__details li { color:var(--feature-text); }
.form-note { font-size:var(--fs-small); color:var(--feature-muted); margin-top:0.75rem; }

.contact-form { background:var(--feature-card-bg); border:1px solid var(--feature-card-line); border-radius:var(--radius); padding:1.75rem; display:grid; gap:1.1rem; }
.field { display:grid; gap:0.4rem; }
.field label { font-weight:600; font-size:var(--fs-small); color:var(--feature-text); }
.field input,.field textarea {
  width:100%; padding:0.75rem 0.9rem; border-radius:var(--radius-sm);
  border:1px solid var(--feature-field-line); background:var(--feature-field-bg);
  color:var(--feature-field-text); font-family:inherit; font-size:var(--fs-body);
}
.field input::placeholder,.field textarea::placeholder { color:var(--feature-muted); }
.field input:focus,.field textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(23,224,196,0.25); }
.field-error { color:#ffb4b4; font-size:var(--fs-small); min-height:1rem; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"] { border-color:#ff8585; }
.form-status { font-weight:600; min-height:1.2rem; }
.form-status.is-success { color:var(--accent); }

/* footer */
.site-footer { background:var(--navy-900); color:var(--on-dark); padding-top:clamp(2.5rem,5vw,4rem); }
.footer__grid { display:grid; gap:2rem; padding-bottom:2rem; }
.footer__brand p { color:var(--on-dark-muted); margin-top:0.75rem; max-width:40ch; }
.footer__brand .logo { font-size:1.3rem; }
.footer__brand a { color:var(--accent); }
.footer__col h3 { font-family:var(--font-body); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:0.1em; color:#fff; margin-bottom:1rem; }
.footer__links { display:grid; gap:0.6rem; }
.footer__links a { color:var(--on-dark-muted); }
.footer__links a:hover { color:var(--accent); }
.footer__bottom { border-top:1px solid rgba(255,255,255,0.1); padding-block:1.5rem; }
.footer__bottom p { color:var(--on-dark-muted); font-size:var(--fs-small); }

/* 6. RESPONSIVE ------------------------------------------------------------ */
@media (max-width:899px) {
  .nav__toggle { display:flex; }
  .nav__links {
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:1rem;
    background:var(--navy-900); padding:1.5rem 1.25rem 2rem;
    box-shadow:var(--shadow-dark);
    transform:translateY(-120%); transition:transform .3s ease; visibility:hidden;
  }
  .nav__links.is-open { transform:translateY(0); visibility:visible; }
  html.js-enabled .nav__links li,
  html.js-enabled .nav__links .nav__cta { opacity:0; transform:translateY(-6px); }
  html.js-enabled .nav__links.is-open li,
  html.js-enabled .nav__links.is-open .nav__cta {
    opacity:1; transform:none; transition:opacity .3s ease, transform .3s ease;
  }
  html.js-enabled .nav__links.is-open li:nth-child(2) { transition-delay:.05s; }
  html.js-enabled .nav__links.is-open li:nth-child(3) { transition-delay:.1s; }
  html.js-enabled .nav__links.is-open li:nth-child(4) { transition-delay:.15s; }
  html.js-enabled .nav__links.is-open li:nth-child(5) { transition-delay:.2s; }
  .nav__links ul { flex-direction:column; gap:0.25rem; }
  .nav__links ul a { display:block; padding:0.75rem 0; }
  .nav__cta { width:100%; margin-top:0.5rem; }

  /* The mobile menu panel is always dark navy, so its links/logo/toggle must
     always be light — even in light (day) theme, where --hero-text is dark. */
  .nav__links a,
  .nav__links ul a { color:#E8ECF8; opacity:1; }
  .nav__links a:hover,
  .nav__links ul a:hover,
  .nav__links ul a.is-active { color:var(--accent); }
  .theme-toggle { color:#E8ECF8; border-color:rgba(255,255,255,0.35); }
}

@media (min-width:640px) {
  .framework-grid,.why-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
}

@media (min-width:900px) {
  .hero__inner { grid-template-columns:1.1fr 0.9fr; gap:3rem; }
  .framework-grid { grid-template-columns:repeat(3,1fr); }
  /* All four service cards sit in a single row on desktop. */
  .services-grid { grid-template-columns:repeat(4,1fr); }
  .why-grid { grid-template-columns:repeat(4,1fr); }
  .metrics-grid { grid-template-columns:repeat(4,1fr); }
  .contact__inner { grid-template-columns:1fr 1fr; align-items:start; }
  .footer__grid { grid-template-columns:2fr 1fr 1fr; }
}

@media (min-width:1200px) {
  .section { padding-block:6rem; }
}

/* Tighten service cards a little in the 4-up desktop row. */
@media (min-width:900px) {
  .services-grid { gap:1.25rem; }
  .service-card { padding:1.4rem; }
  .service-card h3 { font-size:1.2rem; }
  .service-card p { font-size:0.95rem; }
}

/* 7. A11Y / REDUCED MOTION ------------------------------------------------- */
:focus-visible { outline:3px solid var(--accent-2); outline-offset:2px; border-radius:4px; }
.section--dark :focus-visible,.hero :focus-visible,.site-header :focus-visible { outline-color:var(--accent); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  /* Reveals must show their final state, never stay hidden. */
  html.js-enabled .reveal { opacity:1 !important; transform:none !important; }
  .hero__canvas { display:none; }
}

/* 8. MOTION ---------------------------------------------------------------
   All motion is additive on top of a working static baseline. Reveal
   elements are visible by default; only html.js-enabled hides them to
   prepare for animation, so no-JS users always see content.
   ------------------------------------------------------------------------- */

/* 8.1 Scroll-reveal */
.reveal { will-change:opacity, transform; }
html.js-enabled .reveal { opacity:0; transform:translateY(24px); }
html.js-enabled .reveal.is-revealed {
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}

/* 8.2 Hero canvas living background (behind content; CSS gradient is the fallback) */
.hero__canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none; }
.hero__inner { z-index:1; }
.hero__content > * { z-index:1; }

/* 8.3 Hero entrance (only under js-enabled; static final state is the default) */
@keyframes heroRise {
  from { opacity:0; transform:translateY(26px); }
  to   { opacity:1; transform:none; }
}
/* Entrance runs automatically under js-enabled (no JS class needed, so a
   main.js failure can never leave hero content stuck invisible). */
html.js-enabled .hero__content > * { animation:heroRise .7s cubic-bezier(.22,.61,.36,1) both; }
html.js-enabled .hero__content > *:nth-child(1) { animation-delay:.05s; }
html.js-enabled .hero__content > *:nth-child(2) { animation-delay:.15s; }
html.js-enabled .hero__content > *:nth-child(3) { animation-delay:.25s; }
html.js-enabled .hero__content > *:nth-child(4) { animation-delay:.35s; }
html.js-enabled .hero__visual { animation:heroRise .8s cubic-bezier(.22,.61,.36,1) .3s both; }

/* 8.3b Hero orbital animation — the rings rotate and the "planets" orbit.
   All spin around the SVG centre (210,210). Pure CSS so it runs with just the
   stylesheet; §7 reduced-motion freezes it by zeroing animation duration. */
/* Rings/nucleus spin in SVG user space (viewBox 0 0 420 420 -> centre 210,210). */
.orbit-ring,.orbit-nucleus,.orbit-core-glow { transform-box:view-box; transform-origin:210px 210px; }
@keyframes orbitSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes orbitSpinRev { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }
@keyframes nucleusPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.12); opacity:.85; } }
@keyframes dotDrift { 0%,100% { transform:translate(0,0); } 50% { transform:translate(10px,-14px); } }

.orbit-ring--1 { animation:orbitSpin 26s linear infinite; }
.orbit-ring--2 { animation:orbitSpinRev 18s linear infinite; }
.orbit-ring--3 { animation:orbitSpin 34s linear infinite; }
.orbit-nucleus { animation:nucleusPulse 3.5s ease-in-out infinite; }
.orbit-core-glow { animation:nucleusPulse 6s ease-in-out infinite; }
.orbit-dot { transform-box:fill-box; transform-origin:center; }
.orbit-dot--a { animation:dotDrift 7s ease-in-out infinite; }
.orbit-dot--b { animation:dotDrift 9s ease-in-out infinite 1s; }

/* 8.4 Gradient text accent (static, always safe) */
.text-gradient {
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* 8.5 Nav animated underline + active link */
.nav__links ul a { position:relative; }
.nav__links ul a::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--grad-accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav__links ul a:hover::after,
.nav__links ul a.is-active::after { transform:scaleX(1); }
.nav__links ul a.is-active { color:var(--accent); }

/* 8.6 Card micro-interactions: lift + gradient glow + icon motion */
.service-card,.stat-card,.framework-step { position:relative; }
.service-card::before,.stat-card::before,.framework-step::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-accent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.service-card:hover::before,.stat-card:hover::before,.framework-step:hover::before { opacity:.9; }
.framework-step { transition:transform .2s ease, box-shadow .2s ease; }
.framework-step:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(11,20,55,0.18); }
.stat-card { transition:transform .2s ease, box-shadow .2s ease; }
.stat-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(11,20,55,0.18); }
.service-card:hover { box-shadow:0 16px 40px rgba(23,224,196,0.18); }
.step-icon,.service-icon { transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.framework-step:hover .step-icon,.service-card:hover .service-icon { transform:translateY(-3px) rotate(-6deg) scale(1.06); }
/* pointer 3D tilt base (JS sets custom props; reset is default) */
.tilt { transform-style:preserve-3d; transition:transform .15s ease; }

/* 8.7 Metrics progress bar (fills once on scroll-in) */
.metric { position:relative; overflow:hidden; }
.metric::after {
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.metric.is-filled::after { transform:scaleX(1); }

/* 8.8 Testimonials carousel */
.carousel { position:relative; }
.carousel .carousel__viewport { overflow:hidden; }
/* No-JS / static baseline + desktop grid: show all slides as a responsive grid. */
.carousel .carousel__track { display:grid; gap:1.5rem; grid-auto-flow:row; }
@media (min-width:640px) {
  .carousel .carousel__track { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px) {
  .carousel .carousel__track { grid-template-columns:repeat(3,1fr); }
}
/* When JS activates the slider (narrow viewports), slides become full-width
   columns on one row and the track translates. */
.carousel.is-slider .carousel__track {
  grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:100%; gap:0;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.carousel__controls { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.5rem; }
.carousel__btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px; cursor:pointer;
  background:var(--surface-0); border:1px solid var(--line); color:var(--navy-900);
  transition:transform .15s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.carousel__btn:hover { transform:translateY(-2px); border-color:var(--accent); color:var(--accent-2); box-shadow:var(--shadow); }
.carousel__btn svg { width:20px; height:20px; }
.carousel__dots { display:flex; gap:0.5rem; align-items:center; }
.carousel__dot {
  width:9px; height:9px; border-radius:999px; padding:0; cursor:pointer;
  background:var(--line); border:0; transition:transform .2s ease, background .2s ease;
}
.carousel__dot[aria-current="true"] { background:var(--grad-accent); transform:scale(1.25); }

/* 8.9 Scroll-progress bar */
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:1200;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left;
  pointer-events:none;
}
html:not(.js-enabled) .scroll-progress { display:none; }

/* 8.10 Back-to-top button */
.back-to-top {
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:1100;
  width:48px; height:48px; border-radius:999px; cursor:pointer; border:0;
  background:var(--grad-accent); color:#06121f; box-shadow:0 10px 24px rgba(47,107,255,0.35);
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px) scale(.9); transition:opacity .25s ease, transform .25s ease;
}
.back-to-top svg { width:22px; height:22px; }
.back-to-top.is-visible { opacity:1; transform:none; }

/* 8.11 Button shine/sweep on primary */
.btn--primary { position:relative; overflow:hidden; }
.btn--primary::after {
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform:skewX(-18deg); transition:left .6s ease; pointer-events:none;
}
.btn--primary:hover::after { left:160%; }

/* 8.12 Section dividers / teal glow between light & dark sections */
.section--dark { position:relative; }
.section--dark::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(680px,80%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(23,224,196,0.6), transparent);
  pointer-events:none;
}

/* 8.13 Intro overlay (only visible under js-enabled; removed by JS; never for no-JS) */
.intro { display:none; }
html.js-enabled .intro {
  display:flex; position:fixed; inset:0; z-index:2000; align-items:center; justify-content:center;
  background:var(--grad-dark); transition:opacity .5s ease, visibility .5s ease;
}
.intro__mark { font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,6vw,3rem); color:#fff; animation:introPulse 1.2s ease-in-out infinite; }
@keyframes introPulse { 0%,100% { opacity:.7; transform:scale(.98); } 50% { opacity:1; transform:scale(1.02); } }
.intro.is-hidden { opacity:0; visibility:hidden; }

/* 8.14 Theme toggle button */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid currentColor; color:var(--hero-text); opacity:0.85;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, opacity .2s ease;
}
.theme-toggle:hover { transform:translateY(-2px); border-color:var(--accent-2); color:var(--accent-2); opacity:1; }
:root[data-theme="dark"] .theme-toggle:hover { border-color:var(--accent); color:var(--accent); }
.theme-toggle__icon { width:20px; height:20px; }
/* Default (light) shows the moon (switch TO dark). Dark theme shows the sun. */
.theme-toggle__icon--sun { display:none; }
.theme-toggle__icon--moon { display:block; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display:block; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display:none; }

/* 8.15 DARK theme token overrides (default remains the light look).
   This repaints the light sections (framework / why-us / testimonials) and
   their cards so the day/night toggle produces a real, visible change. */
:root[data-theme="dark"] {
  --ink-900:#E8ECF8;
  --ink-600:#A7B0CC;
  --surface-0:#111C44;       /* card base */
  --surface-50:#0B1437;      /* light-section background goes navy */
  --line:rgba(255,255,255,0.12);

  /* Feature-section tokens — DARK (night) values. */
  --feature-bg:linear-gradient(135deg,var(--navy-900),var(--indigo-700));
  --feature-text:var(--on-dark);
  --feature-heading:#ffffff;
  --feature-muted:var(--on-dark-muted);
  --feature-card-bg:rgba(255,255,255,0.04);
  --feature-card-line:rgba(255,255,255,0.1);
  --feature-field-bg:rgba(11,20,55,0.4);
  --feature-field-line:rgba(255,255,255,0.2);
  --feature-field-text:#ffffff;
  /* Hero backdrop (night sky). */
  --hero-bg:linear-gradient(135deg,var(--navy-900),var(--indigo-700));
  --hero-text:#ffffff;
  --hero-muted:var(--on-dark-muted);
  --header-bg:var(--navy-900);
}
:root[data-theme="dark"] body { background:var(--surface-50); color:var(--ink-900); }
:root[data-theme="dark"] .testimonials { background:var(--surface-50); }
/* Framework/why/testimonial cards: give them a subtle raised navy surface. */
:root[data-theme="dark"] .framework-step,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .testimonial-card { background:var(--surface-0); box-shadow:var(--shadow-dark); }
:root[data-theme="dark"] .framework-step p,
:root[data-theme="dark"] .stat-card p,
:root[data-theme="dark"] .testimonial-card figcaption,
:root[data-theme="dark"] .section__lead,
:root[data-theme="dark"] .muted { color:var(--ink-600); }
:root[data-theme="dark"] .testimonial-card blockquote { color:var(--ink-900); }
:root[data-theme="dark"] .carousel__btn { background:var(--surface-0); color:var(--on-dark); }

/* Smooth cross-fade between themes (gated to js-enabled; respects reduced motion via §7). */
html.js-enabled body,
html.js-enabled .section,
html.js-enabled .framework-step,
html.js-enabled .stat-card,
html.js-enabled .testimonial-card { transition:background-color .35s ease, color .35s ease, box-shadow .35s ease; }