@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Sans:wght@300;400;500;600&family=DM+Mono:wght@300;400;500&display=swap');

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Backgrounds */
  --ink:      #0d0d0d;
  --ink-2:    #111113;
  --ink-3:    #18191c;
  --ink-4:    #1f2023;
  --glass:    rgba(255,255,255,0.04);

  /* Lines */
  --rule:     rgba(255,255,255,0.07);
  --rule-b:   rgba(255,255,255,0.14);

  /* Text */
  --cream:    #f5f0e8;
  --dim:      #9a969f;       
  --ghost:    #565060;       

  
  --coral:    #c8f542;
  --coral-lt: #d8f96e;
  --coral-dk: #9dc518;
  --coral-dim:rgba(200,245,66,0.10);
  --coral-glow:0 0 32px rgba(200,245,66,0.22),0 0 80px rgba(200,245,66,0.07);
  --coral-grad:linear-gradient(120deg,#c8f542 0%,#d8f96e 55%,#9dc518 100%);

  /* Fonts */
  --fd:'Bebas Neue',sans-serif;
  --fb:'Instrument Sans',sans-serif;
  --fm:'DM Mono',monospace;

  /* Layout */
  --hh:64px;
  --r:6px;
  --rl:12px;
  --max:1140px;
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 48px)}

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--fb);
  font-size:1rem;
  line-height:1.7;
  overflow-x:hidden;
  cursor:crosshair;
}

a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}

::selection{background:var(--coral);color:#0a0a0a}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--coral);border-radius:2px}

/* ── .Beautiful — gradient text ───────────────────────────── */

.Beautiful{
  background:var(--coral-grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-style:normal;
}

/* Small CTA anchor spinner — brief centre-screen flash */

#cta-spinner{
  position:fixed;inset:0;z-index:9998;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,13,13,0.55);
  backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .18s;
}
#cta-spinner.active{opacity:1;pointer-events:all}

/* ════════════════════════════════════════════
   PAGE TRANSITION LOADER
════════════════════════════════════════════ */
#page-transition{
  position:fixed;inset:0;z-index:10000;
  background:var(--ink);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:1.6rem;
  opacity:0;pointer-events:none;
  transition:opacity .22s;
}
#page-transition.active{opacity:1;pointer-events:all}

/* Spinner ring */
.pt-spinner{
  width:36px;height:36px;
  border:2px solid var(--rule);
  border-top-color:var(--coral);
  border-radius:50%;
  animation:ptSpin .8s linear infinite;
}
@keyframes ptSpin{
  to{transform:rotate(360deg)}
}

.pt-bars{
  display:flex;flex-direction:column;gap:10px;
  width:min(280px,72vw);
}
.pt-bar{
  height:8px;border-radius:4px;
  background:linear-gradient(90deg,var(--ink-3) 25%,var(--ink-4) 50%,var(--ink-3) 75%);
  background-size:400% 100%;
  animation:skShimmer 1.3s infinite ease-in-out;
}
.pt-bar:nth-child(1){width:100%}
.pt-bar:nth-child(2){width:72%;animation-delay:.1s}
.pt-bar:nth-child(3){width:48%;animation-delay:.22s}

.pt-label{
  font-family:var(--fm);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ghost);opacity:.45;
}

/* Skeleton Loader */

#skeleton-overlay{
  position:fixed;inset:0;z-index:9999;
  background:var(--ink);
  padding:90px 8% 40px;
  display:flex;flex-direction:column;gap:18px;
  opacity:0;pointer-events:none;
  transition:opacity .22s;
}
#skeleton-overlay.active{opacity:1;pointer-events:all}

.sk-bar{
  height:15px;border-radius:4px;
  background:linear-gradient(90deg,var(--ink-3) 25%,var(--ink-4) 50%,var(--ink-3) 75%);
  background-size:400% 100%;
  animation:skShimmer 1.3s infinite ease-in-out;
}
.sk-bar:nth-child(1){width:42%;height:52px;border-radius:8px}
.sk-bar:nth-child(2){width:60%}
.sk-bar:nth-child(3){width:36%}
.sk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
.sk-card{
  height:175px;border-radius:var(--rl);
  background:linear-gradient(90deg,var(--ink-3) 25%,var(--ink-4) 50%,var(--ink-3) 75%);
  background-size:400% 100%;
  animation:skShimmer 1.3s infinite ease-in-out;
}
.sk-card:nth-child(2){animation-delay:.1s}
.sk-card:nth-child(3){animation-delay:.2s}
.sk-card:nth-child(4){animation-delay:.3s}
@keyframes skShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* HEADER */
/* HEADER */

.site-header{
  position:fixed;inset:0 0 auto;
  z-index:1000;height:var(--hh);
  background:rgba(10,10,10,0.82);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-bottom:1px solid var(--rule);
  transition:border-color .4s, box-shadow .4s;
}
.site-header.scrolled{
  border-color:var(--rule-b);
  box-shadow:0 1px 0 var(--rule-b),0 8px 40px rgba(0,0,0,.7);
}

.header-container{
  width:100%;
  padding:0 2.5rem;
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
}

/* Logo */
.logo{
  font-family:var(--fd);font-size:2.1rem;
  letter-spacing:.08em;line-height:1;
  position:relative;z-index:1201;
  transition:color .2s;
  font-style:normal;
}
.logo span{
  font-style:normal;
}
/* Coral underline sweeps in */
.logo::after{
  content:'';display:block;
  height:2px;width:0;border-radius:2px;
  background:var(--coral-grad);
  transition:width .4s cubic-bezier(.16,1,.3,1);
}
.logo:hover::after{width:100%}

/* ── Hamburger ──────────────────────────── */
.menu-toggle{
  display:flex;align-items:center;justify-content:center;
  background:none;
  border:1px solid var(--rule);
  color:var(--cream);
  width:42px;height:42px;
  border-radius:var(--r);
  cursor:pointer;font-size:0;
  position:relative;z-index:1201;
  flex-shrink:0;
  transition:border-color .2s,background .2s;
}
.menu-toggle:hover{border-color:var(--coral);background:var(--coral-dim)}
/* 3 lines: ::before (top), .burger-mid (middle), ::after (bottom) */
.menu-toggle::before,.menu-toggle::after,.menu-toggle .burger-mid{
  content:'';display:block;
  width:18px;height:1.5px;
  background:currentColor;border-radius:2px;
  position:absolute;
  left:50%;margin-left:-9px;
  transition:transform .35s,opacity .25s,top .35s;
}
.menu-toggle::before    {top:13px}
.menu-toggle .burger-mid{top:20px;opacity:1;transform:none}
.menu-toggle::after     {top:27px}
/* Animate to X */
.menu-toggle.open::before    {transform:rotate(45deg);top:20px}
.menu-toggle.open .burger-mid{opacity:0;transform:scaleX(0)}
.menu-toggle.open::after     {transform:rotate(-45deg);top:20px}

/* ── Nav Panel ──────────────────────────── */
.nav{
  position:fixed;top:var(--hh);right:0;
  width:280px;
  background:#080809;
  border:1px solid var(--rule);border-top:none;
  border-radius:0 0 var(--rl) var(--rl);
  padding:1rem 0;
  transform:translateY(-16px);opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .28s;
  z-index:1200;
  box-shadow:0 40px 80px rgba(0,0,0,.9);
}
.nav.open{transform:translateY(0);opacity:1;pointer-events:auto}

.nav ul{display:flex;flex-direction:column}
.nav ul li{border-bottom:1px solid var(--rule)}
.nav ul li:last-child{border-bottom:none}

.nav ul li a{
  font-family:var(--fm);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ghost);
  padding:.95rem 1.6rem;
  display:flex;align-items:center;gap:.8rem;
  position:relative;
  transition:color .2s,padding-left .28s,background .2s;
}
.nav ul li a:hover{
  color:var(--cream);
  padding-left:2.2rem;
  background:rgba(255,255,255,0.03);
}

/* Coral dot */

.nav ul li a::before{
  content:'';
  width:4px;height:4px;border-radius:50%;
  background:var(--coral);
  flex-shrink:0;
  transform:scale(0);
  transition:transform .2s;
}
.nav ul li a:hover::before{transform:scale(1)}

/* Nav index numbers */

.nav ul li a::after{
  content:attr(data-idx);
  font-family:var(--fm);font-size:.55rem;
  color:var(--ghost);opacity:.4;
  margin-left:auto;
}

.nav-backdrop{
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.7);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
  backdrop-filter:blur(4px);
}
.nav-backdrop.open{opacity:1;pointer-events:auto}

main{padding-top:var(--hh)}

/* Hero Reveal */

.hero-reveal{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:6rem 2rem 2rem;
  position:relative;overflow:hidden;
}

/* Fine grid */

.hero-reveal::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 30%,transparent 100%);
  pointer-events:none;opacity:.45;
}

/* Coral glow orb — top center, 10% dimmer */

.hero-orb{
  position:absolute;
  width:800px;height:800px;
  top:-350px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(200,245,66,.055) 0%,transparent 60%);
  pointer-events:none;
  animation:breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe{
  from{transform:translateX(-50%) scale(1);opacity:.6}
  to  {transform:translateX(-50%) scale(1.18);opacity:.9}
}

/* Side accent lines */

.hero-line-l,.hero-line-r{
  position:absolute;
  top:0;bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,var(--rule) 20%,var(--rule) 80%,transparent);
  pointer-events:none;
}
.hero-line-l{left:clamp(1rem,6vw,5rem)}
.hero-line-r{right:clamp(1rem,6vw,5rem)}

/* Eyebrow shown in hero */

.hero-eyebrow{
  font-family:var(--fm);font-size:.65rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--coral);
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:1.6rem;
  position:relative;z-index:1;
  animation:fadeUp .8s .05s ease forwards;opacity:0;
  font-weight:400;
}
.hero-eyebrow::before,.hero-eyebrow::after{
  content:'';display:inline-block;
  width:28px;height:1px;background:var(--coral);opacity:.6;
}
/* Eyebrow below floating icons  */

.hero-eyebrow.below-icons{
  animation:none;opacity:1;
  display:block;
  text-align:center;
  font-weight:300;
  font-size:.62rem;
  letter-spacing:.2em;
  color:var(--dim);
  margin:0 auto 2rem;
  padding:0 2rem;
}
.hero-eyebrow.below-icons::before,
.hero-eyebrow.below-icons::after{ display:none; }

.hero-reveal h2{
  font-family:var(--fd);
  font-size:clamp(5rem,13vw,12rem);
  line-height:.88;letter-spacing:.01em;
  color:var(--cream);
  position:relative;z-index:1;
  animation:heroReveal 1.1s cubic-bezier(.16,1,.3,1) .1s forwards;
  opacity:0;
}

@keyframes heroReveal{
  from{opacity:0;transform:translateY(60px) skewY(2deg)}
  to  {opacity:1;transform:translateY(0) skewY(0)}
}

.hero-text{
  max-width:540px;margin-top:2rem;
  font-size:1.05rem;color:var(--dim);
  font-weight:300;line-height:1.85;
  position:relative;z-index:1;
  animation:fadeUp .9s .35s ease forwards;opacity:0;
}

/* CTA pill */

.hero-cta{
  margin-top:2.6rem;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.8rem 2rem;
  background:var(--coral-dim);
  border:1px solid rgba(200,245,66,.3);
  border-radius:100px;
  font-family:var(--fm);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--coral);
  position:relative;z-index:1;
  animation:fadeUp .9s .5s ease forwards;opacity:0;
  transition:background .28s,box-shadow .28s,transform .28s,border-color .28s;
  cursor:pointer;
}
.hero-cta:hover{
  background:rgba(200,245,66,.16);
  border-color:rgba(200,245,66,.5);
  box-shadow:var(--coral-glow);
  transform:translateY(-3px);
}
.hero-cta-arrow{
  font-size:1rem;
  transition:transform .28s;
}
.hero-cta:hover .hero-cta-arrow{transform:translateY(3px)}

/* Scroll indicator */

.scroll-hint{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  z-index:1;
  animation:fadeUp .9s .7s ease forwards;opacity:0;
}
.scroll-hint span{
  font-family:var(--fm);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ghost);
}
.scroll-dot{
  width:1px;height:36px;
  background:linear-gradient(to bottom,var(--coral),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{opacity:.3;transform:scaleY(1)}
  50%{opacity:1;transform:scaleY(1.15)}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Floating Icons */

.floating-icons-container{
  width:100%;overflow:hidden;
  padding:1.5rem 0 5rem;
  -webkit-mask-image:linear-gradient(to right,transparent,black 9%,black 91%,transparent);
  mask-image:linear-gradient(to right,transparent,black 9%,black 91%,transparent);
}

.floating-icons-track{
  display:flex;align-items:center;gap:2.2rem;
  width:max-content;
  animation:scrollRTL 14s linear infinite;
  will-change:transform;
}
.floating-icons-container:hover .floating-icons-track{animation-play-state:paused}
.floating-icons-container>img.float-icon{display:none}


.float-icon{
  width:48px;height:48px;
  flex-shrink:0;
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  object-fit:contain;
  filter:grayscale(1) invert(1) brightness(0.22);
  box-shadow:none;
  transition:filter .35s,transform .35s;
  cursor:pointer;
}
.float-icon:hover{
  filter:grayscale(0) drop-shadow(0 0 10px var(--coral));
  transform:scale(1.2) translateY(-6px);
}

@keyframes scrollRTL{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* Stats Bar */

.stats-bar{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:1.6rem 2rem;
  background:var(--ink);
  overflow:hidden;
  position:relative;
}
.stats-bar::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 10%,var(--coral) 50%,transparent 90%);
  opacity:.18;
}
.stats-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1rem;text-align:center;
}
.stat-num{
  font-family:var(--fd);
  font-size:clamp(1.4rem,2vw,2rem);
  letter-spacing:.02em;line-height:1;
  color:#545456;
  opacity:1;
}
.stat-label{
  font-family:var(--fm);font-size:.55rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:#383838;margin-top:.3rem;
  opacity:1;
}

/* about */

.about{
  max-width:var(--max);margin:0 auto;
  padding:8rem 2rem;
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:1fr 1fr;
  gap:5rem;align-items:center;
}
.about-left h2{
  font-family:var(--fd);
  font-size:clamp(1.8rem,3vw,2.6rem);
  letter-spacing:.04em;line-height:1.0;
  margin-bottom:1.8rem;
  text-align:center;
  white-space:nowrap;
}
.about-left p{color:var(--dim);font-size:1rem;margin-bottom:.8rem;max-width:480px;text-align:center}
.about-tagline{
  font-family:var(--fm);font-size:.75rem;
  letter-spacing:.08em;color:var(--coral);
  margin-top:1.2rem;
  text-align:center;
  font-weight:300;
  font-style:italic;
}

/* Right side — stacked mini-tags */

.about-tags{
  display:flex;flex-direction:column;gap:1rem;
}
.about-tag{
  display:flex;align-items:center;gap:1rem;
  padding:1.2rem 1.4rem;
  background:var(--glass);
  border:1px solid var(--rule);
  border-radius:var(--rl);
  transition:border-color .3s,background .3s,transform .3s;
}
.about-tag:hover{
  border-color:rgba(200,245,66,.25);
  background:rgba(200,245,66,.04);
  transform:translateX(6px);
}
.tag-icon{
  width:34px;height:34px;border-radius:8px;
  background:var(--coral-dim);
  border:1px solid rgba(200,245,66,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;flex-shrink:0;
}
.about-tag strong{
  font-family:var(--fm);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);display:block;margin-bottom:.15rem;
}
.about-tag span{font-size:.82rem;color:var(--dim)}

/* projects */

.projects-section{
  padding:5rem 2rem 8rem;
  border-top:1px solid var(--rule);
  text-align:center;
}
.section-head{
  max-width:var(--max);margin:0 auto 3.5rem;
  display:flex;flex-direction:column;align-items:center;
  gap:.6rem;text-align:center;
}
.section-head h2{
  font-family:var(--fd);
  font-size:clamp(2rem,3.5vw,3rem);
  letter-spacing:.04em;
  text-align:center;width:100%;
}
.section-head p{
  font-family:var(--fm);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ghost);
  text-align:center;width:100%;
}

.projects{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:auto auto;
  gap:1.2rem;
  max-width:var(--max);margin:0 auto;
}

.projects .project-card:first-child{
  grid-row:span 1;
}
.projects .project-card:first-child .project-card-img{height:420px}

/* ── Card ───────────────────────────────── */
.project-card{
  background:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:var(--rl);
  overflow:hidden;
  position:relative;cursor:pointer;
  display:flex;flex-direction:column;
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .45s;
}
.project-card:hover{
  transform:translateY(-8px);
  border-color:rgba(200,245,66,.3);
  box-shadow:0 30px 70px rgba(0,0,0,.6),var(--coral-glow);
}
.project-card::after{
  content:'↗';
  position:absolute;top:.85rem;right:.85rem;
  font-size:.8rem;color:var(--coral);
  background:var(--coral-dim);
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  opacity:0;transform:scale(.5) rotate(-30deg);
  transition:opacity .3s,transform .35s;z-index:3;
}
.project-card:hover::after{opacity:1;transform:scale(1) rotate(0deg)}

.project-card-img{
  width:100%;height:200px;
  overflow:hidden;flex-shrink:0;position:relative;
}
.project-card-img img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.82) saturate(.9);
  transition:filter .6s,transform .7s cubic-bezier(.16,1,.3,1);
}
.project-card:hover .project-card-img img{
  filter:grayscale(0) brightness(1) saturate(1.05);
  transform:scale(1.07);
}
/* Shine */
.project-card-img::after{
  content:'';position:absolute;
  inset:0;left:-80%;width:50%;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  pointer-events:none;z-index:4;
}
.project-card:hover .project-card-img::after{animation:shine .65s .05s ease both}
@keyframes shine{from{left:-80%}to{left:130%}}

.project-card-body{padding:1.4rem 1.4rem 1.6rem;flex:1;display:flex;flex-direction:column;text-align:left}
.project-card-body h3{
  font-family:var(--fd);font-size:1.5rem;
  letter-spacing:.06em;
  color:var(--coral);
  margin-bottom:.4rem;
  transition:opacity .25s;
  text-align:left;
}
.project-card:hover .project-card-body h3{opacity:.85}
.project-card-body p{color:var(--dim);font-size:.87rem;line-height:1.65;flex:1;text-align:left}

/* ════════════════════════════════════════════
   WHY CHOOSE US — card grid
════════════════════════════════════════════ */
.why-choose{
  background:var(--ink-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:8rem 2rem;
  counter-reset:item;
  position:relative;overflow:hidden;
}
/* Big background text */
.why-choose::before{
  content:'WHY';
  font-family:var(--fd);
  font-size:clamp(10rem,22vw,20rem);
  color:rgba(255,255,255,.018);
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;letter-spacing:.1em;white-space:nowrap;
  line-height:1;
}

.why-inner{max-width:var(--max);margin:0 auto}
.why-inner>h2{
  font-family:var(--fd);
  font-size:clamp(2rem,3.5vw,3rem);
  letter-spacing:.04em;margin-bottom:3.5rem;
  text-align:center;
}

.why-choose ul{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(195px,1fr));
  gap:1.2rem;
  counter-reset:item;
}

.why-choose ul li{
  background:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:var(--rl);
  padding:2rem 1.6rem 1.8rem;
  position:relative;overflow:hidden;
  counter-increment:item;
  display:flex;flex-direction:column;gap:.5rem;
  transition:transform .35s,border-color .35s,box-shadow .35s,background .35s;
}
/* Top coral bar */
.why-choose ul li::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--coral-grad);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.why-choose ul li:hover{
  transform:translateY(-7px);
  border-color:rgba(200,245,66,.22);
  background:var(--ink-4);
  box-shadow:0 20px 50px rgba(0,0,0,.45),var(--coral-glow);
}
.why-choose ul li:hover::before{transform:scaleX(1)}
/* Number badge */
.why-choose ul li::after{
  content:counter(item,decimal-leading-zero);
  font-family:var(--fm);font-size:.58rem;
  color:var(--coral);opacity:.4;
  position:absolute;top:.9rem;right:1rem;
  letter-spacing:.06em;
}
.why-choose h4{
  font-family:var(--fm);font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--coral);
}
.why-choose li p{color:var(--dim);font-size:.87rem;line-height:1.65}

/* ════════════════════════════════════════════
   PROCESS
════════════════════════════════════════════ */
.process{
  max-width:var(--max);margin:0 auto;
  padding:8rem 2rem;
  border-top:1px solid var(--rule);
  text-align:center;
}
.process>h2{
  font-family:var(--fd);
  font-size:clamp(1.8rem,3vw,2.8rem);
  letter-spacing:.04em;margin-bottom:.4rem;
  text-align:center;
}
.process>p{
  font-family:var(--fm);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ghost);margin-bottom:4rem;
  text-align:center;
}
.process-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;position:relative;
}
/* Connecting line */
.process-steps::before{
  content:'';position:absolute;
  top:31px;left:12%;right:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--coral),transparent);
  opacity:.2;pointer-events:none;
}
.step{
  display:flex;flex-direction:column;align-items:center;
  padding:0 1.2rem 2rem;text-align:center;
}
.step-num{
  width:62px;height:62px;border-radius:50%;
  background:var(--ink-3);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-size:1.5rem;
  color:var(--coral);margin-bottom:1.4rem;
  position:relative;z-index:1;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.step:hover .step-num{
  background:var(--coral-dim);
  border-color:rgba(200,245,66,.4);
  box-shadow:var(--coral-glow);
}
.step h4{
  font-family:var(--fm);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream);margin-bottom:.5rem;
}
.step p{color:var(--dim);font-size:.85rem;line-height:1.65;max-width:200px}

/* ════════════════════════════════════════════
   FAQ
════════════════════════════════════════════ */
.faq{
  padding:8rem 2rem;
  border-top:1px solid var(--rule);
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1.5fr;
  gap:6rem;align-items:start;
}
.faq-left h2{
  font-family:var(--fd);
  font-size:clamp(2rem,3.5vw,3rem);
  letter-spacing:.04em;margin-bottom:.8rem;
  position:sticky;top:calc(var(--hh)+2rem);
  text-align:center;
}
.faq .intro-text{
  font-family:var(--fm);font-size:.65rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ghost);
  text-align:center;
}
.faq-right{}
.faq h4{
  font-family:var(--fm);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--coral);
  margin-top:2.4rem;margin-bottom:.65rem;
  padding-left:1.1rem;border-left:2px solid var(--coral);
}
.faq h4:first-child{margin-top:0}
.faq p{color:var(--dim);font-size:.95rem;line-height:1.85;padding-left:1.1rem}

/* Call to Action */

.cta-card{
  margin:0 auto 8rem;
  max-width:620px;padding:5rem 2.5rem;
  text-align:center;
  background:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:var(--rl);
  position:relative;overflow:hidden;
}
.cta-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% -10%,rgba(200,245,66,.08),transparent 60%);
  pointer-events:none;
}
.cta-card::after{
  content:'';position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:140px;height:1px;
  background:linear-gradient(90deg,transparent,var(--coral),transparent);
}
.cta-card h2{
  font-family:var(--fd);
  font-size:clamp(2.2rem,5vw,3.2rem);
  letter-spacing:.06em;margin-bottom:.8rem;position:relative;
}
.cta-tagline{
  color:var(--ghost);
  font-size:.78rem;
  font-family:var(--fm);
  letter-spacing:.06em;
  margin-top:1.2rem;
  position:relative;
  text-align:center;
}
.cta-card ul{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;position:relative}
.cta-card li{list-style:none}
.cta-card li a{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;
  border:1px solid rgba(255,255,255,0.07);
  border-radius:50%;
  background:rgba(255,255,255,0.03);
  transition:
    border-color .3s ease,
    background   .3s ease,
    transform    .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow   .3s ease;
}
.cta-card li a:hover{
  border-color:rgba(200,245,66,.55);
  background:rgba(200,245,66,.07);
  transform:translateY(-8px);
  box-shadow:
    0 0 18px rgba(200,245,66,.2),
    0 12px 30px rgba(0,0,0,.4);
}
.social-icons{
  width:22px;height:22px;
  filter:invert(1) brightness(.32);
  transition:filter .3s ease, transform .3s ease;
  pointer-events:none;
}
.cta-card li a:hover .social-icons{
  filter:invert(1) brightness(.08) sepia(1) hue-rotate(50deg) saturate(10);
  transform:scale(1.1);
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
footer{
  border-top:1px solid var(--rule);
  padding:3rem 2rem;
  background:var(--ink-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  text-align:center;
}
footer nav ul{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}
footer nav ul li a{
  font-family:var(--fm);font-size:.65rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:#424244;
  transition:color .2s;
}
footer nav ul li a:hover{color:var(--coral)}
footer .footer-copy{
  font-size:.68rem;font-family:var(--fm);
  letter-spacing:.1em;
  color:#303032;
  opacity:1;
  font-weight:500;
}

/* ════════════════════════════════════════════
   SCROLL REVEAL
════════════════════════════════════════════ */
[data-reveal]{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
[data-reveal].revealed{
  opacity:1;
  transform:translateY(0);
}
/* Stagger siblings */
[data-reveal]:nth-child(2){transition-delay:.1s}
[data-reveal]:nth-child(3){transition-delay:.2s}
[data-reveal]:nth-child(4){transition-delay:.3s}
[data-reveal]:nth-child(5){transition-delay:.4s}
[data-reveal]:nth-child(6){transition-delay:.5s}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media(max-width:1000px){
  .header-container{padding:0 1.5rem}
  .projects{grid-template-columns:1fr 1fr}
  .projects .project-card:first-child{grid-row:unset}
  .projects .project-card:first-child .project-card-img{height:200px}
  .about{grid-template-columns:1fr;gap:3rem}
  .faq{grid-template-columns:1fr;gap:3rem}
  .faq-left h2{position:static}
}
@media(max-width:720px){
  .header-container{padding:0 1.25rem}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .projects{grid-template-columns:1fr}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-steps::before{display:none}
  .why-choose ul{grid-template-columns:repeat(2,1fr)}
  .section-head{flex-direction:column;gap:.5rem}
  .footer{flex-direction:column;text-align:center}
  footer{justify-content:center}
}
@media(max-width:480px){
  .header-container{padding:0 1rem}
  .hero-reveal h2{font-size:clamp(4rem,16vw,6rem)}
  .why-choose ul{grid-template-columns:1fr}
  .process-steps{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .sk-cards{grid-template-columns:repeat(2,1fr)}
}