/* =====================================================================
   01 · DESIGN TOKENS
   ===================================================================== */
:root{
  /* Dark — true near-black, warm neutrals. No blue. */
  --bg:#050505;
  --bg-2:#080808;
  --surface:#0d0d0d;
  --surface-2:#121212;
  --surface-3:#171717;

  --text:#EDEAE6;
  --text-2:#A5A09A;
  --text-3:#6C6660;

  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.28);

  --accent:#FF6B3D;
  --accent-soft:rgba(255,107,61,.14);
  --accent-ink:#FFFFFF;
  --glow:rgba(255,107,61,.30);

  --nav-bg:rgba(7,7,7,.68);
  --shadow:0 40px 90px -40px rgba(0,0,0,.95);
  --shadow-sm:0 18px 40px -24px rgba(0,0,0,.9);

  --scene-opacity:.72;
  --grid-line:rgba(255,255,255,.035);
  --grain-opacity:.038;
  color-scheme: dark;
}

[data-theme="light"]{
  --bg:#F6F4F1;
  --bg-2:#EFECE7;
  --surface:#FFFFFF;
  --surface-2:#FBFAF8;
  --surface-3:#F2EFEA;

  --text:#131110;
  --text-2:#5B554E;
  --text-3:#8E8780;

  --line:rgba(19,17,16,.10);
  --line-2:rgba(19,17,16,.17);
  --line-3:rgba(19,17,16,.30);

  --accent:#D5451A;
  --accent-soft:rgba(213,69,26,.10);
  --accent-ink:#FFFFFF;
  --glow:rgba(213,69,26,.20);

  --nav-bg:rgba(246,244,241,.76);
  --shadow:0 40px 90px -50px rgba(19,17,16,.32);
  --shadow-sm:0 18px 40px -28px rgba(19,17,16,.24);

  --scene-opacity:.48;
  --grid-line:rgba(19,17,16,.05);
  --grain-opacity:.026;
  color-scheme: light;
}

/* Typography scale */
:root{
  --f-display:clamp(2.6rem, 6.6vw, 6.4rem);
  --f-h1:clamp(2.2rem, 5vw, 4.4rem);
  --f-h2:clamp(1.9rem, 3.6vw, 3.2rem);
  --f-h3:clamp(1.25rem, 2vw, 1.8rem);
  --f-body:clamp(.98rem, 1.05vw, 1.06rem);
  --f-sm:.86rem;
  --f-xs:.74rem;

  --gutter:clamp(1.25rem, 4vw, 3.5rem);
  --maxw:1440px;
  --nav-h:78px;
  --radius:18px;
  --radius-lg:26px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,.61,.36,1);
}

/* =====================================================================
   02 · RESET & BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--f-body);
  font-weight:350;
  line-height:1.62;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color .55s var(--ease), color .55s var(--ease);
  text-rendering:optimizeLegibility;
}
body.no-scroll{overflow:hidden}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
::selection{background:var(--accent);color:var(--accent-ink)}

/* Focus visibility */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}

.skip-link{
  position:fixed;top:-100px;left:var(--gutter);z-index:10001;
  padding:.85rem 1.4rem;background:var(--text);color:var(--bg);
  border-radius:99px;font-size:.82rem;font-weight:500;
  transition:top .3s var(--ease);
}
.skip-link:focus{top:16px}

/* =====================================================================
   03 · LAYOUT UTILITIES
   ===================================================================== */
.container{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{
  position:relative;
  padding-block:clamp(5.5rem, 11vw, 10.5rem);
}
.section--tight{padding-block:clamp(4rem, 7vw, 7rem)}
.divider{height:1px;background:var(--line);width:100%}

/* Section header pattern */
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.4rem;
  margin-bottom:clamp(3rem, 5.5vw, 5rem);
}
.sec-head__top{
  display:flex;align-items:center;gap:1rem;
}
.sec-num{
  font-size:var(--f-xs);
  font-variant-numeric:tabular-nums;
  letter-spacing:.18em;
  color:var(--text-3);
  font-weight:500;
}
.sec-label{
  font-size:var(--f-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-2);
  font-weight:500;
}
.sec-head__line{
  flex:1;height:1px;background:var(--line);
  transform-origin:left center;
}
.sec-title{
  font-size:var(--f-h2);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.035em;
  max-width:22ch;
  text-wrap:balance;
}
.sec-title em{
  font-style:normal;
  color:var(--text-3);
}
.sec-sub{
  color:var(--text-2);
  max-width:52ch;
  font-size:.98rem;
  line-height:1.7;
}
@media (min-width:900px){
  .sec-head{
    grid-template-columns:1.15fr .85fr;
    align-items:end;
    column-gap:clamp(2rem,6vw,6rem);
  }
  .sec-head__top{grid-column:1 / -1}
  .sec-head .sec-sub{padding-bottom:.4rem}
}

/* =====================================================================
   04 · TEXT ANIMATION PRIMITIVES
   ===================================================================== */
html.anim [data-anim]{opacity:0;transform:translateY(30px)}
html.anim [data-anim="scale"]{transform:translateY(20px) scale(.965)}
html.anim [data-anim="fade"]{transform:none}
html.anim [data-anim="left"]{transform:translateX(-28px)}
html.anim .sec-head__line{transform:scaleX(0)}

.word{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.14em;margin-bottom:-.14em}
.word-i{display:inline-block;will-change:transform}
html.anim .word-i{transform:translateY(115%)}

/* =====================================================================
   05 · GRAIN + VIGNETTE
   ===================================================================== */
.grain{
  position:fixed;inset:-120%;z-index:9990;pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(8) infinite;
  transition:opacity .6s var(--ease);
}
@keyframes grainShift{
  0%{transform:translate(0,0)}     10%{transform:translate(-3%,-4%)}
  20%{transform:translate(-8%,3%)} 30%{transform:translate(4%,-7%)}
  40%{transform:translate(-4%,6%)} 50%{transform:translate(-9%,-3%)}
  60%{transform:translate(6%,2%)}  70%{transform:translate(-2%,7%)}
  80%{transform:translate(3%,-6%)} 90%{transform:translate(-6%,4%)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:9989;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.5) 100%);
  opacity:0;transition:opacity .6s;
}
[data-theme="dark"] .vignette{opacity:.55}
[data-theme="light"] .vignette{
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(19,17,16,.09) 100%);
  opacity:.7;
}

/* =====================================================================
   06 · PRELOADER
   ===================================================================== */
.preloader{
  position:fixed;inset:0;z-index:10000;
  background:var(--bg);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.preloader__inner{
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  width:min(320px,72vw);
}
.preloader__mark{
  width:46px;height:46px;border-radius:50%;
  border:2px solid var(--line-2);
  border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.preloader__name{
  font-size:var(--f-xs);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--text-2);
  font-weight:500;
  padding-left:.42em;
}
.preloader__bar{
  width:100%;height:1px;background:var(--line);position:relative;overflow:hidden;
}
.preloader__fill{
  position:absolute;inset:0;transform-origin:left center;
  background:var(--text);transform:scaleX(0);
}
.preloader__pct{
  font-size:var(--f-xs);letter-spacing:.2em;color:var(--text-3);
  font-variant-numeric:tabular-nums;
}

/* =====================================================================
   07 · CUSTOM CURSOR
   ===================================================================== */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;
  opacity:0;
  transition:opacity .3s ease;
  will-change:transform;
}
.cursor-dot{
  width:5px;height:5px;background:var(--text);
  margin:-2.5px 0 0 -2.5px;
  transition:opacity .3s ease, width .3s var(--ease), height .3s var(--ease), background .3s ease;
}
.cursor{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1px solid var(--line-3);
  backdrop-filter:invert(6%);
  display:grid;place-items:center;
  transition:opacity .3s ease, width .45s var(--ease), height .45s var(--ease),
             margin .45s var(--ease), background .4s ease, border-color .4s ease;
}
.cursor__text{
  font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);opacity:0;transform:scale(.7);
  transition:opacity .3s ease, transform .4s var(--ease);
  white-space:nowrap;
}
html.has-cursor .cursor,html.has-cursor .cursor-dot{opacity:1}
html.has-cursor.cursor-hidden .cursor,html.has-cursor.cursor-hidden .cursor-dot{opacity:0}

.cursor.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;
  background:var(--accent-soft);border-color:transparent}
.cursor.is-label{width:82px;height:82px;margin:-41px 0 0 -41px;
  background:var(--text);border-color:transparent}
.cursor.is-label .cursor__text{opacity:1;transform:scale(1)}
.cursor.is-down{width:26px;height:26px;margin:-13px 0 0 -13px}
.cursor-dot.is-hover{width:0;height:0}

@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor *{cursor:none !important}
}
@media (hover:none),(pointer:coarse){
  .cursor,.cursor-dot{display:none !important}
}

/* =====================================================================
   08 · SCROLL PROGRESS
   ===================================================================== */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:9995;
  transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent-2,#FFB38A));
  pointer-events:none;
}


/* =====================================================================
   11 · BUTTONS
   ===================================================================== */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.55rem;
  border-radius:99px;
  font-size:.9rem;font-weight:500;letter-spacing:-.012em;
  border:1px solid var(--line-2);
  color:var(--text);
  overflow:hidden;
  isolation:isolate;
  will-change:transform;
  transition:color .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn__fill{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translateY(101%);
  transition:transform .62s var(--ease);
}
.btn > *{position:relative}
.btn i{font-size:.78rem;transition:transform .5s var(--ease)}

.btn--primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--primary .btn__fill{background:var(--accent)}
.btn--primary:hover{color:var(--accent-ink);border-color:var(--accent)}
.btn--primary:hover .btn__fill{transform:translateY(0)}

.btn--ghost .btn__fill{background:var(--text)}
.btn--ghost:hover{color:var(--bg);border-color:var(--text)}
.btn--ghost:hover .btn__fill{transform:translateY(0)}

.btn--sm{padding:.72rem 1.15rem;font-size:.82rem}
.btn--block{width:100%}
.btn:hover i.fa-arrow-right{transform:translateX(3px)}
.btn:hover i.fa-arrow-up-right{transform:translate(2px,-2px)}
.btn:hover i.fa-paper-plane{transform:translate(2px,-2px)}

/* Text link with animated underline + arrow */
.tlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.88rem;font-weight:450;color:var(--text);
  position:relative;padding-bottom:2px;
}
.tlink::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:right center;
  transition:transform .5s var(--ease);
}
.tlink:hover::after{transform:scaleX(0);transform-origin:left center}
.tlink i{font-size:.72rem;transition:transform .45s var(--ease)}
.tlink:hover i{transform:translate(3px,-3px)}


/* =====================================================================
   25 · RESPONSIVE
   ===================================================================== */
@media (max-width:999px){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 3.5rem);padding-bottom:4rem}
  .hero__visual{order:-1;margin-bottom:.5rem}
  .portrait{width:min(100%,400px)}
  .hero__scroll{display:none}
  .hero__socials{margin-left:0;width:100%;margin-top:.4rem}
  .hero__meta{width:100%}
}
@media (max-width:640px){
  :root{--nav-h:68px;--radius-lg:20px}
  .hero__eyebrow{font-size:.64rem;padding:.45rem .8rem .45rem .6rem}
  .hero__actions .btn{flex:1 1 auto;justify-content:center}
  .chip{font-size:.66rem;padding:.5rem .75rem}
  .stat__label{font-size:.66rem}
  .marquee__item{gap:1.6rem;padding-inline:.9rem}
  .tcard{flex:0 0 100%;margin-right:0}
}
@media (max-width:380px){
  .btn{padding:.85rem 1.15rem;font-size:.82rem}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.anim [data-anim],
  html.anim .word-i{opacity:1 !important;transform:none !important}
  .grain,.marquee__track{animation:none !important}
}

/* Print */
@media print{
  .nav,.menu,.preloader,.cursor,.cursor-dot,.grain,.vignette,.progress,.totop,.hero__gl{display:none !important}
}