/* ==========================================================================
   Codora — design tokens, reset, typography, buttons, layout primitives
   ========================================================================== */

:root{
  /* Brand ---------------------------------------------------------------- */
  --navy:#0B1220;
  --navy-soft:#111827;

  --blue:#2563EB;
  --blue-hover:#1D4ED8;
  --blue-light:#EFF6FF;
  --blue-border:#DBEAFE;

  /* --orange is the accent hue (dots, icons, indicators).
     --orange-cta is the button fill: darkened so white label text clears
     5:1 contrast, which #F97316 cannot reach. */
  --orange:#F97316;
  --orange-cta:#C2410C;
  --orange-cta-hover:#9A3412;
  --orange-light:#FFF7ED;
  --orange-border:#FED7AA;

  --white:#FFFFFF;
  --background:#FFFFFF;
  --background-soft:#F8FAFC;
  --background-muted:#F1F5F9;

  --border:#E2E8F0;
  --border-strong:#CBD5E1;

  --text-primary:#0F172A;
  --text-secondary:#64748B;
  --text-muted:#94A3B8;
  --text-on-dark:#CBD5E1;
  --text-on-dark-soft:#94A3B8;

  --success:#16A34A;

  /* Radii ---------------------------------------------------------------- */
  --r-xs:8px;
  --r-sm:10px;
  --r-btn:12px;
  --r-card:16px;
  --r-lg:18px;

  /* Elevation ------------------------------------------------------------ */
  --shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --shadow-md:0 16px 40px rgba(15,23,42,.08);

  /* Layout --------------------------------------------------------------- */
  --maxw:1180px;
  --gutter:24px;
  --dock-h:0px;
}

/* Reset ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{
  background:var(--background);
  color:var(--text-primary);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
  padding-bottom:var(--dock-h);
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Typography ------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  font-weight:700;line-height:1.1;letter-spacing:-0.03em;color:var(--text-primary);
  text-wrap:balance;
}
h1{font-size:clamp(2.05rem,4.3vw,3.35rem);font-weight:800;line-height:1.07;letter-spacing:-0.038em}
h2{font-size:clamp(1.7rem,2.9vw,2.4rem);letter-spacing:-0.032em}
h3{font-size:1.15rem;letter-spacing:-0.02em}
h4{font-size:1rem;letter-spacing:-0.015em}
p{color:var(--text-secondary);max-width:66ch}
strong{color:var(--text-primary);font-weight:600}

.lede{font-size:1.05rem;line-height:1.65;margin-top:16px}

/* Layout primitives ------------------------------------------------------ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(60px,7.5vw,100px)}
.band-sm{padding-block:clamp(48px,5.5vw,76px)}
.soft{background:var(--background-soft)}
.dark{background:var(--navy);color:var(--white)}
.dark h2,.dark h3,.dark h4{color:var(--white)}
.dark p{color:var(--text-on-dark)}
.center{text-align:center}
.center p{margin-inline:auto}

/* Section heading block -------------------------------------------------- */
.sec-head{max-width:60ch}
.sec-head.center{margin-inline:auto}
.sec-head h2{margin-top:14px}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--blue-hover);background:var(--blue-light);border:1px solid var(--blue-border);
  padding:6px 12px;border-radius:var(--r-xs);
}
.eyebrow i{width:6px;height:6px;border-radius:2px;background:var(--blue);flex:none}
.dark .eyebrow{color:#BFDBFE;background:rgba(37,99,235,.16);border-color:rgba(147,197,253,.24)}
.dark .eyebrow i{background:#60A5FA}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:.95rem;line-height:1;
  padding:14px 24px;border-radius:var(--r-btn);
  border:1px solid transparent;text-align:center;white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,
             transform .16s ease,box-shadow .16s ease;
}
.btn svg{width:17px;height:17px;flex:none}

.btn-primary{background:var(--orange-cta);color:#fff;box-shadow:0 8px 20px rgba(194,65,12,.20)}
.btn-primary:hover{background:var(--orange-cta-hover);transform:translateY(-1px);box-shadow:0 12px 26px rgba(194,65,12,.26)}

.btn-outline{background:#fff;color:var(--text-primary);border-color:var(--border)}
.btn-outline:hover{border-color:var(--navy);background:var(--background-soft)}

.btn-onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.30)}
.btn-onDark:hover{border-color:#fff;background:rgba(255,255,255,.08)}

.btn-sm{padding:10px 18px;font-size:.9rem;border-radius:var(--r-sm)}
.btn-block{width:100%}

/* Links ------------------------------------------------------------------ */
.link{color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:6px;font-size:.93rem}
.link:hover{color:var(--blue-hover)}
.link svg{width:15px;height:15px;transition:transform .16s ease}
.link:hover svg{transform:translateX(3px)}

/* Focus ------------------------------------------------------------------ */
:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--blue);outline-offset:2px;border-radius:4px;
}
.dark :where(a,button):focus-visible{outline-color:#93C5FD}

.skip-link{
  position:absolute;left:16px;top:-72px;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:var(--r-sm);font-weight:600;
  transition:top .18s ease;
}
.skip-link:focus{top:12px}

/* Small reusable pieces -------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:500;color:var(--text-secondary);
  background:#fff;border:1px solid var(--border);border-radius:var(--r-xs);
  padding:7px 13px;white-space:nowrap;
}

.icon-box{
  width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--blue-light);color:var(--blue);border:1px solid var(--blue-border);
}
.icon-box svg{width:20px;height:20px}

/* Decorative technical grid ---------------------------------------------- */
.grid-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,rgba(37,99,235,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(37,99,235,.055) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 20%,transparent 76%);
          mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 20%,transparent 76%);
}
.grid-bg-dark{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 0%,#000 10%,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 90% at 50% 0%,#000 10%,transparent 80%);
}

/* Motion preferences ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{scroll-behavior:auto}
}