/* =========================================================
   Profesyonelyazilim.com
   Editorial Monochrome — black / white + single ember accent
   Typography: Fraunces (display) + Geist (body) + Geist Mono
   ========================================================= */

:root{
  /* Core monochrome */
  --ink:        #000000;       /* pure black */
  --ink-2:      #0a0a0a;
  --ink-3:      #141414;
  --ink-4:      #1c1c1c;
  --paper:      #ffffff;       /* pure white */
  --paper-2:    #fafaf8;
  --paper-3:    #f2f1ec;
  --paper-4:    #e8e7e0;

  --ash-50:     #f7f6f2;
  --ash-100:    #ecebe4;
  --ash-200:    #d6d4cb;
  --ash-300:    #b6b3a8;
  --ash-400:    #8a8780;
  --ash-500:    #5e5b55;
  --ash-600:    #3d3b37;
  --ash-700:    #262522;
  --ash-800:    #16151a;
  --ash-900:    #0a0a0a;

  /* Single sharp accent — ember (burnt orange) */
  --ember:      #ff3d00;
  --ember-soft: #ff5b2a;
  --ember-tint: rgba(255,61,0,.1);

  /* Feedback */
  --success:    #1f7a52;
  --warning:    #b58100;
  --danger:     #c83a30;

  /* Surface */
  --surface:    var(--paper);
  --surface-2:  var(--paper-2);
  --border:     rgba(0,0,0,.08);
  --border-2:   rgba(0,0,0,.14);
  --text:       var(--ink-2);
  --text-muted: var(--ash-500);
  --text-faded: var(--ash-400);

  /* Radii */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-2: 0 4px 14px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --shadow-3: 0 24px 48px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08);

  /* Typography */
  --font-body:    'Geist','Söhne','Helvetica Neue',-apple-system,sans-serif;
  --font-display: 'Fraunces','Times New Roman',Georgia,serif;
  --font-mono:    'Geist Mono','JetBrains Mono',ui-monospace,monospace;

  --measure: 68ch;
}

/* ── Reset ─────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; background:var(--paper); color-scheme:light }
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--paper);
  font-feature-settings:"ss01","ss02","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none; transition:opacity .2s, color .2s }

/* Editorial-grade headings (variable serif with opsz) */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.05;
  color:var(--ink);
  margin:0 0 .5em;
  font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 0;
  font-feature-settings:"ss01","liga","calt";
}
h5,h6{ font-family:var(--font-body); font-weight:600; letter-spacing:-0.01em; color:var(--ink) }
p{ margin:0 0 1em }

::selection{ background:var(--ink); color:var(--paper) }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:4px }

/* Custom scrollbar */
html::-webkit-scrollbar{ width:10px; height:10px }
html::-webkit-scrollbar-track{ background:var(--paper-3) }
html::-webkit-scrollbar-thumb{ background:var(--ink); border:2px solid var(--paper-3); border-radius:5px }

/* ── Container ─────────────────────────── */
.container{
  max-width:1360px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
  z-index:1;
}
@media(min-width:768px){ .container{ padding:0 36px } }
@media(min-width:1200px){ .container{ padding:0 56px } }

/* ── Typography scale ──────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--ink);
  padding:6px 14px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background:var(--paper);
  box-shadow:var(--shadow-1);
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--ember); box-shadow:0 0 0 3px var(--ember-tint);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

.title-hero{
  font-size:clamp(3rem, 1rem + 9vw, 9rem);
  font-weight:400;
  letter-spacing:-0.045em;
  line-height:.92;
  font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 0;
}
.title-xl{ font-size:clamp(2.5rem,1rem+6vw,5.5rem); letter-spacing:-.03em; line-height:1 }
.title-lg{ font-size:clamp(2rem,1rem+3.5vw,4rem); letter-spacing:-.025em; line-height:1.05 }
.title-md{ font-size:clamp(1.75rem,1rem+2.5vw,3rem); letter-spacing:-.02em }
.title-sm{ font-size:clamp(1.25rem,.75rem+1vw,1.75rem) }

.serif   { font-family:var(--font-display); font-weight:400; font-style:italic }
.italic  { font-style:italic }
.underline-sketch{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:var(--ember) }

.lead{ font-size:1.125rem; color:var(--ash-600); line-height:1.7; max-width:62ch }
@media(min-width:768px){ .lead{ font-size:1.25rem } }

.mono     { font-family:var(--font-mono) }
.uppercase{ text-transform:uppercase; letter-spacing:.12em }
.text-ember{ color:var(--ember) }
.text-muted{ color:var(--text-muted) }
.text-center{ text-align:center }
.text-balance{ text-wrap:balance }

/* Outlined display text (editorial hero effect) */
.outline-text{
  -webkit-text-stroke:1.5px var(--ink);
  color:transparent;
}
.outline-text-paper{
  -webkit-text-stroke:1.5px var(--paper);
  color:transparent;
}

/* ── Buttons — minimal, editorial ─────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:500; font-size:15px; line-height:1;
  cursor:pointer; border:0;
  white-space:nowrap;
  transition:transform .2s cubic-bezier(.16,1,.3,1), background .2s, color .2s, box-shadow .3s, border-color .2s;
  position:relative; isolation:isolate;
  text-decoration:none;
}
.btn svg{ width:16px; height:16px }
.btn-primary{ background:var(--ink); color:var(--paper) }
.btn-primary:hover{ background:var(--ash-700); transform:translateY(-1px); box-shadow:var(--shadow-3) }
.btn-outline{
  background:transparent; color:var(--ink);
  border:1px solid var(--border-2);
}
.btn-outline:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.btn-ghost{ background:transparent; color:var(--ink) }
.btn-ghost:hover{ background:var(--paper-3) }
.btn-paper{ background:var(--paper); color:var(--ink); border:1px solid transparent }
.btn-paper:hover{ background:var(--paper-2); transform:translateY(-1px) }
.btn-whatsapp{ background:#25D366; color:#fff }
.btn-whatsapp:hover{ background:#128C7E; color:#fff; transform:translateY(-1px) }
.btn-sm{ padding:9px 18px; font-size:13px }
.btn-lg{ padding:17px 32px; font-size:16px }
.btn-block{ width:100% }

/* Arrow animation on btn hover */
.btn .arrow{
  display:inline-block; transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.btn:hover .arrow{ transform:translateX(5px) }

/* ── Sections ──────────────────────────── */
.section{ padding:80px 0; position:relative }
@media(min-width:900px){ .section{ padding:140px 0 } }
.section-sm{ padding:56px 0 }
.section-dark{ background:var(--ink); color:var(--paper) }
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{ color:var(--paper) }
.section-dark .lead,.section-dark p{ color:rgba(255,255,255,.72) }
.section-dark .eyebrow{
  background:rgba(255,255,255,.06); color:var(--paper);
  border-color:rgba(255,255,255,.14);
}

/* ── Wireframe grid background ─────────── */
.wireframe-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 0 0, 0 0;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
}
.section-dark .wireframe-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}
.wireframe-grid.thin{ background-size:28px 28px; opacity:.7 }

/* Depth noise */
.depth-grain{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.section-dark .depth-grain{ mix-blend-mode:overlay; opacity:.08 }

/* Depth spotlights */
.depth-orb{
  position:absolute; border-radius:50%;
  filter:blur(80px); pointer-events:none;
  opacity:.15; z-index:0;
}
.depth-orb.a{ top:-140px; right:-140px; width:520px; height:520px; background:var(--ink) }
.depth-orb.b{ bottom:-180px; left:-120px; width:460px; height:460px; background:var(--ember); opacity:.12 }

/* ── Cards — editorial, minimal ───────── */
.card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .3s;
  position:relative; isolation:isolate;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--border-2);
  box-shadow:var(--shadow-3);
}
.section-dark .card{
  background:var(--ink-3);
  border-color:rgba(255,255,255,.08);
  color:var(--paper);
}
.section-dark .card:hover{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 24px 48px rgba(0,0,0,.6);
}

.card-3d{ transform-style:preserve-3d; perspective:1000px }

.card-icon{
  width:48px; height:48px;
  display:grid; place-items:center;
  background:var(--paper-3);
  border:1px solid var(--border);
  border-radius:var(--r);
  margin-bottom:20px;
  transition:background .3s, color .3s, transform .3s;
}
.card:hover .card-icon{
  background:var(--ink);
  color:var(--paper);
  transform:rotate(-6deg);
}
.section-dark .card-icon{
  background:var(--ink-4); border-color:rgba(255,255,255,.08); color:var(--paper);
}
.section-dark .card:hover .card-icon{
  background:var(--paper); color:var(--ink);
}

/* ── Grid ──────────────────────────────── */
.grid{ display:grid; gap:24px }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
@media(min-width:1024px){
  .grid-3{ grid-template-columns:repeat(3,1fr) }
  .grid-4{ grid-template-columns:repeat(4,1fr) }
}

/* ── HEADER — premium glass + mobile ─── */
.site-header{
  position:sticky; top:0; z-index:100;
  padding:12px 0;
  transition:padding .3s, background .3s;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 22px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  box-shadow:0 4px 30px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
  transition:all .3s cubic-bezier(.16,1,.3,1);
  gap:20px;
}
.site-header.scrolled .header-inner{
  background:rgba(255,255,255,.88);
  border-color:rgba(0,0,0,.08);
  box-shadow:0 8px 40px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.7);
}
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:18px;
  letter-spacing:-.02em;
  color:var(--ink);
  text-decoration:none;
  font-variation-settings:"opsz" 72, "SOFT" 50;
  flex-shrink:0;
}
.logo-mark{
  width:32px; height:32px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  flex-shrink:0;
}
.logo span.italic{ font-style:italic; font-weight:400 }

.nav-main{
  display:none; align-items:center; gap:28px;
}
@media(min-width:960px){ .nav-main{ display:flex } }
.nav-main a{
  font-size:14px; font-weight:500; color:var(--ash-600);
  padding:6px 0; position:relative; transition:color .2s;
}
.nav-main a::after{
  content:''; position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background:var(--ink); transition:width .3s;
}
.nav-main a:hover,.nav-main a.active{ color:var(--ink) }
.nav-main a:hover::after,.nav-main a.active::after{ width:100% }

.header-cta{
  display:none; align-items:center; gap:10px;
}
@media(min-width:960px){ .header-cta{ display:flex } }

.header-cart{
  position:relative;
  width:40px; height:40px; border-radius:50%;
  background:transparent; color:var(--ink);
  border:1px solid var(--border-2);
  display:grid; place-items:center;
  transition:background .2s, transform .2s;
}
.header-cart:hover{ background:var(--paper-3) }
.cart-count{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px;
  background:var(--ember); color:#fff;
  font-family:var(--font-mono); font-weight:500; font-size:10px;
  display:grid; place-items:center;
}

.nav-toggle{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:999px;
  background:transparent; color:var(--ink);
  border:1px solid var(--border-2);
  cursor:pointer;
}
@media(min-width:960px){ .nav-toggle{ display:none } }
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--ink); margin:3px 0; transition:transform .3s, opacity .3s }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(4.5px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg) }

/* Mobile fullscreen nav overlay */
.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-100%);
  transition:transform .55s cubic-bezier(.85,0,.15,1);
  display:flex; flex-direction:column;
  padding:96px 28px 36px;
  overflow-y:auto;
}
.mobile-nav.open{ transform:translateY(0) }
.mobile-nav .wireframe-grid{ opacity:.3 }
.mobile-nav nav{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:0;
  flex:1;
}
.mobile-nav nav > a{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--font-display);
  font-size:clamp(2rem, 8vw, 3.5rem);
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--paper);
  opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), color .2s;
}
.mobile-nav.open nav > a{ opacity:1; transform:translateY(0) }
.mobile-nav.open nav > a:nth-child(1){ transition-delay:.1s }
.mobile-nav.open nav > a:nth-child(2){ transition-delay:.16s }
.mobile-nav.open nav > a:nth-child(3){ transition-delay:.22s }
.mobile-nav.open nav > a:nth-child(4){ transition-delay:.28s }
.mobile-nav.open nav > a:nth-child(5){ transition-delay:.34s }
.mobile-nav.open nav > a:nth-child(6){ transition-delay:.4s }
.mobile-nav.open nav > a:nth-child(7){ transition-delay:.46s }
.mobile-nav nav > a:hover{ color:var(--ember) }
.mobile-nav nav > a .num{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.12em;
  opacity:.5; font-weight:500;
  text-transform:uppercase;
}
.mobile-nav-foot{
  position:relative; z-index:1;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s .55s, transform .5s .55s;
}
.mobile-nav.open .mobile-nav-foot{ opacity:1; transform:translateY(0) }
.mobile-nav-foot .contact-line{
  font-family:var(--font-mono); font-size:12px;
  color:rgba(255,255,255,.6); letter-spacing:.08em;
  flex:1 0 100%; text-transform:uppercase;
  padding-bottom:10px;
}
body.nav-open{ overflow:hidden }

/* ── HERO — editorial, giant serif, Spline on top ─ */
.hero{
  position:relative; overflow:hidden;
  background:var(--paper);
  padding:40px 0 60px;
}
@media(min-width:1024px){ .hero{ padding:48px 0 120px } }

.hero-spline{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  max-height: 68vh;
  background:var(--ink);
  border-radius:var(--r-xl);
  overflow:hidden;
  margin-bottom:48px;
  border:1px solid var(--border-2);
}
@media(min-width:1200px){
  .hero-spline{ aspect-ratio: 21/9; max-height: 620px }
}
.hero-spline::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6) 100%),
    radial-gradient(circle at 20% 80%, transparent 40%, rgba(0,0,0,.4) 100%);
}
.hero-spline spline-viewer{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.hero-spline-overlay{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:24px 28px;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap;
  color:var(--paper);
}
.hero-spline-overlay .label{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.85;
}
.hero-spline-overlay .title{
  font-family:var(--font-display);
  font-size:clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-weight:400; letter-spacing:-.02em; font-style:italic;
  margin-top:4px;
  font-variation-settings:"opsz" 144, "SOFT" 70;
}
/* Spline watermark cover */
.hero-spline::after{
  content:''; position:absolute; bottom:0; right:0;
  width:200px; height:64px;
  background:var(--ink);
  z-index:2; pointer-events:none;
}

.hero-title-row{
  display:flex; align-items:flex-start; gap:32px; flex-wrap:wrap;
}
.hero-title{
  flex:1 1 60%;
  min-width:280px;
}
.hero-title h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.75rem, 1rem + 8vw, 8rem);
  line-height:.93;
  letter-spacing:-.045em;
  margin:0;
  font-variation-settings:"opsz" 144, "SOFT" 30;
}
.hero-title h1 .italic-word{
  font-style:italic; font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 80, "WONK" 1;
}
.hero-meta{
  flex:1 1 240px;
  max-width:360px;
  display:flex; flex-direction:column; gap:20px;
}
.hero-meta p{ margin:0 }
.hero-meta .lead{ font-size:1rem }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px }

.hero-marquee{
  margin-top:60px; padding-top:32px;
  border-top:1px solid var(--border);
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.hero-marquee .stat{
  padding:4px 0;
}
.hero-marquee .stat-val{
  font-family:var(--font-display);
  font-size:clamp(2rem,1rem+3vw,3.25rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.025em;
  color:var(--ink);
}
.hero-marquee .stat-lbl{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash-500);
  margin-top:10px;
}

/* ── Section head ──────────────────────── */
.section-head{ max-width:820px; margin:0 0 56px }
.section-head.center{ text-align:center; margin-left:auto; margin-right:auto }
.section-head .eyebrow{ margin-bottom:18px }
.section-head h2{ margin:0 0 14px }

/* Editorial row — h2 left, description right */
.editorial-row{
  display:grid; gap:32px;
  grid-template-columns:1fr;
  align-items:end;
  margin-bottom:56px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
@media(min-width:900px){
  .editorial-row{ grid-template-columns:1fr 1fr }
}
.editorial-row h2{ margin:0 }

/* ── Service / Product card extras ────── */
.service-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
}
.service-card h3{
  font-family:var(--font-display); font-weight:400;
  font-size:1.5rem; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:8px;
}
.service-card p{
  color:var(--ash-500); font-size:14px; line-height:1.65;
  flex:1;
}
.service-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); padding-top:16px;
  transition:gap .2s, color .2s;
}
.service-link:hover{ gap:10px; color:var(--ember) }

.product-card{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .3s;
  text-decoration:none; color:inherit;
}
.product-card:hover{
  transform:translateY(-4px);
  border-color:var(--ink);
  box-shadow:var(--shadow-3);
}
.product-cover{
  aspect-ratio:16/10;
  background:var(--paper-3);
  overflow:hidden; position:relative;
}
.product-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .5s }
.product-card:hover .product-cover img{ transform:scale(1.05) }
.product-cover-placeholder{
  width:100%; height:100%; display:grid; place-items:center;
  color:var(--ash-400); background:var(--paper-3);
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:20px 20px;
}
.product-badge{
  position:absolute; top:14px; left:14px;
  padding:4px 10px; border-radius:4px;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.15em; text-transform:uppercase;
}
.product-body{ padding:22px; display:flex; flex-direction:column; flex:1 }
.product-name{
  font-family:var(--font-display); font-weight:400;
  font-size:1.25rem; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:6px; line-height:1.25;
}
.product-desc{ color:var(--ash-500); font-size:13px; line-height:1.6; margin-bottom:14px; flex:1 }
.product-price{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px }
.product-price-current{
  font-family:var(--font-display); font-weight:500; font-size:1.5rem; color:var(--ink);
  letter-spacing:-.015em;
}
.product-price-compare{
  font-family:var(--font-mono); font-size:12px;
  color:var(--ash-400); text-decoration:line-through;
}
.product-discount{
  font-family:var(--font-mono);
  background:var(--ember); color:#fff;
  padding:2px 7px; border-radius:3px;
  font-size:10px; font-weight:500; letter-spacing:.05em;
}

/* ── Process ───────────────────────────── */
.process-row{
  display:grid; gap:0;
  grid-template-columns:1fr;
  border-top:1px solid var(--border);
}
@media(min-width:768px){ .process-row{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1100px){ .process-row{ grid-template-columns:repeat(4,1fr) } }

.process-step{
  padding:36px 28px;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  position:relative;
  transition:background .3s;
}
.process-step:hover{ background:var(--paper-2) }
.process-step:last-child{ border-right:0 }
@media(max-width:767px){ .process-step{ border-right:0 } }

.process-num{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ash-400); margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
}
.process-num::after{
  content:''; flex:1; height:1px; background:var(--border);
}
.process-step h3{
  font-family:var(--font-display);
  font-size:1.5rem; letter-spacing:-.01em; font-weight:400;
  margin-bottom:10px;
}
.process-step p{ margin:0; color:var(--ash-500); font-size:14px; line-height:1.65 }

/* ── Testimonials / Quotes ──────────── */
.quote-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px;
  transition:border-color .25s, transform .3s;
}
.quote-card:hover{ border-color:var(--ink); transform:translateY(-3px) }
.quote-mark{
  font-family:var(--font-display); font-weight:400;
  font-size:72px; line-height:.5;
  color:var(--ember);
  margin-bottom:12px;
}
.quote-text{
  font-family:var(--font-display);
  font-size:1.25rem; font-weight:400;
  line-height:1.45; letter-spacing:-.005em;
  color:var(--ink);
  margin-bottom:24px;
  font-variation-settings:"opsz" 72, "SOFT" 20;
}
.quote-author{ display:flex; align-items:center; gap:12px }
.quote-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  font-family:var(--font-body); font-weight:600;
}
.quote-name{ font-weight:500; color:var(--ink); font-size:14px }
.quote-company{ font-size:12px; color:var(--ash-500); font-family:var(--font-mono) }
.stars{ display:flex; gap:2px; color:var(--ember) }

/* ── CTA banner ─────────────────────────── */
.cta-banner{
  position:relative; isolation:isolate;
  background:var(--ink);
  color:var(--paper);
  padding:80px 32px;
  border-radius:var(--r-xl);
  overflow:hidden;
}
@media(min-width:900px){ .cta-banner{ padding:120px 64px } }
.cta-banner h2{
  color:var(--paper);
  font-size:clamp(2rem, 1rem + 4vw, 4rem);
  letter-spacing:-.025em;
  max-width:20ch;
}
.cta-banner p{ color:rgba(255,255,255,.72); font-size:1.125rem; max-width:56ch }
.cta-banner .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }

/* ── Forms ─────────────────────────────── */
.form-grid{ display:grid; gap:18px }
@media(min-width:640px){ .form-grid.cols-2{ grid-template-columns:1fr 1fr } }
.form-group label{
  display:block; font-family:var(--font-mono);
  font-size:11px; font-weight:500;
  color:var(--ash-500);
  margin-bottom:8px;
  text-transform:uppercase; letter-spacing:.12em;
}
.form-group .req{ color:var(--ember) }
.form-input,.form-select,.form-textarea{
  width:100%; padding:14px 16px;
  border:1px solid var(--border-2);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  border-radius:var(--r);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.section-dark .form-input,
.section-dark .form-select,
.section-dark .form-textarea{
  background:var(--ink-3); border-color:rgba(255,255,255,.14); color:var(--paper);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:0; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
.section-dark .form-input:focus,
.section-dark .form-select:focus,
.section-dark .form-textarea:focus{
  border-color:var(--paper);
  box-shadow:0 0 0 3px rgba(255,255,255,.15);
}
.form-input::placeholder,.form-textarea::placeholder{ color:var(--ash-400) }
.form-textarea{ min-height:120px; resize:vertical }
.form-select{
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:40px;
}
.form-help{ font-size:12px; color:var(--ash-500); margin-top:6px }
.form-error{ font-size:12px; color:var(--danger); margin-top:4px }
.form-honeypot{ position:absolute; left:-9999px; opacity:0; pointer-events:none }
.alert{
  padding:14px 18px;
  border-radius:var(--r);
  font-size:14px;
  margin-bottom:16px;
  border:1px solid transparent;
  font-family:var(--font-body);
}
.alert-success{ background:rgba(31,122,82,.08); color:var(--success); border-color:rgba(31,122,82,.3) }
.alert-error{ background:rgba(200,58,48,.08); color:var(--danger); border-color:rgba(200,58,48,.3) }
.alert-info{ background:var(--paper-3); color:var(--ink); border-color:var(--border-2) }

/* ── FOOTER ─────────────────────────────── */
.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,.7);
  padding:96px 0 32px;
  margin-top:80px;
  position:relative; overflow:hidden;
}
.site-footer .wireframe-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  opacity:.5;
}
.footer-top{
  position:relative; z-index:1;
  padding-bottom:64px;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:grid; gap:48px; grid-template-columns:1fr;
}
@media(min-width:900px){ .footer-top{ grid-template-columns:1.5fr repeat(3, 1fr) } }

.footer-about h3{
  font-family:var(--font-display);
  font-size:clamp(2rem, 1rem + 2vw, 3rem);
  color:var(--paper); margin-bottom:16px; line-height:1.1;
  letter-spacing:-.02em;
}
.footer-about p{ color:rgba(255,255,255,.55); font-size:14px; max-width:42ch }
.social-links{ display:flex; gap:10px; margin-top:22px }
.social-links a{
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center;
  color:rgba(255,255,255,.8);
  font-family:var(--font-mono); font-weight:500; font-size:12px;
  transition:all .2s;
}
.social-links a:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); transform:translateY(-2px) }

.footer-col h4{
  font-family:var(--font-mono);
  font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.15em;
  color:rgba(255,255,255,.55); margin-bottom:20px;
}
.footer-col ul{ list-style:none; padding:0; margin:0 }
.footer-col li{ margin-bottom:10px }
.footer-col a{
  color:rgba(255,255,255,.78);
  font-size:14px; transition:color .2s, padding-left .2s;
  display:inline-block;
}
.footer-col a:hover{ color:var(--paper); padding-left:4px }

.footer-bottom{
  position:relative; z-index:1;
  padding-top:24px;
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; align-items:center;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.footer-bottom ul{ display:flex; gap:24px; list-style:none; padding:0; margin:0 }
.footer-bottom a{ color:rgba(255,255,255,.4); transition:color .2s }
.footer-bottom a:hover{ color:var(--paper) }

/* ── WhatsApp FAB ─────────────────────── */
.wa-fab{
  position:fixed; bottom:24px; right:24px;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 12px 32px rgba(37,211,102,.4), 0 2px 8px rgba(0,0,0,.1);
  z-index:90; transition:transform .3s;
}
.wa-fab:hover{ transform:scale(1.1); color:#fff }

/* ── Breadcrumbs ─────────────────────── */
.crumbs{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash-400);
  margin-bottom:24px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.crumbs a{ color:var(--ash-400); transition:color .2s }
.crumbs a:hover{ color:var(--ink) }
.crumbs .sep{ color:var(--ash-300) }

/* ── Prose ──────────────────────────── */
.prose{
  max-width:var(--measure);
  font-size:17px; line-height:1.75;
  color:var(--ash-700);
}
.prose h1,.prose h2,.prose h3{
  color:var(--ink); font-family:var(--font-display);
  font-weight:400;
}
.prose h2{ font-size:2rem; margin:2.5rem 0 1rem }
.prose h3{ font-size:1.5rem; margin:2rem 0 .8rem }
.prose p{ margin:0 0 1.25em }
.prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ember) }
.prose a:hover{ color:var(--ember) }
.prose strong{ color:var(--ink); font-weight:600 }
.prose ul,.prose ol{ padding-left:1.4rem; margin:0 0 1.25em }
.prose li{ margin-bottom:.4em }
.prose blockquote{
  font-family:var(--font-display); font-style:italic;
  font-size:1.5rem; line-height:1.3;
  border-left:3px solid var(--ember);
  padding:8px 0 8px 24px; margin:2rem 0;
  color:var(--ink);
}
.prose code{
  font-family:var(--font-mono); font-size:.85em;
  background:var(--paper-3); padding:2px 7px; border-radius:4px;
}

/* ── Accordion / FAQ ───────────────── */
.faq-item{
  border-top:1px solid var(--border);
  padding:22px 0;
  transition:padding .3s;
}
.faq-item:last-child{ border-bottom:1px solid var(--border) }
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--font-display);
  font-size:1.25rem; font-weight:400;
  color:var(--ink); line-height:1.35;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:'+';
  font-family:var(--font-mono); font-weight:300; font-size:24px;
  color:var(--ash-400); transition:transform .3s, color .2s;
  flex-shrink:0;
}
.faq-item[open] summary::after{ transform:rotate(45deg); color:var(--ember) }
.faq-item[open] summary{ color:var(--ink) }
.faq-item > p{
  margin:18px 0 0;
  color:var(--ash-600);
  font-size:16px; line-height:1.7;
  max-width:var(--measure);
}

/* ── Checklist ────────────────────── */
.checklist{ list-style:none; padding:0; margin:0 }
.checklist li{
  display:flex; gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  color:var(--ash-700);
  font-size:15px;
}
.checklist li:last-child{ border-bottom:0 }
.check-ic{
  width:22px; height:22px; flex-shrink:0;
  background:var(--ink); color:var(--paper);
  border-radius:50%;
  display:grid; place-items:center;
  margin-top:2px;
}

/* ── Contact cards ─────────────────── */
.contact-card{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--paper);
  margin-bottom:12px;
  transition:border-color .2s, transform .2s;
  text-decoration:none; color:inherit;
}
.contact-card:hover{ border-color:var(--ink); transform:translateX(4px) }
.contact-icon{
  width:48px; height:48px; border-radius:50%;
  background:var(--paper-3); color:var(--ink);
  display:grid; place-items:center; flex-shrink:0;
  border:1px solid var(--border);
}
.contact-label{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ash-500);
}
.contact-value{
  color:var(--ink); font-weight:500; margin-top:4px; font-size:15px;
}

/* ── Blog ──────────────────────────── */
.blog-card{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:all .3s;
  text-decoration:none; color:inherit;
  height:100%;
}
.blog-card:hover{ border-color:var(--ink); transform:translateY(-4px); box-shadow:var(--shadow-3) }
.blog-cover{ aspect-ratio:16/9; background:var(--paper-3); overflow:hidden }
.blog-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .5s }
.blog-card:hover .blog-cover img{ transform:scale(1.05) }
.blog-body{ padding:28px; display:flex; flex-direction:column; flex:1 }
.blog-title{
  font-family:var(--font-display); font-weight:400;
  font-size:1.375rem; line-height:1.25; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:10px;
}
.blog-excerpt{ color:var(--ash-500); font-size:14px; line-height:1.65; margin-bottom:18px; flex:1 }
.blog-meta{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ash-500); display:flex; gap:14px;
}

/* ── Badges ─────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-family:var(--font-mono); font-size:10px;
  font-weight:500; letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--paper-3); color:var(--ink);
  border:1px solid var(--border);
}

/* ── Cart ───────────────────────────── */
.cart-row{
  display:grid; grid-template-columns:80px 1fr auto;
  gap:16px; align-items:center;
  padding:20px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r);
  margin-bottom:12px;
}
@media(min-width:640px){ .cart-row{ grid-template-columns:80px 2fr 1fr 1fr auto } }
.cart-qty{
  display:inline-flex; align-items:center;
  border:1px solid var(--border-2); border-radius:999px; overflow:hidden;
  background:var(--paper);
}
.cart-qty button{
  width:36px; height:36px; background:transparent;
  border:0; cursor:pointer; color:var(--ink); font-size:16px;
}
.cart-qty button:hover{ background:var(--paper-3) }
.cart-qty input{ width:44px; height:36px; text-align:center; background:transparent; border:0; color:var(--ink); font-weight:500 }
.cart-total{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px;
  position:sticky; top:96px;
}
.cart-total-row{
  display:flex; justify-content:space-between;
  padding:10px 0;
  color:var(--ash-600);
}
.cart-total-row.grand{
  border-top:1px solid var(--border); margin-top:12px; padding-top:16px;
  font-family:var(--font-display); font-weight:500;
  font-size:1.375rem; color:var(--ink); letter-spacing:-.015em;
}

/* ── Account layout ───────────────────── */
.account-layout{
  display:grid; gap:32px; grid-template-columns:1fr;
}
@media(min-width:900px){ .account-layout{ grid-template-columns:240px 1fr } }

.account-nav{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:10px;
  height:fit-content;
}
.account-nav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  color:var(--ash-600);
  border-radius:var(--r-sm);
  font-size:14px; font-weight:500;
  transition:background .2s, color .2s;
}
.account-nav a:hover,.account-nav a.active{
  background:var(--paper-3); color:var(--ink);
}

/* ── Tables ───────────────────────────── */
.table-dark{ width:100%; border-collapse:collapse; font-size:14px }
.table-dark thead th{
  background:var(--paper-3);
  padding:12px 16px; text-align:left;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ash-500);
  border-bottom:1px solid var(--border);
}
.table-dark tbody td{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  color:var(--ink);
}

/* Utilities */
.mb-0{ margin-bottom:0 !important }
.mt-0{ margin-top:0 !important }
.d-none{ display:none !important }
@media(max-width:767px){ .d-md-none{ display:none !important } }

.fade-up{ opacity:0; transform:translateY(20px); animation:fadeUp .8s cubic-bezier(.16,1,.3,1) forwards }
.fade-up.delay-1{ animation-delay:.1s }
.fade-up.delay-2{ animation-delay:.2s }
.fade-up.delay-3{ animation-delay:.3s }
@keyframes fadeUp{ to{ opacity:1; transform:none } }

/* ── Marquee runner ───────────────── */
.marquee-strip{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:18px 0;
  background:var(--paper);
  font-family:var(--font-display);
  font-style:italic; font-weight:400;
  font-size:clamp(1.25rem, 1rem + 2vw, 2.25rem);
  letter-spacing:-.01em;
  line-height:1;
}
.marquee-track{
  display:flex; gap:48px; white-space:nowrap;
  animation:marq 40s linear infinite;
  width:max-content;
}
.marquee-track span{ display:inline-flex; align-items:center; gap:48px; color:var(--ink) }
.marquee-track .dot{
  width:8px; height:8px; border-radius:50%; background:var(--ember);
  display:inline-block;
}
@keyframes marq{ to{ transform:translateX(-50%) } }

/* Mobile tune-ups */
@media(max-width:640px){
  .card{ padding:22px }
  .cta-banner{ padding:56px 24px; border-radius:var(--r-lg) }
  .hero-spline{ margin-bottom:28px }
  .site-header{ padding:10px 0 }
  .header-inner{ padding:8px 12px 8px 18px }
  .footer-bottom{ flex-direction:column; align-items:flex-start }
  .footer-bottom ul{ flex-wrap:wrap }
}