/* ═══════════════════════════════════════════════
   Warcly v5 — Apple-grade homepage
   ═══════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --bg: #fafafa;
  --bg-white: #ffffff;
  --dark: #0a0a0a;
  --text: #111111;
  --text-2: #555555;
  --text-3: #888888;
  --accent: #A02424;
  --accent-hover: #bf2c2c;
  --border: rgba(0,0,0,0.07);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nav-h: 52px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(0,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;border:none;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ── Utility ── */
.text-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.938rem;font-weight:500;color:var(--accent);
  transition:gap .25s var(--ease);
}
.text-link:hover{gap:.7rem}
.text-link span{transition:transform .25s var(--ease)}
.text-link:hover span{transform:translateX(3px)}

/* ═══════════════════════════════════════════════
   NAV — frosted glass, transparent on hero
   ═══════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:var(--nav-h);
  transition:background .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav--scrolled{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-color:var(--border);
}

.nav__inner{
  max-width:1200px;margin:0 auto;padding:0 2rem;
  display:flex;align-items:center;height:100%;
}

.nav__logo{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.nav__logo-img{width:34px;height:34px;border-radius:6px}
.nav__wordmark{
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.9);transition:color .3s;
}
.nav--scrolled .nav__wordmark{color:var(--text)}

.nav__links{display:flex;gap:.25rem;margin:0 2rem}
.nav__link{
  font-size:.8125rem;font-weight:500;padding:.4rem .7rem;border-radius:4px;
  color:rgba(255,255,255,.7);transition:color .2s;
}
.nav__link:hover{color:#fff}
.nav--scrolled .nav__link{color:var(--text-2)}
.nav--scrolled .nav__link:hover{color:var(--text)}

.nav__cta{
  font-size:.75rem;font-weight:600;
  padding:.4rem 1rem;border-radius:999px;
  background:var(--accent);color:#fff;
  transition:background .2s,transform .15s;
}
.nav__cta:hover{background:var(--accent-hover);transform:scale(1.03)}

/* Hamburger */
.nav__menu{
  display:none;flex-direction:column;gap:5px;padding:.5rem;margin-left:1rem;
}
.nav__menu span{
  display:block;width:20px;height:1.5px;background:#fff;border-radius:2px;
  transition:all .3s var(--ease);transform-origin:center;
}
.nav--scrolled .nav__menu span{background:var(--text)}
.nav__menu[aria-expanded="true"] span:first-child{transform:translateY(6.5px) rotate(45deg)}
.nav__menu[aria-expanded="true"] span:last-child{transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile overlay */
.mobile-overlay{
  position:fixed;inset:0;z-index:490;
  background:rgba(10,10,10,.96);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.mobile-overlay.open{opacity:1;pointer-events:auto}
.mobile-overlay__links{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.mobile-overlay__links a{
  font-size:1.75rem;font-weight:600;color:rgba(255,255,255,.7);
  padding:.5rem 1rem;transition:color .2s;
}
.mobile-overlay__links a:hover{color:#fff}
.mobile-overlay__cta{
  margin-top:2rem;font-size:.875rem;font-weight:600;
  padding:.65rem 1.75rem;border-radius:999px;
  background:var(--accent);color:#fff;
}

/* ═══════════════════════════════════════════════
   HERO — dark, bold, cinematic
   ═══════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  background:var(--dark);overflow:hidden;
  padding:var(--nav-h) 2rem 3rem;
}

.hero__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 25% 45%, rgba(160,36,36,.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(60,60,100,.08) 0%, transparent 60%);
  animation:glowPulse 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes glowPulse{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.15) translate(2%,-3%)}
}

.hero__content{
  position:relative;z-index:1;text-align:center;
  max-width:900px;
}

.hero__title{
  font-size:clamp(4rem,15vw,12rem);
  font-weight:800;letter-spacing:-.04em;line-height:.9;
  color:#fff;
  margin-bottom:1.5rem;
}
.hero__title-line{
  display:block;
  opacity:0;transform:translateY(40px);
}

.hero__tagline{
  font-size:clamp(1rem,2.2vw,1.375rem);
  font-weight:400;color:rgba(255,255,255,.45);
  letter-spacing:-.01em;
  margin-bottom:2.5rem;
  opacity:0;transform:translateY(20px);
}

.hero__ctas{
  display:flex;align-items:center;justify-content:center;gap:2rem;
  opacity:0;transform:translateY(16px);
}
.hero__cta-link{
  font-size:1.125rem;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:.35rem;
  transition:gap .25s var(--ease);
}
.hero__cta-link:hover{gap:.6rem}
.hero__cta-link--subtle{color:rgba(255,255,255,.5)}
.hero__cta-link--subtle:hover{color:rgba(255,255,255,.8)}
.hero__chevron{font-size:1.3em;transition:transform .25s var(--ease)}
.hero__cta-link:hover .hero__chevron{transform:translateX(3px)}

/* Scroll hint line */
.hero__scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  opacity:0;
}
.hero__scroll-line{
  width:1px;height:48px;background:rgba(255,255,255,.2);position:relative;overflow:hidden;
}
.hero__scroll-line::after{
  content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:rgba(255,255,255,.7);
  animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{top:-100%}
  50%{top:100%}
  100%{top:100%}
}

/* ═══════════════════════════════════════════════
   STATEMENT — pinned text reveal on scroll
   ═══════════════════════════════════════════════ */
.statement{
  position:relative;
  /* Height set by JS for scroll distance. Fallback for no-JS: */
  min-height:300vh;
  background:var(--bg);
}
.statement__sticky{
  position:sticky;top:0;
  height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem;
}
.statement__line{
  font-size:clamp(1.75rem,4.5vw,3.75rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.15;
  text-align:center;
  color:var(--text);
  position:absolute;
  opacity:0;
  transform:translateY(30px);
  max-width:18ch;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.statement__line.active{
  opacity:1;transform:translateY(0);
}

/* ═══════════════════════════════════════════════
   SHOWCASE — full-width feature sections
   ═══════════════════════════════════════════════ */
.showcase{
  padding:10rem 2rem;
  background:var(--bg-white);
}
.showcase:nth-of-type(even){background:var(--bg)}

.showcase__inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
  align-items:center;
}
.showcase--flip .showcase__inner{
  direction:rtl;
}
.showcase--flip .showcase__inner > *{
  direction:ltr;
}

.showcase__media{
  opacity:0;transform:scale(.92);
  will-change:transform,opacity;
}

.showcase__frame{
  border-radius:16px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
}
.showcase__img{
  display:block;width:100%;height:auto;
  object-fit:cover;aspect-ratio:3/4;
}

/* Browser mockup */
.showcase__frame--browser{
  background:var(--bg-white);
  box-shadow:0 24px 80px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.04);
}
.browser{overflow:hidden}
.browser__bar{
  display:flex;gap:6px;padding:10px 14px;
  background:#f2f2f2;
}
.browser__bar span{width:10px;height:10px;border-radius:50%;background:#ddd}
.browser__body{padding:16px}
.browser__block{border-radius:6px;margin-bottom:12px}
.browser__block--hero{
  height:80px;
  background:linear-gradient(135deg,var(--accent),#d44);
}
.browser__line{
  height:10px;border-radius:4px;background:#eee;margin-bottom:8px;
}
.browser__grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px;
}
.browser__grid div{height:56px;background:#f5f5f5;border-radius:4px}

/* Copy */
.showcase__copy{
  opacity:0;transform:translateY(40px);
  will-change:transform,opacity;
}
.showcase__label{
  display:inline-block;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.showcase__heading{
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.08;
  margin-bottom:1.25rem;
}
.showcase__body{
  font-size:1.0625rem;color:var(--text-2);line-height:1.75;
  max-width:40ch;margin-bottom:1.75rem;
}

/* ═══════════════════════════════════════════════
   IMAGE BREAK — cinematic full-bleed image
   ═══════════════════════════════════════════════ */
.img-break{
  position:relative;overflow:hidden;
  height:clamp(280px,50vw,600px);
  background:#111;
}
.img-break__img{
  width:100%;height:120%;
  object-fit:cover;object-position:center 30%;
  position:absolute;top:-10%;left:0;
  will-change:transform;
  opacity:.85;
}

/* ═══════════════════════════════════════════════
   DIAGNOSTIC — interactive pricing CTA
   ═══════════════════════════════════════════════ */
.diagnostic{
  padding:8rem 2rem;
  background:var(--bg);
  text-align:center;
}
.diagnostic__title{
  font-size:clamp(2rem,4.5vw,3.5rem);
  font-weight:700;letter-spacing:-.03em;
  margin-bottom:3rem;
  opacity:0;transform:translateY(30px);
}

.diagnostic__card{
  max-width:520px;margin:0 auto;
  background:var(--bg-white);
  border:1px solid var(--border);
  border-radius:20px;
  padding:2.5rem;
  box-shadow:0 12px 48px rgba(0,0,0,.06);
  min-height:260px;
  opacity:0;transform:translateY(30px);
}

.diag-step{
  animation:diagFade .35s var(--ease) forwards;
}
@keyframes diagFade{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

.diag-options{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
}
.diag-options--wrap{
  gap:.6rem;
}

.diag-opt{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:1.25rem 1.5rem;border-radius:14px;
  border:1px solid var(--border);
  font-size:.8125rem;font-weight:600;color:var(--text-2);
  transition:border-color .2s,background .2s,transform .15s,color .2s;
  min-width:100px;
}
.diag-opt:hover{
  border-color:var(--accent);color:var(--accent);
  background:rgba(160,36,36,.03);transform:translateY(-2px);
}
.diag-opt svg{color:var(--text-3);transition:color .2s}
.diag-opt:hover svg{color:var(--accent)}

.diag-chip{
  padding:.6rem 1.2rem;border-radius:999px;
  border:1px solid var(--border);
  font-size:.8125rem;font-weight:500;color:var(--text-2);
  transition:border-color .2s,background .2s,color .2s,transform .15s;
}
.diag-chip:hover{
  border-color:var(--accent);color:var(--accent);
  background:rgba(160,36,36,.03);transform:translateY(-1px);
}

.diag-back{
  position:absolute;top:1.25rem;left:1.5rem;
  font-size:1.125rem;color:var(--text-3);
  transition:color .2s;
}
.diag-back:hover{color:var(--text)}

.diag-q{
  font-size:1.0625rem;font-weight:600;
  margin-bottom:1.5rem;color:var(--text);
}

.diag-step[data-step="2"],
.diag-step[data-step="3"],
.diag-step[data-step="web"]{
  position:relative;
  padding-top:.5rem;
}

/* Result */
.diag-result{text-align:center}
.diag-result__label{
  display:inline-block;font-size:.7rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:.75rem;
}
.diag-result__price{
  font-size:clamp(2.5rem,6vw,3.5rem);
  font-weight:800;letter-spacing:-.03em;
  color:var(--text);margin-bottom:.5rem;
}
.diag-result__time{
  font-size:.875rem;color:var(--text-2);margin-bottom:2rem;
}
.diag-result__btn{
  display:inline-block;
  font-size:.875rem;font-weight:600;
  padding:.7rem 2rem;border-radius:999px;
  background:var(--accent);color:#fff;
  transition:background .2s,transform .15s;
}
.diag-result__btn:hover{background:var(--accent-hover);transform:scale(1.03)}
.diag-result__alt{
  font-size:.8125rem;color:var(--text-3);margin-top:1rem;
}
.diag-result__alt a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ═══════════════════════════════════════════════
   LOCATION STRIP
   ═══════════════════════════════════════════════ */
.loc{
  padding:5rem 2rem;text-align:center;
  border-top:1px solid var(--border);
  background:var(--bg-white);
}
.loc__main{
  font-size:clamp(1.25rem,2.5vw,1.75rem);
  font-weight:600;letter-spacing:-.02em;
  margin-bottom:.75rem;
}
.loc__sub{
  font-size:.875rem;color:var(--text-3);line-height:1.7;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.ft{
  background:var(--dark);color:rgba(255,255,255,.5);
  padding:3rem 2rem 2rem;
}
.ft__inner{
  max-width:1200px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;
}
.ft__brand{
  display:flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin-right:auto;
}
.ft__brand img{border-radius:5px}
.ft__links{display:flex;gap:1.5rem}
.ft__links a{font-size:.8125rem;transition:color .2s}
.ft__links a:hover{color:rgba(255,255,255,.9)}
.ft__social{display:flex;gap:1rem}
.ft__social a{color:rgba(255,255,255,.4);transition:color .2s}
.ft__social a:hover{color:#fff}
.ft__copy{
  width:100%;text-align:center;
  font-size:.75rem;color:rgba(255,255,255,.25);
  margin-top:1.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media(max-width:1024px){
  .showcase__inner{grid-template-columns:1fr;gap:3rem}
  .showcase--flip .showcase__inner{direction:ltr}
  .showcase{padding:6rem 2rem}
}

@media(max-width:768px){
  :root{--nav-h:48px}
  .nav__inner{padding:0 1.25rem}
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:flex}

  .hero{padding:var(--nav-h) 1.25rem 2.5rem}
  .hero__title{font-size:clamp(3.5rem,18vw,6rem)}
  .hero__ctas{flex-direction:column;gap:1rem}
  .hero__cta-link{font-size:1rem}

  .statement{min-height:250vh}
  .statement__line{font-size:clamp(1.5rem,7vw,2.25rem);max-width:14ch}

  .showcase{padding:5rem 1.25rem}
  .showcase__heading{font-size:clamp(1.75rem,6vw,2.5rem)}

  .img-break{height:clamp(200px,55vw,350px)}

  .diagnostic{padding:5rem 1.25rem}
  .diagnostic__card{padding:1.75rem}
  .diag-opt{min-width:80px;padding:1rem 1.125rem}
  .diag-result__price{font-size:clamp(2rem,10vw,3rem)}

  .loc{padding:3.5rem 1.25rem}

  .ft__inner{flex-direction:column;align-items:flex-start}
  .ft__links{flex-wrap:wrap;gap:1rem}
  .ft__copy{text-align:left}
}

@media(max-width:380px){
  .diag-options{gap:.6rem}
  .diag-opt{min-width:70px;padding:.85rem .75rem;font-size:.75rem}
}

/* ═══════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
  }
  .hero__glow{animation:none}
  .hero__scroll-line::after{animation:none}
  .hero__title-line,.hero__tagline,.hero__ctas,
  .showcase__media,.showcase__copy,
  .diagnostic__title,.diagnostic__card{
    opacity:1!important;transform:none!important;
  }
  .statement__line{
    position:relative!important;
    opacity:1!important;transform:none!important;
    margin-bottom:1rem;
  }
}

/* ═══════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════ */
@media print{
  .nav,.mobile-overlay,.hero__glow,.hero__scroll-hint,.img-break{display:none}
  .hero{min-height:auto;background:#fff;color:#000;padding:2rem}
  .hero__title{color:#000}
  .hero__tagline{color:#333}
  body{background:#fff}
}