@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ===================================================================
   Ditecho — FINAL — Editorial Trust (oxblood + Fraunces/Jakarta, oxblood buttons, italic accent)
   Warm ivory · near-black ink · deep oxblood accent · Fraunces serif
   Loaded AFTER style.css — restyle only, no structural changes.
   =================================================================== */

:root{
  /* --- accent: ONE deep oxblood/burgundy family --- */
  --brand-50:#fbf2f2; --brand-100:#f5e2e2; --brand-200:#ecc8c8; --brand-300:#d99a9a;
  --brand-500:#9e2f3a; --brand-600:#7e2530; --brand-700:#5f1b24;
  --indigo:#7e2530; --violet:#8a3540; --cyan:#9e2f3a; --emerald:#3f6f57;

  /* --- warm ink + paper palette --- */
  --ink:#1a1614; --slate:#4a423d; --muted:#776c64; --faint:#a89d93;
  --line:#e8e1d7; --line-2:#f0eae0;
  --bg:#fbfaf7; --bg-soft:#f5f1ea; --bg-tint:#ede7dc; --bg-ink:#1c1815;
  --white:#fff;

  /* refined accent — solid, never rainbow. --grad kept as subtle 1-hue 2-stop. */
  --grad:linear-gradient(135deg,#7e2530 0%,#5f1b24 100%);
  --grad-2:linear-gradient(135deg,#9e2f3a,#5f1b24);
  --grad-soft:linear-gradient(160deg,#fbfaf7 0%,#f6efe6 60%,#f3e7df 100%);

  --shadow-sm:0 1px 2px rgba(40,28,22,.04),0 2px 6px rgba(40,28,22,.05);
  --shadow:0 18px 40px -22px rgba(40,28,22,.22);
  --shadow-lg:0 36px 70px -28px rgba(40,28,22,.28);
  --shadow-xl:0 54px 100px -34px rgba(26,18,14,.34);
  --glow:0 0 0 1px rgba(126,37,48,.10),0 26px 60px -26px rgba(126,37,48,.30);

  --r:12px; --r-lg:18px; --r-xl:24px; --r-2xl:32px;
  --ff:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ff-display:'Fraunces','Times New Roman',Georgia,serif;
}

body{font-size:16.5px;letter-spacing:-.002em}

/* --- Editorial serif headings: the single change that kills the template feel --- */
h1,h2,h3,h4,.brand{font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em}
h1{font-weight:600;letter-spacing:-.025em;line-height:1.04}
h2{font-weight:560;letter-spacing:-.02em;line-height:1.08}
h3{font-weight:600;letter-spacing:-.01em}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);letter-spacing:-.03em}

/* --- KILL the rainbow: every text-grad becomes solid oxblood --- */
.text-grad,
.hero h1 .text-grad{
  background:none!important;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--brand-600);color:var(--brand-600)!important;animation:none!important;font-style:italic}
html.dark .text-grad,
html.dark .hero h1 .text-grad{-webkit-text-fill-color:#e8a3ab;color:#e8a3ab!important}

a{color:var(--brand-600)}
a:hover{color:var(--brand-700)}

/* --- Eyebrow: refined serif-adjacent label --- */
.eyebrow{font-family:var(--ff);font-weight:600;letter-spacing:.16em;font-size:.72rem;
  color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-100);padding:7px 16px}
.section-head p{color:var(--muted)}

/* --- Brand wordmark --- */
.brand{font-weight:600;font-size:1.7rem;letter-spacing:-.02em}
.brand b{background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--brand-600);color:var(--brand-600)}
.brand-mark{filter:none}

/* ===================================================================
   Buttons — confident, restrained, generous radii
   =================================================================== */
.btn{font-weight:550;border-radius:10px;letter-spacing:-.005em;font-family:var(--ff)}
.btn-primary{background:var(--brand-600);background-size:auto;color:#fff;
  box-shadow:0 14px 30px -14px rgba(95,27,36,.55)}
.btn-primary:hover{background:var(--brand-700);transform:translateY(-2px);
  box-shadow:0 22px 44px -16px rgba(95,27,36,.6)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand-300);background:var(--brand-50);color:var(--brand-700);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--brand-700)}
.btn-dark{background:var(--ink);color:#fbfaf7}
.btn-lg{padding:16px 30px}

/* ===================================================================
   Navbar
   =================================================================== */
.nav{background:rgba(251,250,247,.82);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(251,250,247,.94);border-color:var(--line);box-shadow:0 6px 24px -18px rgba(40,28,22,.4)}
.nav-links a{font-weight:500;color:var(--slate)}
.nav-links a.active{color:var(--brand-700);background:var(--brand-50)}

/* ===================================================================
   HERO — warm paper, calm single-hue wash (rainbow aurora retired)
   =================================================================== */
.hero{background:var(--grad-soft)}
.hero .aurora span{filter:blur(80px);opacity:.4;mix-blend-mode:multiply}
.hero .aurora span:nth-child(1){background:radial-gradient(circle,#e8c9b2,transparent 70%)}
.hero .aurora span:nth-child(2){background:radial-gradient(circle,#e6c6c9,transparent 70%)}
.hero .aurora span:nth-child(3){background:radial-gradient(circle,#dcd2c2,transparent 70%);opacity:.32}
.hero:after{background-image:radial-gradient(rgba(126,37,48,.07) 1px,transparent 1px);opacity:.5}
.hero-sub{color:var(--slate)}
.hero-rating .stars,.hero-rating .stars .icon{color:#b8862f;fill:#b8862f;stroke:#b8862f}

/* page hero (inner) */
.page-hero{background:var(--grad-soft);border-bottom:1px solid var(--line)}
.page-hero:after{background-image:radial-gradient(rgba(126,37,48,.07) 1px,transparent 1px);opacity:.5}
.breadcrumb a{color:var(--brand-600)}

/* ===================================================================
   Cards — soft warm shadows, hairline rules, oxblood accents
   =================================================================== */
.card,.scard,.work,.quote,.stat,.step,.price,.faq-item,.form-card,.vid,.media-frame{
  background:#fff;border-color:var(--line)}
.card:before{background:linear-gradient(135deg,var(--brand-300),transparent 42%)}
.card:hover{border-color:var(--brand-200)}
.card .ic{background:var(--grad);border-radius:13px;box-shadow:0 14px 26px -12px rgba(95,27,36,.45)}
.scard-ic{background:var(--grad);border-radius:12px;box-shadow:0 14px 24px -12px rgba(95,27,36,.45)}
.card .more,.scard-body .more,.card-cta .more,.scard-cta .more{color:var(--brand-600);font-weight:600}

/* gradient CTA tiles → solid oxblood block */
.card-cta,.scard-cta{background:var(--brand-600);color:#fff}
.card-cta:hover{box-shadow:0 28px 54px -22px rgba(95,27,36,.55)}

/* stats — serif numerals, solid accent */
.stat{border-radius:var(--r-lg)}
.stat b{font-family:var(--ff-display);font-weight:600;background:none;-webkit-background-clip:initial;
  background-clip:initial;-webkit-text-fill-color:var(--brand-600);color:var(--brand-600)}

/* bento brand overlay */
.bento-cell.brandy:after{background:linear-gradient(135deg,rgba(126,37,48,.92),rgba(95,27,36,.9))}

/* work cards */
.work-cover{background:var(--brand-600)}
.chip{color:var(--brand-700);background:var(--brand-50);border:1px solid var(--brand-100);font-weight:600}
.chip.green{color:#2f5e48;background:#eef5f0;border-color:#cfe2d6}

/* feature list */
.feature-list .ic{background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100)}

/* process steps — serif numeral badge, solid accent */
.step:before{background:var(--grad);box-shadow:0 12px 24px -10px rgba(95,27,36,.5);
  font-family:var(--ff-display);font-weight:600;border-radius:11px}
@media(min-width:981px){.steps:before{background:var(--brand-200);opacity:.7}}

/* testimonials */
.quote p{color:var(--slate);font-family:var(--ff-display);font-weight:400;font-style:italic;font-size:1.08rem;line-height:1.5}
.quote .stars,.quote .stars .icon{color:#b8862f;fill:#b8862f;stroke:#b8862f}
.quote .av{background:var(--grad);font-family:var(--ff-display)}

/* ===================================================================
   CTA band — solid oxblood, no rainbow
   =================================================================== */
.cta-band{background:var(--brand-700);box-shadow:var(--shadow-lg)}
.cta-band.photo{background:var(--ink)}
.cta-band.photo:before{background:linear-gradient(135deg,rgba(95,27,36,.86),rgba(60,18,24,.7))}
.cta-band:after{background:radial-gradient(circle at 80% -20%,rgba(255,255,255,.14),transparent 50%)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9)}

/* ===================================================================
   Footer — warm charcoal, oxblood glow
   =================================================================== */
.footer{background:var(--bg-ink);color:#b7a89c}
.footer:before{background:radial-gradient(circle,rgba(126,37,48,.32),transparent 70%)}
.footer a{color:#b7a89c}
.footer a:hover{color:#fff}
.foot-contact .icon{color:#cd8e95}
.socials a:hover{background:var(--brand-600)}
.foot-bottom{color:#8a7d71}
.foot-bottom a,.foot-legal a{color:#a89d93}

/* newsletter */
.news-btn{background:var(--brand-600)}

/* ===================================================================
   Impact band — warm charcoal, muted accent numerals
   =================================================================== */
.impact{background:var(--bg-ink)}
.impact:before{background:
  radial-gradient(circle at 18% 0%,rgba(126,37,48,.32),transparent 46%),
  radial-gradient(circle at 88% 100%,rgba(184,134,47,.18),transparent 46%)}
.impact-cell b{font-family:var(--ff-display);font-weight:600;
  background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:#e0a99d;color:#e0a99d}
.impact-cell span{color:#b7a89c}

/* ===================================================================
   Pricing
   =================================================================== */
.price.feat{border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:var(--glow)}
.price .tag{background:var(--brand-600)}
.price .amt{font-family:var(--ff-display);font-weight:600}
.price li .icon{color:var(--emerald)}

/* pricing comparison table */
.ptable-wrap,.ptable{background:#fff}
.ptable .pt-feat{background:#fff}
.ptable .pt-amt{font-family:var(--ff-display);font-weight:600;
  background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--brand-600);color:var(--brand-600)}
.ptable .pt-pop{background:var(--brand-600)}
.ptable .pop{background:rgba(126,37,48,.05)}
.ptable thead th.pop{border-top:2px solid var(--brand-500)}
.ptable .yes,.price li .icon{color:var(--emerald)}

/* progress + loader */
#progress{background:var(--brand-600);box-shadow:0 0 10px rgba(126,37,48,.5)}
#loader .l-bar{background:var(--brand-600)}
#loader .l-mark{filter:drop-shadow(0 12px 26px rgba(126,37,48,.45))}

/* tag filter */
.tag-filter a.active{background:var(--brand-600);color:#fff;border-color:transparent}
.tag-filter a:hover{border-color:var(--brand-300);color:var(--brand-700);background:var(--brand-50)}

/* float glass + misc accent fills */
.fg-1 .ic{background:var(--grad)}
.fg-2 .ic{background:linear-gradient(135deg,#3f6f57,#2f5e48)}
.marquee-item .icon{color:var(--brand-600)}
.marquee-item .dot{background:var(--brand-200)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--brand-500);box-shadow:0 0 0 4px var(--brand-50)}
.faq-item summary:after{color:var(--brand-600)}
.to-top:hover{background:var(--brand-600)}
.mcta-quote{background:var(--brand-600)}
.kv .k .icon{color:var(--brand-600)}

a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid rgba(126,37,48,.5)}

/* ===================================================================
   DARK MODE — deliberate warm-charcoal luxe, real tonal separation
   bg < bg-soft < bg-tint each visibly distinct; warm not blue.
   =================================================================== */
html.dark{
  --bg:#16120f; --bg-soft:#211b16; --bg-tint:#2d251e; --bg-ink:#0e0b09;
  --ink:#f6f1ea; --slate:#d6cabd; --muted:#a79a8c; --faint:#7c7065;
  --line:#352b23; --line-2:#2b221b;
  --brand-50:#2e1a1b; --brand-100:#3f2226; --brand-300:#b86b73;
  --brand-500:#cf7e87; --brand-600:#dd8e96; --brand-700:#e8a3ab;
  --grad:linear-gradient(135deg,#9e2f3a 0%,#7e2530 100%);
  --grad-soft:linear-gradient(160deg,#1b1512,#231b15 60%,#2a1d1c);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 18px 40px -20px rgba(0,0,0,.66);
  --shadow-lg:0 36px 70px -26px rgba(0,0,0,.74);
  --shadow-xl:0 54px 100px -34px rgba(0,0,0,.85);
}
html.dark body{background:var(--bg);color:var(--slate)}
html.dark h1,html.dark h2,html.dark h3,html.dark h4{color:var(--ink)}
html.dark .nav{background:rgba(22,18,15,.82)}
html.dark .nav.scrolled{background:rgba(22,18,15,.94);border-color:var(--line)}
html.dark .nav-links a{color:var(--slate)}
html.dark .nav-links a:hover{background:var(--bg-tint);color:#fff}
html.dark .nav-links a.active{color:var(--brand-700);background:var(--brand-50)}

html.dark .card,html.dark .scard,html.dark .price,html.dark .quote,html.dark .stat,
html.dark .step,html.dark .form-card,html.dark .work,html.dark .frame-browser,
html.dark .vid,html.dark .faq-item,html.dark .media-frame,html.dark .phone{
  background:var(--bg-soft);border-color:var(--line)}
html.dark .card:hover{border-color:var(--brand-100)}
html.dark .marquee,html.dark .trust{background:var(--bg-soft);border-color:var(--line)}
html.dark .scard-img,html.dark .work-cover{background:var(--bg-tint)}
html.dark .input,html.dark .textarea,html.dark .select{background:var(--bg-tint);color:var(--ink);border-color:var(--line)}
html.dark .input:focus,html.dark .textarea:focus,html.dark .select:focus{background:var(--bg-soft)}

/* dark accent: solid oxblood elements use the brighter --grad / brand-600 */
html.dark .btn-primary{background:#9e2f3a;color:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
html.dark .btn-primary:hover{background:#b03a45}
html.dark .btn-ghost{background:var(--bg-soft);color:var(--ink);border-color:var(--line)}
html.dark .btn-ghost:hover{background:var(--bg-tint);border-color:var(--brand-300);color:#fff}
html.dark .btn-white{background:var(--bg-soft);color:#fff}
html.dark .btn-dark{background:#fbfaf7;color:var(--ink)}
html.dark .stat b{-webkit-text-fill-color:var(--brand-700);color:var(--brand-700)}
html.dark .ptable .pt-amt{-webkit-text-fill-color:var(--brand-700);color:var(--brand-700)}
html.dark .card-cta,html.dark .scard-cta{background:#9e2f3a}
html.dark .cta-band{background:#7e2530}
html.dark .chip{background:var(--brand-50);border-color:var(--line);color:var(--brand-700)}
html.dark .chip.green{background:#16241c;border-color:#274034;color:#8fc4a6}
html.dark .eyebrow{color:var(--brand-700);background:var(--brand-50);border-color:var(--brand-100)}
html.dark .feature-list .ic{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}
html.dark .kv .k{background:var(--bg-soft);border-color:var(--line);color:var(--slate)}
html.dark .price.feat{background:linear-gradient(var(--bg-soft),var(--bg-soft)) padding-box,var(--grad) border-box}
html.dark .hero .aurora span{mix-blend-mode:screen;opacity:.2}
html.dark .ptable,html.dark .ptable-wrap{background:var(--bg-soft)}
html.dark .ptable .pt-feat{background:var(--bg-soft)}
html.dark .ptable .pop{background:rgba(158,47,58,.12)}
html.dark .float-glass{background:rgba(45,37,30,.82);border-color:rgba(255,255,255,.07)}
html.dark .float-glass b{color:#fff}
html.dark .mcta{background:rgba(22,18,15,.93);border-color:var(--line)}
html.dark .to-top{background:var(--bg-soft);border:1px solid var(--line)}
html.dark .marquee-item .m-logo{filter:brightness(1.6) saturate(1.1)}
html.dark #loader{background:var(--bg)}
html.dark .footer{background:var(--bg-ink)}
html.dark .impact{background:var(--bg-ink)}