/* ============================================================
   SLAYY STUDIO — Local Service / Contractors
   Brand: coral + turquoise, Inter, premium scroll animation
   ============================================================ */

:root{
  --coral:#FF5A4E;
  --coral-2:#FF8475;
  --teal:#3FC1C9;
  --teal-2:#7BD8DC;
  --ink:#0B1220;
  --ink-2:#1E293B;
  --muted:#64748B;
  --line:#E5E7EB;
  --bg:#FFFFFF;
  --cream:#FFF7F2;
  --grad: linear-gradient(135deg,#FF5A4E 0%,#FF8475 40%,#3FC1C9 100%);
  --grad-soft: linear-gradient(135deg,#FFEFEC 0%,#E8FAFB 100%);
  --shadow: 0 24px 60px -20px rgba(15,23,42,.18);
  --shadow-lg: 0 40px 100px -30px rgba(255,90,78,.35);
  --r: 22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.6;
  color:var(--ink-2); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:0 24px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif; color:var(--ink); letter-spacing:-.02em; line-height:1.05; margin:0}
h1{font-size:clamp(2.4rem,6.2vw,5.2rem); font-weight:700}
h2{font-size:clamp(2rem,4.4vw,3.5rem); font-weight:700}
h3{font-size:clamp(1.25rem,2vw,1.6rem); font-weight:600; line-height:1.2}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--coral)}
.eyebrow::before{content:""; width:24px; height:2px; background:var(--coral); display:inline-block}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--muted); max-width:60ch}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; font-weight:600; font-size:.95rem; transition:transform .25s ease, box-shadow .25s ease; cursor:pointer; border:none; white-space:nowrap}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(11,18,32,.45)}
.btn-coral{background:var(--grad); color:#fff; box-shadow:var(--shadow-lg)}
.btn-coral:hover{transform:translateY(-2px)}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; margin-top:10px; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid rgba(15,23,42,.06)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.brand{display:inline-flex; align-items:center}
.brand img{height:44px; width:auto; display:block; margin:-5px 0}
.footer .brand img{filter:brightness(1.05)}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{font-size:.93rem; color:var(--ink-2); font-weight:500; position:relative}
.nav-links a:hover{color:var(--coral)}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--grad); border-radius:2px}
.nav-cta{display:flex; gap:10px; align-items:center}
.hamburger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer; align-items:center; justify-content:center}
.hamburger span{display:block; width:18px; height:2px; background:var(--ink); position:relative}
.hamburger span::before,.hamburger span::after{content:""; position:absolute; left:0; right:0; height:2px; background:var(--ink)}
.hamburger span::before{top:-6px} .hamburger span::after{top:6px}

@media (max-width:920px){
  .nav-links, .nav-cta .btn{display:none}
  .hamburger{display:inline-flex}
  .nav-mobile{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); padding:18px 24px; flex-direction:column; gap:14px}
  .nav-mobile.open{display:flex}
  .nav-mobile a{font-weight:600; padding:8px 0}
}
@media (min-width:921px){ .nav-mobile{display:none !important} }

/* ---------- Hero ---------- */
.hero{position:relative; padding:80px 0 100px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-200px -20% auto auto; width:780px; height:780px; background:radial-gradient(circle, rgba(255,90,78,.16), transparent 60%); filter:blur(40px); pointer-events:none}
.hero::after{content:""; position:absolute; left:-12%; bottom:-220px; width:680px; height:680px; background:radial-gradient(circle, rgba(63,193,201,.18), transparent 60%); filter:blur(40px); pointer-events:none}
.hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(440px,.9fr); gap:60px; align-items:center}
.hero h1 .word{display:inline-block; opacity:0; transform:translateY(40px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .word:nth-child(1){animation-delay:.1s}
.hero h1 .word:nth-child(2){animation-delay:.18s}
.hero h1 .word:nth-child(3){animation-delay:.26s}
.hero h1 .word:nth-child(4){animation-delay:.34s}
.hero h1 .word:nth-child(5){animation-delay:.42s}
.hero h1 .word:nth-child(6){animation-delay:.5s}
@keyframes rise{to{opacity:1; transform:none}}

.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}
.hero-meta{display:flex; gap:24px; margin-top:30px; align-items:center; flex-wrap:wrap}
.avatars{display:flex}
.avatars span{width:42px; height:42px; border-radius:50%; border:3px solid #fff; background:var(--grad-soft); margin-left:-10px; overflow:hidden; box-shadow:0 4px 12px rgba(15,23,42,.12)}
.avatars span img{width:100%; height:100%; object-fit:cover; display:block}
.avatars span:first-child{margin-left:0}
.stars{color:#FFB400; letter-spacing:2px}
.hero-meta-text{font-size:.9rem; color:var(--muted)}
.hero-meta-text strong{color:var(--ink)}

.hero-visual{position:relative; aspect-ratio:1/1; border-radius:32px; background:var(--grad); padding:24px; box-shadow:var(--shadow-lg)}
.hero-visual .browser{background:#fff; border-radius:18px; height:100%; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.2)}
.hero-visual .browser-bar{display:flex; gap:6px; padding:12px; background:#F8FAFC; border-bottom:1px solid var(--line)}
.hero-visual .browser-bar i{width:11px; height:11px; border-radius:50%; background:#E2E8F0}
.hero-visual .browser-body{padding:24px; display:flex; flex-direction:column; gap:14px}
.hero-visual .skel{height:14px; background:linear-gradient(90deg,#F1F5F9,#E2E8F0,#F1F5F9); background-size:200% 100%; border-radius:6px; animation:shimmer 1.6s infinite}
.hero-visual .skel.lg{height:48px; background:var(--grad); animation:none; opacity:.92}
.hero-visual .skel.short{width:60%}
.hero-visual .skel.med{width:80%}
.hero-visual .skel.btn{height:38px; width:140px; background:var(--ink); animation:none; border-radius:999px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.float-badge{position:absolute; background:#fff; border-radius:18px; padding:14px 18px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:center; animation:float 4s ease-in-out infinite}
.float-badge .ico{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-size:1.2rem}
.float-badge .ico.coral{background:#FFEEEC; color:var(--coral)}
.float-badge .ico.teal{background:#E8FAFB; color:var(--teal)}
.float-badge b{display:block; font-size:.95rem; color:var(--ink)}
.float-badge span{font-size:.8rem; color:var(--muted)}
.float-badge.tl{top:8%; left:-6%; animation-delay:0s}
.float-badge.br{bottom:10%; right:-6%; animation-delay:1.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Stack the hero earlier (1100px instead of 920px) so the right-side
   illustration cards never get squeezed into a too-narrow column —
   they jump straight to the full-width single-column layout instead. */
@media (max-width:1180px){
  .hero{padding:50px 0 70px}
  /* Switch to a flex column and use display:contents on the text
     wrapper so we can reorder hero-stack to sit between the CTAs
     and the stars/avatars row. Reset the inherited 60px grid gap
     so each element keeps its own natural spacing. */
  .hero-grid{display:flex; flex-direction:column; align-items:stretch; gap:0}
  .hero-grid > div:not(.hero-stack){display:contents}
  .hero-grid .eyebrow{order:1}
  .hero-grid h1{order:2}
  .hero-grid .lead{order:3}
  .hero-grid .hero-cta{order:4}
  .hero-grid .hero-stack{order:5}
  .hero-grid .hero-meta{order:6}
  .float-badge.tl{left:0%}
  .float-badge.br{right:0%}
}

/* ---------- Hero stacked result cards ---------- */
.hero-stack{position:relative; aspect-ratio:1/1; perspective:1200px;
  width:100%;     /* required for container-type:inline-size to compute */
  /* Container query lets every text element inside the cards scale
     proportionally with the stack's width, so the cards always look
     the same regardless of how narrow the viewport gets. */
  container-type:inline-size;
  container-name:hstack;
}
/* Container-query proportional sizing — applied ONLY at the mobile
   breakpoint where the cards stack vertically. On desktop the cards
   use their original fixed/rem-based sizes (untouched). */
@media (max-width:1180px){
  .hero-stack .rcard-bar{padding:1.9cqi 2.7cqi}
  .hero-stack .rcard-bar i{width:1.7cqi; height:1.7cqi}
  .hero-stack .rcard-url{font-size:1.35cqi; padding:.6cqi 1.9cqi; border-radius:1.15cqi; margin-left:1.15cqi}
  .hero-stack .rcard-tag{top:9.6cqi; right:2.7cqi; padding:1.15cqi 2.3cqi; font-size:1.35cqi; border-radius:99cqi; gap:1.15cqi}
  .hero-stack .rcard-tag .dot{width:1.15cqi; height:1.15cqi}
  .hero-stack .rcard--review{padding:3.85cqi 4.2cqi}
  .hero-stack .rcard-review-head{gap:2.3cqi; margin-bottom:2.3cqi}
  .hero-stack .g-logo{width:6.9cqi; height:6.9cqi; font-size:1.92cqi}
  .hero-stack .g-logo::after{inset:.96cqi}
  .hero-stack .rcard-review-name{font-size:1.77cqi}
  .hero-stack .rcard-review-meta{font-size:1.42cqi}
  .hero-stack .rcard-stars{font-size:1.92cqi; letter-spacing:.19cqi; margin-bottom:1.54cqi}
  .hero-stack .rcard-review-text{font-size:1.65cqi; line-height:1.5}
  .hero-stack .rcard--sms{padding:3.46cqi 3.85cqi}
  .hero-stack .rcard-sms-head{gap:2.3cqi; padding-bottom:2.7cqi; margin-bottom:2.7cqi}
  .hero-stack .rcard-sms-avatar{width:6.9cqi; height:6.9cqi; font-size:1.82cqi}
  .hero-stack .rcard-sms-name{font-size:1.77cqi}
  .hero-stack .rcard-sms-meta{font-size:1.38cqi}
  .hero-stack .rcard-bubble{padding:1.92cqi 2.7cqi; border-radius:3.46cqi; font-size:1.63cqi; margin-bottom:1.54cqi}
  .hero-stack .rcard-bubble.in{border-bottom-left-radius:1.15cqi}
  .hero-stack .rcard-bubble.out{border-bottom-right-radius:1.15cqi}
  .hero-stack .rcard-typing{padding:1.92cqi 2.7cqi; border-radius:3.46cqi; border-bottom-left-radius:1.15cqi; gap:.77cqi; margin-top:.77cqi}
  .hero-stack .rcard-typing span{width:1.15cqi; height:1.15cqi}
  .hero-stack .rcard{border-radius:3.85cqi}
}
.rcard{position:absolute; background:#fff; border-radius:20px; box-shadow:0 30px 80px -25px rgba(15,23,42,.35), 0 8px 20px -10px rgba(15,23,42,.15); transition:transform .5s ease, box-shadow .5s ease; will-change:transform; overflow:hidden}
.rcard:hover{box-shadow:0 40px 100px -30px rgba(255,90,78,.4), 0 12px 24px -8px rgba(15,23,42,.2)}

/* Site preview card — back, large, tilted left */
.rcard--site{top:6%; left:0; width:78%; aspect-ratio:1.5/1; opacity:0; transform:rotate(-5deg); animation:rcardEnterA .9s cubic-bezier(.34,1.56,.64,1) 0.15s both, rcardFloatA 7s ease-in-out 1.2s infinite; text-decoration:none; color:inherit; cursor:pointer}
.rcard--site:hover{transform:rotate(-3deg) translateY(-6px)}
.rcard-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; background:#F8FAFC; border-bottom:1px solid var(--line)}
.rcard-bar i{width:9px; height:9px; border-radius:50%; background:#E2E8F0; flex-shrink:0}
.rcard-bar i:first-child{background:#FF5F57}
.rcard-bar i:nth-child(2){background:#FEBC2E}
.rcard-bar i:nth-child(3){background:#28C840}
.rcard-url{font-family:'JetBrains Mono','SF Mono',monospace; font-size:.7rem; color:#64748B; margin-left:6px; background:#fff; padding:3px 10px; border-radius:6px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rcard--site img{width:100%; height:calc(100% - 38px); object-fit:cover; object-position:top center; display:block; background:#F1F5F9}
.rcard-tag{position:absolute; top:50px; right:14px; background:rgba(11,18,32,.92); color:#fff; padding:6px 12px; border-radius:999px; font-size:.7rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; backdrop-filter:blur(6px)}
.rcard-tag .dot{width:6px; height:6px; border-radius:50%; background:#7BFFB3; box-shadow:0 0 8px #7BFFB3}

/* Review card — middle, tilted right */
.rcard--review{top:34%; right:-2%; width:54%; padding:20px 22px; opacity:0; transform:rotate(4deg); animation:rcardEnterB .9s cubic-bezier(.34,1.56,.64,1) 0.45s both, rcardFloatB 8s ease-in-out 1.5s infinite}
.rcard-review-head{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.g-logo{width:36px; height:36px; border-radius:50%; background:conic-gradient(from 90deg, #4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0 100%); display:grid; place-items:center; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; flex-shrink:0; position:relative}
.g-logo::after{content:""; position:absolute; inset:5px; background:#fff; border-radius:50%}
.g-logo{color:#4285F4}
.g-logo::before{content:"G"; position:absolute; z-index:1; font-weight:600}
.rcard-review-name{font-weight:700; font-size:.92rem; color:var(--ink)}
.rcard-review-meta{font-size:.74rem; color:var(--muted)}
.rcard-stars{color:#FBBC05; letter-spacing:1px; font-size:1rem; margin-bottom:8px}
.rcard-review-text{font-size:.86rem; line-height:1.5; color:var(--ink-2); margin:0}

/* SMS card — front, lower-left */
.rcard--sms{bottom:0; left:6%; width:62%; padding:18px 20px; opacity:0; transform:rotate(-2deg); animation:rcardEnterC .9s cubic-bezier(.34,1.56,.64,1) 0.75s both, rcardFloatC 9s ease-in-out 1.8s infinite}
.rcard-sms-head{display:flex; gap:12px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px}
.rcard-sms-avatar{width:36px; height:36px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem; flex-shrink:0}
.rcard-sms-name{font-weight:700; font-size:.92rem; color:var(--ink)}
.rcard-sms-meta{font-size:.72rem; color:var(--muted)}
.rcard-bubble{padding:10px 14px; border-radius:18px; font-size:.85rem; line-height:1.4; max-width:84%; margin-bottom:8px; animation:bubbleIn .5s ease backwards}
.rcard-bubble.in{background:#F1F5F9; color:var(--ink); border-bottom-left-radius:6px; animation-delay:.3s}
.rcard-bubble.out{background:var(--grad); color:#fff; margin-left:auto; border-bottom-right-radius:6px; animation-delay:.9s}
.rcard-typing{display:flex; gap:4px; padding:10px 14px; background:#F1F5F9; border-radius:18px; border-bottom-left-radius:6px; width:fit-content; margin-top:4px}
.rcard-typing span{width:6px; height:6px; border-radius:50%; background:#94A3B8; animation:typing 1.4s infinite ease-in-out}
.rcard-typing span:nth-child(2){animation-delay:.15s}
.rcard-typing span:nth-child(3){animation-delay:.3s}

@keyframes rcardFloatA{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-8px)}}
@keyframes rcardFloatB{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-10px)}}
@keyframes rcardFloatC{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-6px)}}

/* One-shot entry animations — each card flies in from a different angle,
   slightly overshoots, then settles into its resting tilt before the
   ambient float kicks in. */
@keyframes rcardEnterA{
  0%   { opacity:0; transform:rotate(-22deg) translate(-90px, 60px) scale(.65); }
  60%  { opacity:1; transform:rotate(-2deg) translate(8px, -10px) scale(1.05); }
  100% { opacity:1; transform:rotate(-5deg) translateY(0)        scale(1); }
}
@keyframes rcardEnterB{
  0%   { opacity:0; transform:rotate(22deg)  translate(110px, 40px) scale(.65); }
  60%  { opacity:1; transform:rotate(7deg)   translate(-8px, -8px)  scale(1.05); }
  100% { opacity:1; transform:rotate(4deg)   translateY(0)          scale(1); }
}
@keyframes rcardEnterC{
  0%   { opacity:0; transform:rotate(-12deg) translate(-30px, 110px) scale(.65); }
  60%  { opacity:1; transform:rotate(1deg)   translate(0, -8px)      scale(1.06); }
  100% { opacity:1; transform:rotate(-2deg)  translateY(0)           scale(1); }
}
@keyframes bubbleIn{from{opacity:0; transform:translateY(8px) scale(.95)} to{opacity:1; transform:none}}
@keyframes typing{0%,60%,100%{transform:translateY(0); opacity:.4}30%{transform:translateY(-4px); opacity:1}}

@media (max-width:1180px){
  /* Indent left rather than centered so the cards align with the
     hero text above and below them. */
  .hero-stack{aspect-ratio:5/4; max-width:520px; margin:30px 0 10px}
}

/* ---------- Marquee ---------- */
.marquee{padding:36px 0; border-block:1px solid var(--line); background:#fff; overflow:hidden}
.marquee-label{text-align:center; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.marquee-track{display:flex; gap:60px; animation:scroll 30s linear infinite; width:max-content}
.marquee-track .chip{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.35rem; color:#94A3B8; white-space:nowrap}
.marquee-track .chip svg{width:22px; height:22px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Section ---------- */
section.block{padding:100px 0}
.block-head{text-align:center; max-width:740px; margin:0 auto 60px}
.block-head .eyebrow{margin-bottom:18px}
.block-head .lead{margin:18px auto 0}

/* ---------- Stats strip ---------- */
.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; padding:60px 36px; border-radius:var(--r); background:linear-gradient(135deg, #0B1220 0%, #1E293B 100%); color:#fff; position:relative; overflow:hidden}
.stats::before{content:""; position:absolute; inset:auto -15% -50% auto; width:520px; height:520px; background:radial-gradient(circle, rgba(255,90,78,.3), transparent 60%); filter:blur(40px)}
.stat{position:relative; text-align:center}
.stat .num{font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,3.6vw,3.2rem); font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1}
.stat .lbl{font-size:.85rem; color:#94A3B8; margin-top:8px; letter-spacing:.05em}
@media (max-width:768px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Feature grid ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.feature{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:32px; transition:transform .35s ease, box-shadow .35s ease, border-color .35s}
.feature:hover{transform:translateY(-6px); border-color:transparent; box-shadow:var(--shadow)}
.feature .ico{width:54px; height:54px; border-radius:14px; background:var(--grad-soft); display:grid; place-items:center; margin-bottom:20px; font-size:1.5rem; position:relative; overflow:hidden}
.feature .ico::after{content:""; position:absolute; inset:auto -30% -50% auto; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,90,78,.25), transparent 65%); filter:blur(8px)}
.feature .ico svg{width:26px; height:26px; stroke:var(--coral); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1}
.contact-info .ico svg{width:22px; height:22px; stroke:var(--coral); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.float-badge .ico svg{width:18px; height:18px; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.float-badge .ico.coral svg{stroke:var(--coral)}
.float-badge .ico.teal svg{stroke:var(--teal)}
.marquee-track .chip svg{width:22px; height:22px; stroke:#94A3B8; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
.feature h3{margin-bottom:10px}
.feature p{color:var(--muted); font-size:.95rem; margin:0}
@media (max-width:920px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feature-grid{grid-template-columns:1fr}}

/* ---------- Trades grid ---------- */
.trades{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:60%; margin-left:auto; margin-right:auto}
.trade{position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:#0B1220; transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s}
.trade img{width:100%; height:100%; object-fit:cover; filter:grayscale(.55) brightness(.78) saturate(.9); transition:filter .6s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.trade:hover{transform:translateY(-8px); box-shadow:0 24px 50px -12px rgba(15,23,42,.18), 0 8px 20px -8px rgba(15,23,42,.12)}
.trade:hover img{filter:grayscale(0) brightness(1) saturate(1.1); transform:scale(1.08)}
.trade-body h3{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.trade:hover .trade-body h3{transform:translateY(-4px)}
.trade::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,90,78,.0) 0%, rgba(255,90,78,.0) 60%, rgba(255,90,78,.35) 100%); opacity:0; transition:opacity .5s; z-index:1; pointer-events:none}
.trade:hover::before{opacity:1}
.trade-art{position:absolute; inset:0; background:linear-gradient(135deg, var(--from,#FF5A4E), var(--to,#FF8475)); display:grid; place-items:center; transition:transform .8s, filter .5s}
.trade-art::before{content:""; position:absolute; inset:auto -20% -30% auto; width:70%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.12); filter:blur(20px)}
.trade-art svg{width:48%; height:48%; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1; filter:drop-shadow(0 6px 20px rgba(0,0,0,.25))}
.trade:hover .trade-art{transform:scale(1.04); filter:brightness(.88)}
.trade-body{position:absolute; inset:auto 0 0 0; padding:24px; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.85))}
.trade-body h3{color:#fff; margin-bottom:6px}
.trade-body span{font-size:.85rem; opacity:.8}
@media (max-width:920px){.trades{grid-template-columns:repeat(2,1fr); max-width:100%}}
@media (max-width:560px){.trades{grid-template-columns:1fr; max-width:100%}}

/* ---------- Process ---------- */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; counter-reset:step}
.step{position:relative; padding:34px 28px; background:var(--cream); border-radius:var(--r); transition:transform .4s, background .4s}
.step:hover{transform:translateY(-4px); background:#fff; box-shadow:var(--shadow)}
.step::before{counter-increment:step; content:"0" counter(step); position:absolute; top:24px; right:24px; font-family:'Space Grotesk',sans-serif; font-size:3rem; font-weight:800; color:transparent; -webkit-text-stroke:1.5px var(--coral); line-height:1}
.step h3{margin-bottom:12px; padding-right:60px}
.step p{color:var(--muted); margin:0; font-size:.95rem}
@media (max-width:920px){.process{grid-template-columns:1fr}}

/* ---------- Pricing ---------- */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.plan{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:36px; display:flex; flex-direction:column; transition:transform .4s, box-shadow .4s}
.plan:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.plan.featured{background:var(--ink); color:#fff; border-color:transparent}
.plan.featured h3, .plan.featured .price{color:#fff}
.plan.featured .feat li{color:#CBD5E1}
.plan-tag{position:absolute; top:-12px; left:36px; background:var(--grad); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.12em; padding:6px 14px; border-radius:999px; text-transform:uppercase}
.plan h3{font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:600}
.plan .price{font-family:'Space Grotesk',sans-serif; font-size:3rem; font-weight:700; margin:14px 0 6px; letter-spacing:-.02em; color:var(--ink)}
.plan .price small{font-size:.95rem; color:var(--muted); font-weight:400}
.plan .desc{color:var(--muted); font-size:.92rem; min-height:42px}
.plan.featured .desc{color:#94A3B8}
.plan .feat{list-style:none; padding:0; margin:24px 0; flex:1}
.plan .feat li{padding:10px 0; padding-left:28px; position:relative; font-size:.93rem; color:var(--ink-2); border-bottom:1px solid var(--line)}
.plan.featured .feat li{border-color:rgba(255,255,255,.12)}
.plan .feat li::before{content:"✓"; position:absolute; left:0; top:10px; width:20px; height:20px; border-radius:50%; background:var(--grad); color:#fff; font-size:.7rem; display:grid; place-items:center; font-weight:800}
.plan .btn{width:100%; justify-content:center}
@media (max-width:920px){.pricing{grid-template-columns:1fr}}

/* ---------- Testimonial ---------- */
.tg{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.t-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:32px; transition:transform .4s, box-shadow .4s}
.t-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.t-stars{color:#FFB400; letter-spacing:2px; margin-bottom:14px}
.t-quote{color:var(--ink-2); font-size:1.02rem; line-height:1.65; margin:0 0 22px}
.t-author{display:flex; align-items:center; gap:12px}
.t-avatar{width:48px; height:48px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:700; font-family:'Space Grotesk',sans-serif}
.t-author b{display:block; font-size:.92rem; color:var(--ink)}
.t-author span{font-size:.82rem; color:var(--muted)}
@media (max-width:920px){.tg{grid-template-columns:1fr}}

/* ---------- CTA banner ---------- */
.cta-banner{position:relative; padding:80px 60px; border-radius:var(--r); background:var(--ink); color:#fff; text-align:center; overflow:hidden}
.cta-banner::before{content:""; position:absolute; inset:auto auto -50% -10%; width:520px; height:520px; background:radial-gradient(circle, rgba(63,193,201,.3), transparent 60%); filter:blur(40px)}
.cta-banner::after{content:""; position:absolute; inset:-50% -10% auto auto; width:520px; height:520px; background:radial-gradient(circle, rgba(255,90,78,.3), transparent 60%); filter:blur(40px)}
.cta-banner > *{position:relative}
.cta-banner h2{color:#fff; margin-bottom:16px; max-width:18ch; margin-inline:auto}
.cta-banner p{color:#94A3B8; max-width:50ch; margin:0 auto 30px}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 26px; transition:border-color .3s}
.faq details[open]{border-color:var(--coral); box-shadow:var(--shadow)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--cream); display:grid; place-items:center; font-size:1.3rem; color:var(--coral); transition:transform .3s, background .3s}
.faq details[open] summary::after{content:"–"; background:var(--grad); color:#fff; transform:rotate(180deg)}
.faq p{color:var(--muted); margin:14px 0 0; line-height:1.7}

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:#94A3B8; padding:80px 0 40px; margin-top:80px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:60px; margin-bottom:60px}
.footer h4{color:#fff; font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px}
.footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.footer ul a{font-size:.93rem; transition:color .25s}
.footer ul a:hover{color:#fff}
.footer .brand{color:#fff; margin-bottom:16px}
.footer-bot{border-top:1px solid rgba(255,255,255,.08); padding-top:30px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.85rem}
@media (max-width:920px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:48px 0 20px; text-align:center; background:var(--grad-soft); position:relative; overflow:hidden}
/* Tighten the gap between the page-hero and the section that follows it */
.page-hero + section.block{padding-top:50px}
.page-hero::before{content:""; position:absolute; left:50%; top:-30%; transform:translateX(-50%); width:900px; height:900px; border-radius:50%; background:radial-gradient(circle, rgba(255,90,78,.12), transparent 60%); filter:blur(40px)}
.page-hero > *{position:relative}
.page-hero h1{font-size:clamp(1.9rem,4.4vw,3.4rem); margin-top:12px !important}
.page-hero .lead{font-size:clamp(.98rem,1.2vw,1.08rem); margin:14px auto 0; max-width:72ch; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}

/* ---------- Portfolio grid ---------- */
.work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px}
.work{position:relative; aspect-ratio:8/5; border-radius:var(--r); overflow:hidden; background:linear-gradient(135deg, #FFEFEC, #E8FAFB)}
.work img.work-shot{width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .8s; position:absolute; inset:0}
.work:hover img.work-shot{transform:scale(1.04)}
.work img:not(.work-shot){width:100%; height:100%; object-fit:cover; transition:transform .8s}
.work:hover img:not(.work-shot){transform:scale(1.04)}
.work.span-2{grid-column:1 / -1; aspect-ratio:auto}
.work-overlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:26px; background:linear-gradient(180deg, rgba(11,18,32,.45) 0%, rgba(11,18,32,0) 22%, rgba(11,18,32,0) 55%, rgba(11,18,32,.92) 100%); color:#fff}
.work-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.work-top .niche, .work-top .live{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:999px; backdrop-filter:blur(6px); white-space:nowrap}
.work-top .niche{background:rgba(255,255,255,.2); color:#fff}
.work-top .live{background:rgba(11,18,32,.7); color:#fff; display:inline-flex; align-items:center; gap:6px}
.work-top .live::before{content:""; width:6px; height:6px; border-radius:50%; background:#7BFFB3; box-shadow:0 0 8px #7BFFB3}
.work-foot h3{color:#fff; line-height:1.05; margin:0}
.work-foot .domain{font-family:'Space Grotesk',sans-serif; font-size:.92rem; opacity:.88; display:inline-flex; align-items:center; gap:6px; margin-top:6px; color:#fff}
.work-foot .domain::after{content:"↗"; transition:transform .25s}
.work:hover .work-foot .domain::after{transform:translate(3px,-3px)}
.work-body{position:absolute; inset:0; padding:30px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(transparent 50%, rgba(0,0,0,.78)); color:#fff; opacity:0; transition:opacity .35s}
.work:hover .work-body{opacity:1}
.work-body span{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.9}
.work-body h3{color:#fff; margin-top:6px}
.work-card{background:linear-gradient(135deg,var(--from,#FF5A4E),var(--to,#FF8475)); position:absolute; inset:0; padding:36px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; transition:transform .6s}
.work:hover .work-card{transform:scale(1.04)}
.work-card::before{content:""; position:absolute; inset:auto -20% -40% auto; width:80%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.14); filter:blur(28px)}
.work-card > *{position:relative; z-index:1}
.work-card .top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.work-card .niche{font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.92}
.work-card .live{font-size:.78rem; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); display:inline-flex; align-items:center; gap:6px}
.work-card .live::before{content:""; width:6px; height:6px; border-radius:50%; background:#7BFFB3; box-shadow:0 0 0 3px rgba(123,255,179,.25)}
.work-card h3{font-size:clamp(1.6rem,2.4vw,2.2rem); color:#fff; line-height:1.05; margin:0}
.work-card .domain{font-family:'Space Grotesk',sans-serif; font-size:.92rem; opacity:.88; display:inline-flex; align-items:center; gap:6px}
.work-card .domain::after{content:"↗"; transition:transform .25s}
.work:hover .work-card .domain::after{transform:translate(2px,-2px)}
.work-card.outline{background:#fff; border:2px dashed var(--line); color:var(--ink)}
.work-card.outline h3{color:var(--ink)}
.work-card.outline .niche, .work-card.outline .domain{color:var(--muted)}
.work-card.outline .live{background:var(--cream); color:var(--coral)}
.work-card.outline .live::before{background:var(--coral); box-shadow:0 0 0 3px rgba(255,90,78,.25)}
.work-card.outline::before{display:none}
@media (max-width:760px){.work-grid{grid-template-columns:1fr}}

/* ---------- Prose (legal pages) ---------- */
.prose{max-width:760px; margin:0 auto; color:var(--ink-2); font-size:1.02rem; line-height:1.7}
.prose h3{font-family:'Space Grotesk',sans-serif; color:var(--ink); font-size:1.25rem; font-weight:600; margin:36px 0 12px; letter-spacing:-.01em}
.prose p{margin:0 0 18px}
.prose a{color:var(--coral); border-bottom:1px solid rgba(255,90,78,.3); transition:border-color .2s}
.prose a:hover{border-color:var(--coral)}
.prose strong{color:var(--ink)}
.prose .updated{display:inline-block; padding:6px 14px; background:var(--cream); border-radius:999px; font-size:.85rem; color:var(--muted); margin-bottom:30px}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start}
.contact-form{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:36px; box-shadow:var(--shadow)}
.contact-form label{display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:6px; letter-spacing:.04em}
.contact-form input, .contact-form select, .contact-form textarea{width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:12px; font-family:inherit; font-size:.95rem; background:#fff; color:var(--ink); transition:border-color .25s}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{outline:none; border-color:var(--coral); box-shadow:0 0 0 4px rgba(255,90,78,.1)}
.contact-form textarea{resize:vertical; min-height:120px}
.field{margin-bottom:18px}
.contact-info{display:flex; flex-direction:column; gap:24px}
.contact-info .row{display:flex; gap:16px; align-items:flex-start}
.contact-info .ico{width:48px; height:48px; border-radius:14px; background:var(--grad-soft); display:grid; place-items:center; font-size:1.2rem; flex:0 0 48px}
.contact-info b{display:block; color:var(--ink); margin-bottom:4px}
.contact-info span{color:var(--muted); font-size:.93rem}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr}}