/* =========================================================
   Prime Solutions — Design System
   1. Tokens      2. Reset/Base   3. Layout
   4. Typography  5. Buttons      6. Components
   7. Sections    8. Utilities    9. Responsive
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand */
  --brand-700:#1B33C4;
  --brand-600:#2340E8;
  --brand-500:#3A5BFF;
  --brand-400:#6E8BFF;
  --brand-100:#DCE4FF;
  --brand-050:#EEF2FF;
  --violet-500:#7C5CFF;
  --mint-500:#00D4A0;
  --mint-050:#E4FBF4;

  /* Neutrals — light theme */
  --ink:#0A0C10;
  --text:#14181F;
  --muted:#5B6472;
  --muted-2:#828C9B;
  --paper:#FFFFFF;
  --surface:#F7F8FA;
  --surface-2:#EFF2F7;
  --line:rgba(10,12,16,.10);
  --line-2:rgba(10,12,16,.06);

  --grad-brand:linear-gradient(135deg,#3A5BFF 0%,#2340E8 48%,#7C5CFF 100%);
  --grad-text:linear-gradient(100deg,#3A5BFF 0%,#7C5CFF 60%,#6E8BFF 100%);

  /* Elevation */
  --sh-xs:0 1px 2px rgba(10,12,16,.06);
  --sh-sm:0 2px 6px rgba(10,12,16,.06),0 1px 2px rgba(10,12,16,.04);
  --sh-md:0 12px 28px -12px rgba(10,12,16,.18),0 2px 6px rgba(10,12,16,.05);
  --sh-lg:0 32px 64px -24px rgba(10,12,16,.26),0 6px 16px rgba(10,12,16,.06);
  --sh-brand:0 18px 40px -16px rgba(58,91,255,.55);

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-full:999px;

  /* Spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px; --s-11:96px; --s-12:128px;

  /* Type */
  --font-display:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --t-xs:.78rem;
  --t-sm:.875rem;
  --t-base:clamp(.98rem,.95rem + .12vw,1.05rem);
  --t-lg:clamp(1.06rem,1rem + .3vw,1.2rem);
  --t-xl:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --t-2xl:clamp(1.5rem,1.3rem + .9vw,2rem);
  --t-3xl:clamp(1.9rem,1.5rem + 1.8vw,2.85rem);
  --t-4xl:clamp(2.4rem,1.7rem + 3vw,4rem);
  --t-5xl:clamp(2.7rem,1.7rem + 4.4vw,5rem);

  /* Layout */
  --container:1200px;
  --container-wide:1360px;
  --gutter:clamp(20px,4vw,40px);
  --header-h:72px;

  --ease:cubic-bezier(.22,1,.36,1);

  color-scheme:light;
}

/* Dark theme */
:root[data-theme="dark"]{
  --text:#EDF0F5;
  --muted:#A3ADBB;
  --muted-2:#7F8A99;
  --paper:#0A0C10;
  --surface:#11151D;
  --surface-2:#171D27;
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.06);
  --brand-050:#141C33;
  --brand-100:#1D2A52;
  --mint-050:#0D2620;
  --sh-xs:0 1px 2px rgba(0,0,0,.5);
  --sh-sm:0 2px 8px rgba(0,0,0,.45);
  --sh-md:0 12px 30px -12px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.4);
  --sh-lg:0 36px 70px -28px rgba(0,0,0,.85),0 8px 20px rgba(0,0,0,.45);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --text:#EDF0F5; --muted:#A3ADBB; --muted-2:#7F8A99;
    --paper:#0A0C10; --surface:#11151D; --surface-2:#171D27;
    --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.06);
    --brand-050:#141C33; --brand-100:#1D2A52; --mint-050:#0D2620;
    --sh-xs:0 1px 2px rgba(0,0,0,.5);
    --sh-sm:0 2px 8px rgba(0,0,0,.45);
    --sh-md:0 12px 30px -12px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.4);
    --sh-lg:0 36px 70px -28px rgba(0,0,0,.85),0 8px 20px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2.5px solid var(--brand-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--brand-500);color:#fff}

.skip-link{
  position:absolute;left:var(--s-4);top:-120px;z-index:999;
  background:var(--brand-500);color:#fff;padding:12px 20px;border-radius:var(--r-sm);
  font-weight:600;transition:top .2s var(--ease);
}
.skip-link:focus{top:var(--s-4)}

/* ---------- 3. LAYOUT ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.container--narrow{max-width:820px}
.section{padding-block:clamp(64px,8vw,120px);position:relative}
.section--tight{padding-block:clamp(44px,5vw,72px)}
.section--surface{background:var(--surface)}
.grid{display:grid;gap:var(--s-6)}
.row{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}

/* Ink panel: stays dark in both themes */
.ink{
  --text:#F2F5FA; --muted:#A6B0C0; --muted-2:#8791A1;
  --paper:#0A0C10; --surface:#12161F; --surface-2:#181F2A;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.07);
  --brand-050:rgba(58,91,255,.14);
  background:var(--paper);color:var(--text);
}

/* ---------- 4. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.033em;
  color:var(--text);
  text-wrap:balance;
}
h1{font-size:var(--t-5xl)}
h2{font-size:var(--t-4xl)}
h3{font-size:var(--t-2xl);letter-spacing:-.025em;line-height:1.2}
h4{font-size:var(--t-xl);letter-spacing:-.02em;line-height:1.3}
h5{font-size:var(--t-lg);letter-spacing:-.01em;line-height:1.4}
p{text-wrap:pretty}
.lead{font-size:var(--t-lg);color:var(--muted);line-height:1.6;max-width:62ch}
.muted{color:var(--muted)}
.gradient-text{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-500);
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-brand)}
.ink .eyebrow{color:var(--brand-400)}

.section-head{max-width:680px;margin-bottom:clamp(36px,5vw,60px)}
.section-head .eyebrow{margin-bottom:var(--s-4)}
.section-head h2{margin-bottom:var(--s-4)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .lead{margin-inline:auto}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r-full);
  font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);letter-spacing:-.01em;
  white-space:nowrap;cursor:pointer;position:relative;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background-color .22s,border-color .22s,color .22s;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:hover .i-arrow{transform:translateX(3px)}

.btn--primary{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.btn--primary:hover{box-shadow:0 22px 46px -16px rgba(58,91,255,.68)}

.btn--dark{background:var(--ink);color:#fff;box-shadow:var(--sh-md)}
:root[data-theme="dark"] .btn--dark{background:#fff;color:#0A0C10}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn--dark{background:#fff;color:#0A0C10}}
.ink .btn--dark{background:#fff;color:#0A0C10}

.btn--ghost{background:transparent;color:var(--text);border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--brand-500);color:var(--brand-500);background:var(--brand-050)}
.ink .btn--ghost:hover{color:#fff}

.btn--soft{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.btn--soft:hover{background:var(--surface-2)}

.btn--lg{padding:16px 30px;font-size:var(--t-base)}
.btn--block{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:650;color:var(--brand-500);font-size:var(--t-sm);
  transition:gap .25s var(--ease);
}
.link-arrow svg{width:16px;height:16px}
.link-arrow:hover{gap:11px}
.ink .link-arrow{color:var(--brand-400)}

/* ---------- 6. COMPONENTS ---------- */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px 7px 11px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line);
  font-size:var(--t-xs);font-weight:600;color:var(--muted);
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--mint-500);box-shadow:0 0 0 3px rgba(0,212,160,.2);flex:none}
.badge--brand{background:var(--brand-050);border-color:transparent;color:var(--brand-600)}
:root[data-theme="dark"] .badge--brand{color:var(--brand-400)}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line-2);
  font-size:var(--t-xs);font-weight:600;color:var(--muted);
}
.chip--mint{background:var(--mint-050);color:#0B7A60;border-color:transparent}
:root[data-theme="dark"] .chip--mint{color:var(--mint-500)}
.ink .chip--mint{background:rgba(0,212,160,.12);color:var(--mint-500)}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);
  position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
  height:100%;
}
.card--hover:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.card--surface{background:var(--surface);border-color:var(--line-2)}
.card h3,.card h4{margin-bottom:var(--s-3)}
.card p{color:var(--muted)}

.icon-box{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:var(--s-5);
  background:var(--brand-050);color:var(--brand-500);
  transition:transform .4s var(--ease);
}
.icon-box svg{width:23px;height:23px}
.card--hover:hover .icon-box{transform:scale(1.07) rotate(-4deg)}
.icon-box--grad{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.ink .icon-box{color:var(--brand-400)}

.ticks{display:flex;flex-direction:column;gap:11px;margin-top:var(--s-5)}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.ticks svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--mint-500)}

/* Header */
.header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s;
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(10,12,16,.5)}
.header__inner{height:var(--header-h);display:flex;align-items:center;gap:var(--s-6)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{width:38px;height:38px;flex:none;border-radius:11px;box-shadow:var(--sh-sm)}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:1.06rem;letter-spacing:-.03em;color:var(--text)}
.brand__sub{font-size:.58rem;font-weight:700;letter-spacing:.24em;color:var(--muted-2);margin-top:3px}

.nav{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav a{
  padding:9px 15px;border-radius:var(--r-full);
  font-size:var(--t-sm);font-weight:600;color:var(--muted);
  transition:color .2s,background-color .2s;
}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--text);background:var(--surface)}
.header__actions{display:flex;align-items:center;gap:var(--s-3);flex:none}

.icon-btn{
  width:38px;height:38px;border-radius:var(--r-full);
  display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--line);background:var(--paper);
  transition:color .2s,border-color .2s,transform .2s;
}
.icon-btn:hover{color:var(--text);border-color:var(--brand-500);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:block}
:root[data-theme="dark"] .theme-toggle .i-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:none}
}

.burger{display:none;width:42px;height:42px;border-radius:var(--r-sm);place-items:center;color:var(--text)}
.burger span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;
  background:var(--paper);
  padding:var(--s-7) var(--gutter) var(--s-9);
  display:flex;flex-direction:column;gap:2px;
  transform:translateY(-8px);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  overflow-y:auto;
}
.mobile-nav.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.m-link{
  padding:15px 4px;font-family:var(--font-display);font-size:1.35rem;font-weight:700;
  letter-spacing:-.02em;border-bottom:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;
}
.m-link svg{width:18px;height:18px;color:var(--muted-2)}
.mobile-nav .btn{margin-top:var(--s-6)}

/* Marquee */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;gap:clamp(36px,6vw,72px);width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.logo-item{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;
  color:var(--muted-2);opacity:.75;white-space:nowrap;
  transition:opacity .25s,color .25s;
}
.logo-item:hover{opacity:1;color:var(--text)}
.logo-item svg{width:20px;height:20px;flex:none}

/* Accordion */
.accordion{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);
  padding:22px 4px;text-align:left;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em;
  color:var(--text);transition:color .2s;
}
.acc-btn:hover{color:var(--brand-500)}
.acc-icon{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line-2);color:var(--muted);
  transition:transform .35s var(--ease),background-color .3s,color .3s;
}
.acc-icon svg{width:15px;height:15px}
.acc-btn[aria-expanded="true"] .acc-icon{transform:rotate(180deg);background:var(--brand-500);color:#fff;border-color:transparent}
.acc-panel{overflow:hidden;height:0;transition:height .38s var(--ease)}
.acc-panel__inner{padding:0 56px 26px 4px;color:var(--muted);max-width:74ch}

/* Tabs */
.tabs{display:inline-flex;padding:5px;gap:4px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-full);position:relative;max-width:100%;overflow:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:10px 22px;border-radius:var(--r-full);position:relative;z-index:1;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);color:var(--muted);
  transition:color .25s;white-space:nowrap;
}
.tab[aria-selected="true"]{color:#fff}
.tab-pill{position:absolute;top:5px;bottom:5px;left:0;border-radius:var(--r-full);background:var(--grad-brand);box-shadow:var(--sh-brand);transition:transform .38s var(--ease),width .38s var(--ease);z-index:0}
.tab-panel[hidden]{display:none}

/* Stats */
.stat__num{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.1rem,1.3rem + 3vw,3.3rem);letter-spacing:-.04em;line-height:1;
  display:flex;align-items:baseline;
}
.stat__label{color:var(--muted);font-size:var(--t-sm);margin-top:10px;line-height:1.45}

/* Forms */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:var(--t-sm);font-weight:650;color:var(--text)}
.field label .req{color:var(--brand-500)}
.input,.textarea,.select{
  width:100%;padding:13px 16px;
  background:var(--paper);color:var(--text);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--t-sm);transition:border-color .2s,box-shadow .2s;
}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--brand-500);
  box-shadow:0 0 0 4px rgba(58,91,255,.15);
}
.textarea{resize:vertical;min-height:132px;line-height:1.6}
.select{appearance:none;cursor:pointer;padding-right:44px;background-repeat:no-repeat;background-position:right 14px center;background-size:17px}
.field-error{font-size:var(--t-xs);color:#E5484D;font-weight:600;display:none}
.field.has-error .input,.field.has-error .textarea,.field.has-error .select{border-color:#E5484D}
.field.has-error .field-error{display:block}
.form-note{font-size:var(--t-xs);color:var(--muted-2);line-height:1.55}

.choice-grid{display:flex;flex-wrap:wrap;gap:9px}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:inline-flex;padding:9px 16px;border-radius:var(--r-full);
  border:1.5px solid var(--line);font-size:var(--t-xs);font-weight:650;color:var(--muted);
  cursor:pointer;transition:all .2s;
}
.choice span:hover{border-color:var(--brand-400);color:var(--text)}
.choice input:checked+span{background:var(--brand-050);border-color:var(--brand-500);color:var(--brand-600)}
:root[data-theme="dark"] .choice input:checked+span{color:var(--brand-400)}
.choice input:focus-visible+span{outline:2.5px solid var(--brand-500);outline-offset:3px}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

.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}