/* ============================================================================
   Digisty Technologies Private Limited — brand token sheet
   ONE palette, shared by all three design previews. Swap values, never names.
   Load order: brand.css  →  <design>/app.css
   ========================================================================== */

:root {
  /* ── Type families ───────────────────────────────────────────────────── */
  --f:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fd: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --fm: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Brand ramp — taken from the logo / standee artwork ────────────────
     Tuned brighter and more saturated than the first pass: the navies keep
     the wordmark recognisable, the blues carry the energy, and a cyan sits
     at the end of the ramp purely to give gradients somewhere to travel to. */
  --navy-900:#080E3E;
  --navy-800:#121B69;
  --navy-700:#1E2A8C;   /* the DIGISTY wordmark navy */
  --navy-600:#2B3BB4;
  --blue-700:#1D4ED8;
  --blue-600:#2563EB;   /* the "INTELLIGENT SOLUTIONS" blue */
  --blue-500:#3B82F6;
  --blue-400:#60A5FA;
  --blue-300:#93C5FD;
  --blue-200:#BFDBFE;
  --blue-100:#E7EFFE;
  --cyan-500:#0EA5E9;
  --cyan-400:#22D3EE;
  --cyan-300:#67E8F9;
  --carbon:#16181D;     /* the black wedge on the card */

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --paper:     #F2F6FE;
  --paper-2:   #E6EEFC;
  --surface:   #FFFFFF;
  --surface-2: #F6F9FF;
  --field:     #FFFFFF;
  --field-focus:#FFFFFF;
  --chip:      #E7EFFE;
  --hover:     rgba(37,99,235,.06);
  --inverse:   #080E3E;          /* dark band on a light page */
  --inverse-ink:#EEF3FF;

  /* ── Ink ─────────────────────────────────────────────────────────────── */
  --ink:   #0F1729;
  --dim:   #4A5670;
  --faint: #6B7789;
  --on-accent:#FFFFFF;

  /* ── Lines ───────────────────────────────────────────────────────────── */
  --line:      #D3E0F7;
  --line-2:    #BACDF0;
  --line-soft: #E6EEFC;

  /* ── Accent ──────────────────────────────────────────────────────────── */
  --accent:   #2563EB;
  --accent-2: #1E2A8C;
  --accent-w: #EAF2FF;   /* lighter than --blue-100 so accent text on it clears 4.5:1 */
  --accent-b: rgba(37,99,235,.38);
  --brand-word:#1E2A8C;
  --btn-bg:   linear-gradient(135deg,#2563EB 0%,#1D4ED8 55%,#1E2A8C 100%);
  --btn-fg:   #FFFFFF;

  /* ── Status — saturated, but still ≥4.5:1 on their own wash ──────────── */
  --ok:#02795A;      --ok-w:#D9F7EC;
  --warn:#95500B;    --warn-w:#FDEFD8;
  --danger:#C8231F;  --danger-w:#FDE6E5;
  --info:#0A6C9E;    --info-w:#DDF0FC;

  /* ── Effects ─────────────────────────────────────────────────────────── */
  --ring:   rgba(37,99,235,.07);
  --glow:   rgba(37,99,235,.45);
  --ribbon: linear-gradient(90deg,#1D4ED8 0%,#2563EB 42%,#0284C7 100%);
  --stage-bg:
     radial-gradient(1200px 720px at 50% -12%, rgba(37,99,235,.20), transparent 62%),
     radial-gradient(760px 520px at 88% 106%, rgba(14,165,233,.15), transparent 64%),
     radial-gradient(620px 460px at 8% 88%, rgba(43,59,180,.12), transparent 66%);
  --grid-ink: rgba(37,99,235,.09);
  --card-shadow: 0 1px 2px rgba(15,23,41,.05), 0 12px 32px -16px rgba(21,40,110,.24);
  --scrim: rgba(6,12,44,.58);

  /* ── Brand bands ─────────────────────────────────────────────────────────
     Surfaces that are navy in BOTH themes — the stat band, CTA band, footer,
     the gradient buttons. Their foreground colours are therefore constants,
     deliberately NOT overridden in the dark block. They still live here as
     tokens so a rebrand is one edit rather than forty.                      */
  --brand-band:    linear-gradient(135deg,#2563EB 0%,#1D4ED8 55%,#1E2A8C 100%);
  --on-brand:      #FFFFFF;
  --on-brand-ink:  #EEF4FF;
  --on-brand-dim:  #BFDBFE;
  --on-brand-soft: rgba(255,255,255,.86);
  --on-brand-wash: rgba(255,255,255,.18);
  --on-brand-line: rgba(255,255,255,.32);
  --brand-hairline:rgba(191,219,254,.20);
  --brand-chip:    rgba(191,219,254,.15);
  --spinner-track: rgba(255,255,255,.35);
  --orb-shadow:    rgba(30,42,140,.34);
  --mask-ink:      #000;   /* stencil only — alpha is what matters, not hue */

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15,23,41,.06), 0 1px 3px rgba(15,23,41,.05);
  --shadow-md: 0 6px 18px rgba(15,23,41,.09);
  --shadow-lg: 0 24px 56px rgba(10,18,44,.22);

  /* ── Structure ───────────────────────────────────────────────────────── */
  --radius:      12px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --topbar-h:    72px;
  --container-max: 1200px;

  /* ── Space ───────────────────────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* ── Fluid scales — correct at every width ───────────────────────────── */
  --gutter:    clamp(18px, 4vw, 40px);
  --section-y: clamp(48px, 7vw, 112px);
  --fs-display:clamp(2.05rem, 1.25rem + 3.6vw, 4.15rem);
  --fs-h1:     clamp(1.75rem, 1.15rem + 2.6vw, 3.05rem);
  --fs-h2:     clamp(1.45rem, 1.10rem + 1.6vw, 2.30rem);
  --fs-h3:     clamp(1.08rem, 0.98rem + 0.5vw, 1.35rem);
  --fs-lead:   clamp(1rem, 0.95rem + 0.35vw, 1.18rem);

  /* ── Touch ───────────────────────────────────────────────────────────── */
  --tap:44px;

  /* ── Safe areas ──────────────────────────────────────────────────────── */
  --safe-t:env(safe-area-inset-top);
  --safe-r:env(safe-area-inset-right);
  --safe-b:env(safe-area-inset-bottom);
  --safe-l:env(safe-area-inset-left);

  /* Breakpoints are a documented constant (custom props don't work in @media):
     480 · 640 · 768 · 1024 · 1280 · 1536   — upper bounds written as 1023.98 */

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --t-fast:120ms; --t-base:220ms; --t-slow:360ms;
  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in:  cubic-bezier(.55,.055,.675,.19);
  --ease-pop: cubic-bezier(.175,.885,.32,1.15);

  /* ── Z-scale ─────────────────────────────────────────────────────────── */
  --z-sticky:200; --z-dropdown:300; --z-drawer:900; --z-modal:1060; --z-toast:1100;
}

/* ── Dark: system preference, unless the user explicitly chose light ────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#050A26; --paper-2:#081035; --surface:#0C1442; --surface-2:#121C55;
    --field:#0A1238; --field-focus:#101A4A;
    --chip:rgba(96,165,250,.14); --hover:rgba(96,165,250,.09);
    --inverse:#081035; --inverse-ink:#E9EFFF;
    --ink:#E9EFFF; --dim:#A8B8E4; --faint:#8496C8;
    --line:rgba(120,160,250,.20); --line-2:rgba(120,160,250,.30); --line-soft:rgba(120,160,250,.11);
    --accent:#60A5FA; --accent-2:#93C5FD;
    --accent-w:rgba(96,165,250,.18); --accent-b:rgba(96,165,250,.45);
    --brand-word:#93C5FD; --on-accent:#04102E;
    --btn-bg:linear-gradient(135deg,#93C5FD 0%,#60A5FA 45%,#3B82F6 100%); --btn-fg:#03102E;
    --ok:#34E3A8; --ok-w:rgba(52,227,168,.16);
    --warn:#FBBF4A; --warn-w:rgba(251,191,74,.16);
    --danger:#FF8A80; --danger-w:rgba(255,138,128,.16);
    --info:#38D2F2; --info-w:rgba(56,210,242,.16);
    --ring:rgba(96,165,250,.09); --glow:rgba(96,165,250,.55);
    --ribbon:linear-gradient(90deg,#3B82F6 0%,#60A5FA 40%,#67E8F9 100%);
    --stage-bg:
       radial-gradient(1200px 720px at 50% -12%, rgba(37,99,235,.38), transparent 62%),
       radial-gradient(760px 520px at 88% 106%, rgba(14,165,233,.22), transparent 64%),
       radial-gradient(620px 460px at 6% 84%, rgba(109,92,231,.20), transparent 66%);
    --grid-ink:rgba(120,165,255,.10);
    --card-shadow:0 1px 0 rgba(150,190,255,.10) inset, 0 40px 90px -34px rgba(0,0,0,.9);
    --scrim:rgba(2,5,24,.74);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 8px 24px rgba(0,0,0,.45);
    --shadow-lg:0 28px 64px rgba(0,0,0,.6);
  }
}

/* ── Dark: explicit choice always wins ──────────────────────────────────── */
:root[data-theme="dark"] {
  --paper:#050A26; --paper-2:#081035; --surface:#0C1442; --surface-2:#121C55;
  --field:#0A1238; --field-focus:#101A4A;
  --chip:rgba(96,165,250,.14); --hover:rgba(96,165,250,.09);
  --inverse:#081035; --inverse-ink:#E9EFFF;
  --ink:#E9EFFF; --dim:#A8B8E4; --faint:#8496C8;
  --line:rgba(120,160,250,.20); --line-2:rgba(120,160,250,.30); --line-soft:rgba(120,160,250,.11);
  --accent:#60A5FA; --accent-2:#93C5FD;
  --accent-w:rgba(96,165,250,.18); --accent-b:rgba(96,165,250,.45);
  --brand-word:#93C5FD; --on-accent:#04102E;
  --btn-bg:linear-gradient(135deg,#93C5FD 0%,#60A5FA 45%,#3B82F6 100%); --btn-fg:#03102E;
  --ok:#34E3A8; --ok-w:rgba(52,227,168,.16);
  --warn:#FBBF4A; --warn-w:rgba(251,191,74,.16);
  --danger:#FF8A80; --danger-w:rgba(255,138,128,.16);
  --info:#38D2F2; --info-w:rgba(56,210,242,.16);
  --ring:rgba(96,165,250,.09); --glow:rgba(96,165,250,.55);
  --ribbon:linear-gradient(90deg,#3B82F6 0%,#60A5FA 40%,#67E8F9 100%);
  --stage-bg:
     radial-gradient(1200px 720px at 50% -12%, rgba(37,99,235,.38), transparent 62%),
     radial-gradient(760px 520px at 88% 106%, rgba(14,165,233,.22), transparent 64%),
     radial-gradient(620px 460px at 6% 84%, rgba(109,92,231,.20), transparent 66%);
  --grid-ink:rgba(120,165,255,.10);
  --card-shadow:0 1px 0 rgba(150,190,255,.10) inset, 0 40px 90px -34px rgba(0,0,0,.9);
  --scrim:rgba(2,5,24,.74);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 28px 64px rgba(0,0,0,.6);
}

/* ============================================================================
   Base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  min-height:100vh;
  min-height:100dvh;
  font:400 16px/1.65 var(--f);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{font-family:var(--fd);line-height:1.12;letter-spacing:-.025em;color:var(--ink);font-weight:800;}
code,pre,.mono{font-family:var(--fm);}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
img,svg,video{max-width:100%;height:auto;display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
ul,ol{list-style:none;}
.num{font-variant-numeric:tabular-nums;}
.wrap-any{overflow-wrap:anywhere;}

/* ── Shared layout primitives ───────────────────────────────────────────── */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:max(var(--gutter), var(--safe-l));
  padding-inline-end:max(var(--gutter), var(--safe-r));
}
.section{padding-block:var(--section-y);}
.grid{display:grid;gap:var(--s5);}
.stack>*+*{margin-top:var(--s4);}
.lede{font-size:var(--fs-lead);color:var(--dim);max-width:62ch;}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font:700 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px;flex:none;}

/* ── Brand mark ─────────────────────────────────────────────────────────── */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--brand-word);text-decoration:none;min-height:var(--tap);}
.logo:hover{text-decoration:none;}
.logo .mark{width:34px;height:34px;flex:none;fill:currentColor;}
.logo .word{display:flex;flex-direction:column;line-height:1;}
.logo .word b{font:800 20px/1 var(--f);letter-spacing:.02em;color:var(--brand-word);}
.logo .word span{font:600 8px/1.5 var(--f);letter-spacing:.19em;text-transform:uppercase;color:var(--faint);white-space:nowrap;}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:12px 22px;
  border:1px solid transparent;border-radius:var(--radius-pill);
  font:700 15px/1 var(--f);letter-spacing:.01em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),
             box-shadow var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease);
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;}

.btn-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 8px 22px -10px var(--glow);}
.btn-primary:hover{box-shadow:0 14px 30px -10px var(--glow);}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-w);}

.btn-on-dark{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.28);}
.btn-on-dark:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);}

.btn-lg{padding:15px 30px;font-size:16px;}

/* ── Icon button ────────────────────────────────────────────────────────── */
.icon-btn{
  display:grid;place-items:center;
  min-width:var(--tap);min-height:var(--tap);
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.icon-btn:hover{background:var(--hover);border-color:var(--line-2);}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

/* ── Focus ring — solid accent, 3:1 minimum ─────────────────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius);
  box-shadow:0 0 0 5px var(--accent-w);
}

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

.skip-link{
  position:absolute;left:var(--s4);top:-999px;z-index:var(--z-toast);
  padding:12px 18px;border-radius:var(--radius);
  background:var(--accent);color:#fff;font-weight:700;
}
.skip-link:focus{top:var(--s4);}

/* ── Responsive floor ───────────────────────────────────────────────────── */
@media (max-width:639.98px){
  input,select,textarea{font-size:16px;}
}
@media (pointer:coarse){
  button,.btn,.nav-link,[role="button"]{min-height:var(--tap);}
  .icon-btn{min-width:var(--tap);min-height:var(--tap);}
}
@media (max-width:479.98px){
  .btn{width:100%;}
  .btn-row .btn{width:100%;}
}

/* ── Reveal on scroll (progressive; visible by default if JS never runs) ── */
[data-reveal]{opacity:1;transform:none;}
.js [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);}
.js [data-reveal].in{opacity:1;transform:none;}

/* ── Reduced motion — mandatory, always last ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important;}
}