:root{
  --bg:#080604;
  --bg2:#120d08;
  --bg3:#1f1309;

  --card:#15100b;
  --card2:#21160d;
  --card3:#2c1b0f;

  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);

  --text:#fffaf2;
  --muted:#d9cdb8;
  --muted-2:#f0e4d0;

  --orange:#ff7a00;
  --orange-2:#ff9d2e;
  --orange-3:#ffc87a;
  --deep-orange:#e85d04;
  --cream:#fff4df;
  --white:#ffffff;
  --dark:#080604;
  --green:#86efac;
  --red:#fb7185;

  --shadow:0 20px 56px rgba(0,0,0,.38);
  --shadow-soft:0 12px 32px rgba(0,0,0,.24);
  --shadow-card:0 16px 40px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-card-hover:0 22px 52px rgba(255,122,0,.12), 0 0 0 1px rgba(255,122,0,.2);

  --radius:20px;
  --radius-sm:14px;
  --radius-lg:24px;

  --max:1140px;
  --prose:42rem;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.2,.64,1);

  --focus-ring:0 0 0 3px #080604, 0 0 0 6px var(--orange-3);
  --section-y:clamp(3.5rem, 6vw, 5.5rem);
  --touch:48px;
  --bp-tablet:641px;
  --bp-desktop:981px;
}

/* =========================
   BASE
========================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
}

body{
  margin:0;
  width:100%;
  max-width:100%;
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:clamp(.9375rem, .25vw + .9rem, 1.0625rem);
  line-height:1.7;
  letter-spacing:-.01em;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,122,0,.22), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(255,184,102,.14), transparent 32%),
    radial-gradient(circle at 50% 42%, rgba(232,93,4,.08), transparent 38%),
    linear-gradient(180deg, var(--bg), var(--bg2) 48%, #070503);
  min-height:100vh;
  overflow-x:clip;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg, #000, transparent 78%);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 78%);
}

body::after{
  content:"";
  display:none;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}

::selection{
  background:rgba(255,122,0,.42);
  color:#fff;
}

.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:clamp(1.125rem, 4.5vw, 2.25rem);
}

main{
  width:100%;
  max-width:100%;
  margin-inline:auto;
  overflow-x:clip;
}

.page-hero .container,
.hero .container{
  max-width:var(--max);
}

.section{
  padding:var(--section-y) 0;
}

.muted{
  color:var(--muted);
  line-height:1.75;
}

.lead{
  font-size:clamp(1.05rem, 1.5vw + .85rem, 1.2rem);
  line-height:1.75;
  color:var(--muted);
  max-width:var(--prose);
}

.page-hero h2{
  max-width:22ch;
}

@media(max-width:980px){
  .page-hero h2{
    max-width:none;
  }
}

.page-hero .lead{
  margin-top:1rem;
}

strong{
  color:#fff;
}

/* =========================
   ACCESSIBILITY
========================= */

:focus{
  outline:none;
}

:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

a:focus:not(:focus-visible){
  box-shadow:none;
}

/* =========================
   HEADER / NAVIGATION
========================= */

.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:48;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s;
}

.nav-backdrop.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.nav-open{
  overflow:hidden;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
  padding-top:env(safe-area-inset-top, 0);
  background:rgba(8,6,4,.9);
  border-bottom:1px solid rgba(255,122,0,.12);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transition:
    background .35s var(--ease),
    border-color .35s var(--ease),
    box-shadow .35s var(--ease);
}

.topbar.is-scrolled{
  background:rgba(8,6,4,.96);
  border-bottom-color:rgba(255,122,0,.22);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}

.topbar.is-scrolled .nav{
  min-height:72px;
}

.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  transition:min-height .35s var(--ease);
}

@media(min-width:981px){
  .nav{
    min-height:84px;
  }
}

.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  font-weight:950;
  letter-spacing:-.04em;
  font-size:1.45rem;
  color:#fff;
}

.brand-logo{
  width:52px;
  height:52px;
  border-radius:17px;
  object-fit:cover;
  flex:0 0 auto;
  border:none;
  box-shadow:0 12px 28px rgba(255,122,0,.22);
}

.brand:focus-visible{
  outline:none;
  box-shadow:none;
}

.brand:focus-visible .brand-logo{
  box-shadow:var(--focus-ring);
}

.brand-mark{
  width:52px;
  height:52px;
  border-radius:17px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.60), transparent 28%),
    linear-gradient(135deg, var(--orange-3), var(--orange), var(--deep-orange));
  color:#fff;
  box-shadow:
    0 16px 38px rgba(255,122,0,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
  font-weight:950;
  letter-spacing:-.08em;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
}

.nav-links a{
  padding:.75rem .95rem;
  border-radius:999px;
  color:var(--muted);
  font-weight:750;
  font-size:.94rem;
  transition:
    color .25s var(--ease),
    background .25s var(--ease),
    transform .25s var(--ease);
}

.nav-links a:hover,
.nav-links a.active{
  color:#fff;
  background:rgba(255,122,0,.13);
  transform:translateY(-1px);
}

.nav-toggle{
  display:none;
  width:var(--touch);
  height:var(--touch);
  min-width:var(--touch);
  min-height:var(--touch);
  border:none;
  background:rgba(255,122,0,.14);
  border-radius:15px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
}

.nav-toggle span{
  width:18px;
  height:2px;
  background:#fff;
  border-radius:99px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.faq-trigger:focus-visible{
  outline:2px solid var(--orange-3);
  outline-offset:3px;
  border-radius:12px;
}

/* =========================
   HERO / PAGE HERO
========================= */

.hero,
.page-hero{
  position:relative;
  padding:clamp(3rem, 8vw, 5rem) 0 clamp(2rem, 5vw, 3.25rem);
}

.hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:2rem;
  width:520px;
  height:520px;
  max-width:70vw;
  max-height:70vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,0,.18), transparent 62%);
  filter:blur(14px);
  pointer-events:none;
  z-index:-1;
  transform:translateX(-50%);
  animation:orbPulse 10s ease-in-out infinite;
}

@keyframes orbPulse{
  0%, 100%{
    transform:translateX(-50%) scale(1);
    opacity:1;
  }
  50%{
    transform:translateX(-50%) scale(1.12);
    opacity:.85;
  }
}

.hero::after,
.page-hero::after{
  content:none;
}

@keyframes codeDrift{
  0%, 100%{
    transform:translateX(-15%) translateY(0);
  }
  50%{
    transform:translateX(-12%) translateY(8px);
  }
}

body.has-parallax::after{
  transform:rotate(-8deg) translateY(var(--parallax-y, 0px));
  transition:transform .15s linear;
}

.hero h1.hero-shimmer{
  color:#fff;
}

.hero-words{
  display:block;
  line-height:1.08;
}

.hero-word{
  display:inline-block;
  margin-right:.28em;
  color:#fff;
  opacity:0;
  transform:translateY(16px);
  animation:heroWordIn .7s var(--ease) forwards;
  vertical-align:top;
}

.hero-word:last-child{
  margin-right:0;
}

.hero h1.hero-shimmer .hero-word{
  text-shadow:0 0 40px rgba(255,122,0,.25);
}

.hero-word:nth-child(1){ animation-delay:.1s; }
.hero-word:nth-child(2){ animation-delay:.22s; }
.hero-word:nth-child(3){ animation-delay:.34s; }
.hero-word:nth-child(4){ animation-delay:.46s; }

html:not(.js) .hero-word{
  opacity:1;
  transform:none;
  animation:none;
}

html:not(.js) .hero-shimmer,
html:not(.js) .hero-shimmer .hero-word{
  color:#fff;
  background:none;
  -webkit-text-fill-color:currentColor;
  animation:none;
}

@keyframes heroWordIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.float{
  animation:float 6s ease-in-out infinite;
}

.float-delay-1{ animation-delay:.5s; }
.float-delay-2{ animation-delay:1s; }

.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:1.2rem;
  align-items:stretch;
  width:100%;
  max-width:100%;
}

.hero-side{
  display:grid;
  gap:1rem;
}

.eyebrow,
.kicker,
.pill{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  font-weight:900;
  color:var(--orange-3);
}

.eyebrow::before,
.kicker::before{
  content:"";
  width:32px;
  height:1px;
  background:linear-gradient(90deg, var(--orange), transparent);
}

.pill{
  padding:.55rem .8rem;
  border-radius:999px;
  background:rgba(255,122,0,.12);
  border:1px solid rgba(255,122,0,.28);
}

h1,
h2,
h3,
h4{
  margin:0;
  letter-spacing:-.055em;
  line-height:1.03;
}

h1{
  font-size:clamp(2.35rem, 5vw + 1.25rem, 4.25rem);
  font-weight:950;
  letter-spacing:-.055em;
  line-height:1.05;
}


h2{
  font-size:clamp(1.9rem, 3.5vw + .75rem, 3rem);
  font-weight:950;
  letter-spacing:-.05em;
  line-height:1.08;
}

h3{
  font-size:clamp(1.45rem, 2vw + .5rem, 2.15rem);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.12;
}

h4{
  font-size:clamp(1.2rem, 1.5vw + .6rem, 1.45rem);
  font-weight:850;
  letter-spacing:-.03em;
}

/* =========================
   CARDS / CODE CARDS
========================= */

.card,
.hero-card,
.service-card,
.price-card,
.work-card,
.step-card,
.faq-card,
.contact-card,
.stat-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(255,122,0,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.035));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
}

.card::before,
.hero-card::before,
.service-card::before,
.price-card::before,
.work-card::before,
.step-card::before,
.faq-card::before,
.contact-card::before,
.stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,122,0,.10), transparent 38%, rgba(255,184,102,.07));
}

.card::after,
.service-card::after,
.price-card::after,
.work-card::after,
.step-card::after,
.faq-card::after,
.contact-card::after{
  content:none;
}

.card > *,
.hero-card > *,
.service-card > *,
.price-card > *,
.work-card > *,
.step-card > *,
.faq-card > *,
.contact-card > *,
.stat-card > *{
  position:relative;
  z-index:1;
}

.hero-card{
  padding:clamp(1.5rem, 4vw, 2.25rem);
}

.hero-card .eyebrow{
  margin-bottom:.75rem;
}

.hero-card h1{
  margin-top:.25rem;
  padding-right:0;
}

.hero-brand-image{
  width:64px;
  height:64px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 12px 28px rgba(255,122,0,.24);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:1.25rem;
}

@media(min-width:981px){
  .hero-brand-image{
    position:absolute;
    top:1.5rem;
    right:1.5rem;
    width:72px;
    height:72px;
    margin-bottom:0;
  }

  .hero-card h1{
    padding-right:5rem;
  }
}

.hero-card p{
  font-size:1.08rem;
  line-height:1.82;
  color:var(--muted);
}

.card,
.service-card,
.price-card,
.work-card,
.step-card,
.faq-card,
.contact-card,
.stat-card{
  padding:1.4rem;
}

.card p:last-child,
.service-card p:last-child,
.price-card p:last-child,
.work-card p:last-child,
.step-card p:last-child,
.faq-card p:last-child,
.contact-card p:last-child{
  margin-bottom:0;
}

.mini{
  padding:1.2rem;
}

.mini strong{
  display:block;
  color:#fff;
  margin-bottom:.35rem;
}

.mini span{
  color:var(--muted);
  line-height:1.6;
}

/* =========================
   BUTTONS
========================= */

.btns{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}

.btn,
.btn-ghost{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:var(--touch);
  padding:1rem 1.5rem;
  border-radius:999px;
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.02em;
  border:0;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .35s var(--ease-spring),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease),
    color .35s var(--ease);
}

.btn{
  background:linear-gradient(135deg, var(--orange-3), var(--orange), var(--deep-orange));
  color:#fff;
  box-shadow:0 14px 32px rgba(255,122,0,.32);
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.35), transparent 55%);
  opacity:0;
  transition:opacity .35s var(--ease);
  z-index:-1;
}

.btn:hover::before,
.btn:focus-visible::before{
  opacity:1;
}

.btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-strong);
  color:#fff;
}

.btn-ghost::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,122,0,.12);
  opacity:0;
  transition:opacity .35s var(--ease);
  z-index:-1;
}

.btn-ghost:hover::before,
.btn-ghost:focus-visible::before{
  opacity:1;
}

.btn .btn-icon,
.btn-ghost .btn-icon{
  font-size:1rem;
  opacity:.9;
  transition:transform .35s var(--ease);
}

.btn:hover,
.btn-ghost:hover{
  transform:translateY(-3px);
}

.btn:hover,
.btn:focus-visible{
  box-shadow:0 20px 44px rgba(255,122,0,.38);
}

.btn-ghost:hover,
.btn-ghost:focus-visible{
  border-color:rgba(255,122,0,.45);
  box-shadow:0 12px 32px rgba(255,122,0,.12);
}

.btn:hover .btn-icon,
.btn-ghost:hover .btn-icon{
  transform:translateX(3px);
}

.btn:disabled,
.btn-ghost:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* =========================
   SECTION TITLES / GRIDS
========================= */

.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(1rem, 3vw, 2rem);
  margin-bottom:clamp(1.25rem, 3vw, 2rem);
  flex-wrap:wrap;
}

.section-title > div{
  flex:1 1 280px;
  min-width:0;
}

.section-title p{
  flex:1 1 220px;
  max-width:42ch;
  margin:0;
  color:var(--muted);
  line-height:1.75;
  font-size:.98rem;
}

.grid-2,
.grid-3,
.grid-4{
  display:grid;
  gap:1rem;
  width:100%;
  max-width:100%;
}

h1,
h2,
h3,
h4,
p{
  overflow-wrap:break-word;
}

.grid-2{
  grid-template-columns:repeat(2,1fr);
}

.grid-3{
  grid-template-columns:repeat(3,1fr);
}

.grid-4{
  grid-template-columns:repeat(4,1fr);
}

@media(min-width:641px) and (max-width:980px){
  .grid-3{
    grid-template-columns:repeat(2,1fr);
  }

  .grid-4{
    grid-template-columns:repeat(2,1fr);
  }
}

/* =========================
   ICONS / LISTS
========================= */

.icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:1rem;
  color:#fff;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(255,122,0,.34), rgba(255,184,102,.18));
  border:1px solid rgba(255,122,0,.25);
  font-size:1.35rem;
  box-shadow:0 14px 28px rgba(255,122,0,.12);
}

.list{
  display:grid;
  gap:.7rem;
  margin-top:1rem;
}

.list span,
.feature{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  color:var(--muted);
  line-height:1.65;
}

.list span::before,
.feature::before{
  content:"✓";
  color:var(--orange-3);
  font-weight:900;
  flex:0 0 auto;
}

/* =========================
   PRICING
========================= */

.price{
  font-size:2.2rem;
  font-weight:950;
  letter-spacing:-.06em;
  margin:.6rem 0;
  color:#fff;
}

.price small{
  font-size:.95rem;
  color:var(--muted);
  font-weight:700;
}

.highlight{
  border-color:rgba(255,122,0,.44);
  box-shadow:
    0 24px 80px rgba(255,122,0,.15),
    var(--shadow);
}

.price-card.highlight::after{
  content:"";
  position:absolute;
  inset:auto 1.2rem 0 1.2rem;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg, var(--orange-3), var(--orange), var(--cream));
}

/* =========================
   BANNERS
========================= */

.banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem, 3vw, 2rem);
  padding:clamp(1.35rem, 3vw, 2rem);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,122,0,.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,122,0,.2), transparent 30%),
    linear-gradient(135deg, rgba(255,122,0,.16), rgba(255,184,102,.08), rgba(255,255,255,.04));
  box-shadow:var(--shadow-soft);
}

.banner > div{
  flex:1 1 auto;
  min-width:0;
}

.banner .btn{
  flex:0 0 auto;
  white-space:nowrap;
}

.banner::after{
  content:none;
}

/* Trust / credibility strip */
.trust-bar{
  padding:0 0 clamp(1.5rem, 4vw, 2.5rem);
  margin-top:-.5rem;
}

.trust-bar-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.75rem;
}

.trust-item{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:1rem 1.1rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  text-align:center;
}

.trust-item strong{
  font-size:.95rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
}

.trust-item span{
  font-size:.8rem;
  color:var(--muted);
  line-height:1.45;
}

/* =========================
   PROCESS / PORTFOLIO
========================= */

.process-num{
  font-size:.85rem;
  color:var(--orange-3);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:.8rem;
}

.portfolio-media{
  height:200px;
  border-radius:var(--radius);
  background:#0b0806;
  border:1px solid rgba(255,122,0,.20);
  margin-bottom:1rem;
  position:relative;
  overflow:hidden;
  animation:portfolioGlow 8s ease-in-out infinite;
}

.portfolio-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s var(--ease);
}

.work-card:hover .portfolio-media img{
  transform:scale(1.04);
}

.portfolio-media--logo{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #ff9d2e, #ff7a00, #e85d04);
}

.portfolio-media--logo img{
  width:auto;
  height:58%;
  max-width:70%;
  object-fit:contain;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.25));
}

.card .portfolio-media--logo{
  height:160px;
  margin-bottom:1.25rem;
}

.portfolio-media:not(:has(img))::before{
  content:"</>";
  position:absolute;
  right:18px;
  bottom:14px;
  font-weight:950;
  font-size:2rem;
  color:rgba(255,255,255,.24);
  letter-spacing:-.08em;
  z-index:1;
}

.portfolio-media:not(:has(img))::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(90deg, rgba(255,255,255,.09), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 55%);
  transition:transform .4s var(--ease);
}

@keyframes portfolioGlow{
  0%, 100%{
    filter:brightness(1);
  }
  50%{
    filter:brightness(1.08);
  }
}

.work-card:hover .portfolio-media:not(:has(img))::after{
  transform:scale(1.03);
}

/* Interactive cards */
.service-card,
.price-card,
.work-card,
.step-card,
.card,
.faq-card,
.contact-card,
.stat-card,
.banner{
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease);
}

@media(hover:hover) and (pointer:fine){
  .service-card:not(.is-tilting):hover,
  .price-card:not(.is-tilting):hover,
  .work-card:not(.is-tilting):hover,
  .step-card:hover,
  .card:hover,
  .contact-card:hover,
  .stat-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,122,0,.38);
    box-shadow:var(--shadow-card-hover);
  }
}

.faq-card:hover{
  transform:none;
}

.service-card::before,
.price-card::before,
.work-card::before,
.step-card::before,
.card::before,
.faq-card::before,
.contact-card::before{
  transition:transform .55s var(--ease), opacity .35s var(--ease);
}

.service-card:not(.is-tilting):hover::before,
.price-card:not(.is-tilting):hover::before,
.work-card:not(.is-tilting):hover::before,
.step-card:hover::before,
.card:hover::before,
.faq-card.open:hover::before,
.contact-card:hover::before{
  transform:translateX(12%) skewX(-8deg);
  opacity:1.2;
}

.service-card:hover .icon,
.price-card:hover .icon,
.work-card:hover .icon,
.step-card:hover .icon,
.card:hover .icon{
  transform:scale(1.08) rotate(-4deg);
}

.icon{
  width:var(--touch);
  height:var(--touch);
  min-width:var(--touch);
  min-height:var(--touch);
  font-size:1.35rem;
  transition:transform .35s var(--ease);
}

.banner:hover{
  transform:translateY(-4px) scale(1.005);
  box-shadow:
    0 28px 70px rgba(255,122,0,.18),
    var(--shadow);
}

.service-card.is-tilting,
.work-card.is-tilting,
.price-card.is-tilting{
  transform:translateY(-6px) scale(1.01) perspective(800px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}


/* =========================
   FORMS
========================= */

.form{
  display:grid;
  gap:1rem;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
}

label{
  display:grid;
  gap:.5rem;
  color:#fff;
  font-weight:800;
  font-size:.92rem;
  letter-spacing:.02em;
}

input,
select,
textarea{
  width:100%;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:#fff;
  padding:1rem;
  outline:none;
  transition:
    border-color .25s var(--ease),
    box-shadow .25s var(--ease),
    background .25s var(--ease);
}

input::placeholder,
textarea::placeholder{
  color:rgba(232,220,200,.78);
}

select option{
  background:#17110b;
  color:#fff;
}

textarea{
  min-height:150px;
  resize:vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  border-color:rgba(255,122,0,.75);
  box-shadow:var(--focus-ring);
  background:rgba(255,255,255,.08);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid{
  border-color:rgba(251,113,133,.65);
}

.notice{
  padding:1rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.06);
  color:var(--muted-2);
}

.notice.success.is-pulse{
  animation:noticePulse .6s var(--ease);
}

@keyframes noticePulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.02); box-shadow:0 0 24px rgba(134,239,172,.25); }
}

.notice.success{
  border-color:rgba(134,239,172,.32);
  background:rgba(134,239,172,.10);
  color:#dcfce7;
}

.notice.error{
  border-color:rgba(251,113,133,.32);
  background:rgba(251,113,133,.10);
  color:#ffe4e6;
}

/* =========================
   FOOTER
========================= */

.footer{
  padding:clamp(2.5rem, 5vw, 3.5rem) 0;
  padding-bottom:calc(clamp(2.5rem, 5vw, 3.5rem) + env(safe-area-inset-bottom, 0));
  border-top:1px solid var(--line);
  margin-top:1rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,122,0,.06), transparent 32%),
    rgba(255,122,0,.02);
}

.footer .brand{
  margin-bottom:1rem;
}

.footer-grid > div > p.muted{
  max-width:36ch;
  font-size:.95rem;
  margin-top:.75rem;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:1rem;
}

.footer h4{
  font-size:1.1rem;
  margin-bottom:1rem;
}

.footer a{
  color:var(--muted);
}

.footer a:hover{
  color:#fff;
}

.footer ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.65rem;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  color:var(--muted);
}

/* =========================
   ANIMATIONS
========================= */

html.js main{
  animation:pageIn .45s var(--ease) both;
}

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

html.js .reveal{
  opacity:0;
  transform:translateY(28px) scale(.98);
  filter:blur(4px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease),
    filter .7s var(--ease);
  will-change:opacity, transform, filter;
}

html.js .reveal.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

html.js .reveal.reveal-left{
  transform:translateX(-36px) scale(.98);
}

html.js .reveal.reveal-left.is-visible{
  transform:translateX(0) scale(1);
}

html.js .reveal.reveal-right{
  transform:translateX(36px) scale(.98);
}

html.js .reveal.reveal-right.is-visible{
  transform:translateX(0) scale(1);
}

@keyframes float{
  0%, 100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-10px);
  }
}

/* Scroll to top */
.scroll-top{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:60;
  width:48px;
  height:48px;
  border:1px solid rgba(255,122,0,.35);
  border-radius:16px;
  background:linear-gradient(135deg, var(--orange-3), var(--orange), var(--deep-orange));
  color:#fff;
  font-size:1.1rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 40px rgba(255,122,0,.28);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:
    opacity .3s var(--ease),
    transform .3s var(--ease),
    visibility .3s;
}

.scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.scroll-top:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 48px rgba(255,122,0,.36);
}

.scroll-top:focus-visible{
  transform:translateY(-4px);
}

/* FAQ accordion */
.faq-card{
  padding:0;
}

.faq-card.open{
  border-color:rgba(255,122,0,.42);
  box-shadow:
    0 20px 50px rgba(255,122,0,.12),
    var(--shadow);
  transform:none;
}

.faq-card.open:hover{
  transform:none;
}

.faq-trigger{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1.4rem;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.faq-trigger h4{
  margin:0;
  flex:1;
  font-size:1.2rem;
}

.faq-chevron{
  flex:0 0 36px;
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,122,0,.14);
  border:1px solid rgba(255,122,0,.28);
  color:var(--orange-3);
  font-size:.75rem;
  transition:
    transform .35s var(--ease),
    background .35s var(--ease),
    color .35s var(--ease);
}

.faq-chevron::before{
  content:"▼";
}

.faq-card.open .faq-chevron{
  transform:rotate(180deg);
  background:linear-gradient(135deg, var(--orange-3), var(--orange));
  color:#fff;
}

.faq-panel{
  overflow:hidden;
  max-height:0;
  transition:max-height .45s var(--ease);
}

.faq-panel-inner{
  padding:0 1.4rem 1.4rem;
}

html:not(.js) .faq-panel{
  max-height:none;
}

html:not(.js) .faq-chevron{
  display:none;
}

html:not(.js) .faq-trigger{
  cursor:default;
  pointer-events:none;
}

html:not(.js) .faq-panel-inner{
  padding-top:0;
}

/* =========================
   RESPONSIVE
========================= */

/* Tablet: 2-column grids, stacked hero */
@media(min-width:641px) and (max-width:980px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .hero-side{
    grid-template-columns:repeat(3, 1fr);
    gap:.75rem;
  }

  .hero-side .hero-card.mini{
    padding:1rem;
  }

  .hero-side .hero-card.mini span{
    font-size:.88rem;
    line-height:1.5;
  }

  .grid-2{
    grid-template-columns:repeat(2, 1fr);
  }

  .grid-3,
  .grid-4{
    grid-template-columns:repeat(2, 1fr);
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
  }

  .footer-grid > div:first-child{
    grid-column:1 / -1;
  }

  .trust-bar-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .section-title{
    align-items:flex-start;
  }

  .section-title p{
    flex:1 1 100%;
    max-width:none;
  }

}

@media(min-width:981px){
  .nav-links{
    position:static !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    overflow:visible !important;
    padding:0 !important;
    border:none !important;
    box-shadow:none !important;
    pointer-events:auto !important;
    gap:.2rem !important;
  }

  .nav-links a{
    padding:.65rem .75rem;
    font-size:.86rem;
  }

  .nav-toggle{
    display:none !important;
  }

  .hero-grid{
    grid-template-columns:1.1fr .9fr;
    gap:1.25rem;
  }
}

@media(min-width:981px) and (max-width:1180px){
  .nav-links a{
    padding:.6rem .58rem;
    font-size:.82rem;
  }
}

/* Mobile + small tablet nav drawer */
@media(max-width:980px){
  .hero-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .hero-side{
    grid-template-columns:1fr;
  }

  .section-title,
  .banner{
    flex-direction:column;
    align-items:stretch;
  }

  .section-title p{
    flex:1 1 auto;
    max-width:none;
  }

  .banner .btn{
    width:100%;
    white-space:normal;
  }

  .nav{
    min-height:68px;
  }

  .nav-toggle{
    display:flex;
    z-index:51;
  }

  .nav-links{
    position:fixed;
    top:0;
    right:0;
    z-index:50;
    width:min(300px, 86vw);
    height:100dvh;
    max-height:none;
    margin:0;
    padding:calc(4.5rem + env(safe-area-inset-top, 0)) 1.15rem 1.5rem;
    flex-direction:column;
    align-items:stretch;
    gap:.3rem;
    border:none;
    border-radius:0;
    background:rgba(8,6,4,.98);
    box-shadow:-20px 0 48px rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transform:translateX(100%);
    pointer-events:none;
    transition:
      transform .4s var(--ease),
      opacity .35s var(--ease),
      visibility .35s;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .nav-links.is-open{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
    pointer-events:auto;
    border-left:1px solid rgba(255,122,0,.22);
  }

  .nav-links a{
    width:100%;
    min-height:var(--touch);
    padding:.95rem 1rem;
    font-size:.98rem;
    border-radius:12px;
  }
}

@media(max-width:640px){
  .container{
    padding-inline:1.125rem;
  }

  .section{
    padding:3rem 0;
  }

  .hero-card,
  .card,
  .service-card,
  .price-card,
  .work-card,
  .step-card,
  .faq-card,
  .contact-card,
  .stat-card{
    padding:1.15rem;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .btns{
    flex-direction:column;
    width:100%;
  }

  .btns .btn,
  .btns .btn-ghost{
    width:100%;
  }

  .service-card .btns .btn-ghost{
    width:100%;
  }

  h1{
    font-size:clamp(2.25rem, 11vw, 3.35rem);
    line-height:1.06;
  }

  h2{
    font-size:clamp(1.85rem, 8vw, 2.65rem);
  }

  h3{
    font-size:clamp(1.5rem, 6vw, 2rem);
  }

  .brand{
    font-size:1.2rem;
    gap:.65rem;
  }

  .brand-logo,
  .brand-mark{
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .portfolio-media{
    height:min(42vw, 200px);
    min-height:150px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
  }

  .trust-bar-grid{
    grid-template-columns:1fr 1fr;
    gap:.55rem;
  }

  .trust-item{
    padding:.85rem .75rem;
  }

  .trust-item strong{
    font-size:.88rem;
  }

  .trust-item span{
    font-size:.75rem;
  }

  .scroll-top{
    right:max(1rem, env(safe-area-inset-right, 1rem));
    bottom:max(1rem, env(safe-area-inset-bottom, 1rem));
  }
}

/* Large screens: keep content centred */
@media(min-width:1400px){
  :root{
    --max:1200px;
  }
}

/* =========================
   REDUCED MOTION
========================= */

@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;
  }

  html.js .reveal,
  html.js .reveal-left,
  html.js .reveal-right{
    opacity:1;
    transform:none;
    filter:none;
  }

  .hero-word{
    opacity:1;
    transform:none;
    animation:none;
  }

  .faq-panel{
    max-height:none !important;
  }

  .scroll-top{
    transition:none;
  }
}