/* =====================================================================
   ZOON — shared stylesheet for standalone content pages (service pages,
   guides, blog). Loaded ALONGSIDE style-v2.css (reuses its tokens, nav,
   footer, buttons) — this file only adds long-form article layout on top.
   Self-contained: touching this never affects index.html.
   ===================================================================== */

.content-hero{background:var(--bg-dark); color:var(--paper); padding:150px 0 64px; position:relative; overflow:hidden;}
.content-hero:before{content:''; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, var(--neon), transparent 70%); opacity:.12; top:-220px; inset-inline-end:-140px; pointer-events:none;}
.content-hero .container{position:relative; z-index:1;}
.content-hero .crumb{font-size:.82rem; color:var(--paper-soft); margin-bottom:14px;}
.content-hero .crumb a{color:var(--paper-soft); transition:color .25s;}
.content-hero .crumb a:hover{color:var(--neon-bright);}
.content-hero h1{font-size:clamp(1.8rem,4vw,2.7rem); font-weight:900; line-height:1.2; max-width:760px; margin-bottom:14px;}
.content-hero .lede{color:var(--paper-soft); font-size:1.05rem; max-width:640px; line-height:1.8;}
.content-hero .meta{display:flex; gap:16px; flex-wrap:wrap; margin-top:20px; font-size:.82rem; color:var(--paper-faint);}

.article-body{background:var(--bg-light-2); padding:56px 0 72px;}
.article-wrap{max-width:720px; margin:0 auto;}
.article-wrap > * + *{margin-top:20px;}
.article-wrap h2{font-size:1.5rem; font-weight:900; margin-top:44px; color:var(--ink); line-height:1.4;}
.article-wrap h3{font-size:1.15rem; font-weight:800; margin-top:32px; color:var(--ink);}
.article-wrap p{font-size:1.02rem; line-height:1.9; color:var(--ink-soft);}
.article-wrap ul, .article-wrap ol{padding-inline-start:22px; display:flex; flex-direction:column; gap:10px;}
.article-wrap li{font-size:1.02rem; line-height:1.8; color:var(--ink-soft);}
.article-wrap li::marker{color:var(--neon-deep); font-weight:800;}
.article-wrap strong{color:var(--ink); font-weight:800;}
.article-wrap a:not(.btn){color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px;}

.step-list{list-style:none; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:18px;}
.step-list li{position:relative; padding-inline-start:52px; counter-increment:step;}
.step-list li::before{content:counter(step); position:absolute; inset-inline-start:0; top:0; width:34px; height:34px; border-radius:10px; background:var(--ink); color:var(--neon); font-weight:900; font-size:.95rem; display:flex; align-items:center; justify-content:center;}
.step-list li strong{display:block; margin-bottom:4px; font-size:1.02rem;}

.service-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin-top:12px !important;}
.service-card{background:var(--bg-light); border:1px solid var(--border-l); border-radius:16px; padding:22px; transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.service-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(11,15,10,0.18);}
.service-card h3{margin-top:0 !important; font-size:1rem; font-weight:900;}
.service-card p{font-size:.92rem !important; color:var(--ink-soft);}
.service-card a{font-size:.88rem; font-weight:800; color:var(--neon-deep); display:inline-flex; align-items:center; gap:4px; margin-top:8px;}

.cta-block{background:var(--bg-dark); border-radius:20px; padding:40px 32px; text-align:center; margin-top:56px !important; position:relative; overflow:hidden;}
.cta-block:before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse 65% 55% at 50% 0%, rgba(23,217,100,0.14), transparent 60%); pointer-events:none;}
.cta-block *{position:relative; z-index:1;}
.cta-block h2{color:var(--paper); margin-top:0 !important; font-size:1.4rem;}
.cta-block p{color:var(--paper-soft) !important; max-width:480px; margin-inline:auto;}
.cta-block .cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px;}

.blog-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; margin-top:12px !important;}
.blog-card{background:var(--bg-light); border:1px solid var(--border-l); border-radius:18px; padding:26px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); display:flex; flex-direction:column; gap:10px;}
.blog-card:hover{transform:translateY(-4px); box-shadow:0 22px 44px -22px rgba(11,15,10,0.2);}
.blog-card .tag{font-size:.72rem; font-weight:800; color:var(--neon-deep); text-transform:uppercase; letter-spacing:.03em;}
.blog-card h3{margin:0 !important; font-size:1.05rem; font-weight:900;}
.blog-card p{margin:0 !important; font-size:.92rem !important; color:var(--ink-soft);}
.blog-card .read-more{font-size:.85rem; font-weight:800; color:var(--neon-deep); margin-top:auto;}

@media (max-width:640px){
  .content-hero{padding:130px 0 48px;}
  .article-body{padding:40px 0 56px;}
  .cta-block{padding:32px 20px;}
}