/* ================================================================
   WEBGARH GTM ASSISTANT — EDITORIAL DESIGN SYSTEM v4
   Premium, contained, typography-driven, complete
   ================================================================ */
:root {
  --orange: #FF8B01;
  --orange-hover: #E67A00;
  --orange-soft: #FFF7ED;
  --orange-glow: rgba(255,139,1,0.06);
  --ink: #111111;
  --ink-soft: #1A1A1A;
  --text: #2A2A2A;
  --text-mid: #555555;
  --text-light: #888888;
  --text-faint: #AAAAAA;
  --cream: #FAF9F6;
  --warm: #F5F3EF;
  --bone: #EDEAE4;
  --white: #FFFFFF;
  --border: #E0DDD7;
  --border-light: #EEEBE5;
  --site-w: 1440px;
  --content-w: 860px;
  --wide-w: 1080px;
  --radius: 6px;
  --radius-lg: 12px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',-apple-system,sans-serif;color:var(--text);background:var(--bone);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* SITE CONTAINER */
.site{max-width:var(--site-w);margin:0 auto;background:var(--white);box-shadow:0 0 80px rgba(0,0,0,0.04);position:relative;min-height:100vh}

/* LAYOUT */
.wrap{max-width:var(--content-w);margin:0 auto;padding:0 40px}
.wrap--wide{max-width:var(--wide-w);margin:0 auto;padding:0 40px}
.wrap--full{max-width:100%;padding:0 60px}
@media(max-width:640px){.wrap,.wrap--wide{padding:0 20px}.wrap--full{padding:0 24px}}

/* TYPOGRAPHY */
.serif{font-family:'DM Serif Display',Georgia,serif}
.headline-xl{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(36px,5vw,56px);line-height:1.1;color:var(--ink);letter-spacing:-0.5px}
.headline-lg{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(28px,3.5vw,42px);line-height:1.15;color:var(--ink)}
.headline-md{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(22px,2.5vw,32px);line-height:1.2;color:var(--ink)}
.headline-sm{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:600;color:var(--ink);line-height:1.4}
.body-lg{font-size:19px;line-height:1.8;color:var(--text-mid)}
.body{font-size:16px;line-height:1.75;color:var(--text-mid)}
.body-sm{font-size:14px;line-height:1.7;color:var(--text-light)}
.label{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--orange)}
em.accent{font-style:italic;color:var(--orange)}

.pullquote{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(20px,2.5vw,28px);font-style:italic;line-height:1.45;color:var(--ink);border-left:3px solid var(--orange);padding-left:28px;margin:48px 0}
.divider{height:1px;background:var(--border);margin:0}
.divider--orange{height:2px;background:linear-gradient(90deg,var(--orange),transparent);width:80px;margin:24px 0}
.divider--center{margin:24px auto}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;padding:14px 32px;border-radius:var(--radius);text-decoration:none;transition:all var(--transition);cursor:pointer;border:2px solid transparent}
.btn--primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn--primary:hover{background:var(--orange-hover);border-color:var(--orange-hover);transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,139,1,0.25)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--white)}
.btn--outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.3)}
.btn--outline-white:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.5)}
.btn--ghost{background:transparent;color:var(--text-mid);border:none;padding:14px 0;text-decoration:underline;text-underline-offset:4px}
.btn--ghost:hover{color:var(--orange)}
.btn--white{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--white:hover{background:var(--cream)}
.btn--sm{font-size:13px;padding:10px 20px}
.btn--lg{font-size:16px;padding:16px 36px}

/* ANIMATIONS */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:0.6}50%{opacity:1}}

/* ================================================================
   NAVIGATION
   ================================================================ */
.nav{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--border-light);transition:box-shadow 0.3s}
.nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,0.04)}
.nav__inner{max-width:100%;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:68px}
.nav__logo{display:flex;align-items:center}
.nav__logo img{height:38px;width:auto}
.nav__links{display:flex;align-items:center;gap:32px;list-style:none}
.nav__links a{font-size:13px;font-weight:500;letter-spacing:0.3px;color:var(--text-mid);transition:color 0.2s}
.nav__links a:hover{color:var(--ink)}
.nav__links a.active{color:var(--ink);font-weight:600}
.nav__audit{display:inline-flex;align-items:center;gap:5px;background:var(--orange-soft);color:var(--orange) !important;font-weight:600 !important;padding:6px 16px;border-radius:20px;border:1px solid rgba(255,139,1,0.15);transition:all 0.2s;font-size:13px}
.nav__audit:hover{background:rgba(255,139,1,0.12) !important}
.nav__audit svg{width:14px;height:14px}
.nav__cta{display:flex;align-items:center;gap:12px}
.nav__toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav__toggle span{display:block;width:20px;height:1.5px;background:var(--ink)}
.nav__mobile{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:var(--white);padding:24px 40px;z-index:99;border-top:1px solid var(--border-light)}
.nav__mobile.open{display:flex;flex-direction:column}
.nav__mobile a{font-size:16px;color:var(--text);padding:14px 0;border-bottom:1px solid var(--border-light);display:block;font-weight:500}
@media(max-width:1024px){.nav__links{display:none}.nav__toggle{display:flex}}
@media(max-width:640px){.nav__inner{padding:0 20px}}

/* ================================================================
   HERO — split layout
   ================================================================ */
.hero{padding:80px 0 60px;position:relative;overflow:hidden}
.hero--split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero--center{text-align:center}
.hero--center .hero__content{max-width:760px;margin:0 auto}
.hero__content{max-width:580px}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.hero--center .hero__actions{justify-content:center}

/* Hero right visual — elegant metrics panel */
.hero__visual{position:relative;padding:40px}
.hero__metrics{position:relative;z-index:1;padding:28px clamp(28px,4vw,48px) 24px}
.hero__metric-row{display:flex;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--border-light)}
.hero__metric-row:last-child{border-bottom:none}
.hero__metric-num{font-family:'DM Serif Display',serif;font-size:clamp(40px,4vw,48px);color:var(--ink);line-height:1;min-width:clamp(82px,10vw,108px)}
.hero__metric-num .mismatch{color:var(--orange)}
.hero__metric-label{font-size:14px;color:var(--text-light);line-height:1.5}
.hero__metric-label strong{color:var(--text);font-weight:600;display:block}
.hero__visual-bg{position:absolute;top:20px;right:0;bottom:20px;left:40px;border:1px solid var(--border-light);border-radius:var(--radius-lg);background:var(--cream)}

@media(max-width:900px){
  .hero--split{grid-template-columns:1fr;gap:24px}
  .hero__visual{padding:20px 0}
  .hero__visual-bg{left:0}
}

@media(max-width:520px){
  .hero__metrics{padding:24px 22px 20px}
  .hero__metric-row{gap:14px}
  .hero__metric-num{min-width:76px}
}

/* ================================================================
   SECTIONS
   ================================================================ */
.section{padding:100px 0}
.section--sm{padding:64px 0}
.section--lg{padding:120px 0}
.section--cream{background:var(--cream)}
.section--warm{background:var(--warm)}
.section--dark{background:var(--ink);color:var(--white)}
.section--dark .headline-xl,.section--dark .headline-lg,.section--dark .headline-md{color:var(--white)}
.section--dark .body-lg,.section--dark .body{color:rgba(255,255,255,0.55)}
.section--dark .label{color:var(--orange)}

/* ================================================================
   CLIENT LOGOS
   ================================================================ */
.logos{padding:40px 0;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);overflow:hidden;background:var(--white)}
.logos__label{font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-faint);text-align:center;margin-bottom:20px}
.logos__track{display:flex;align-items:center;gap:56px;animation:marquee 35s linear infinite;width:max-content}
.logos__track img{height:28px;width:auto;opacity:0.35;filter:grayscale(100%);transition:all 0.4s}
.logos__track img:hover{opacity:0.8;filter:grayscale(0%)}

/* ================================================================
   EQUATION / USP
   ================================================================ */
.equation{text-align:center;padding:80px 40px}
.equation__row{display:flex;align-items:stretch;justify-content:center;gap:24px;flex-wrap:wrap;margin:48px auto 32px;max-width:960px}
.equation__item{text-align:center;padding:36px 28px;flex:1;min-width:200px;max-width:280px;border:1px solid var(--border-light);border-radius:var(--radius-lg);background:var(--white)}
.equation__item h3{font-family:'DM Serif Display',serif;font-size:22px;color:var(--ink);margin-bottom:8px}
.equation__item p{font-size:14px;color:var(--text-mid);line-height:1.7}
.equation__symbol{font-family:'DM Serif Display',serif;font-size:40px;color:var(--border);line-height:1;display:flex;align-items:center}
.equation__result{text-align:center;padding:36px 28px;flex:1;min-width:220px;max-width:300px;border:2px solid var(--orange);border-radius:var(--radius-lg);background:var(--orange-soft)}
.equation__result h3{font-family:'DM Serif Display',serif;font-size:22px;color:var(--orange);margin-bottom:8px}
.equation__result p{font-size:14px;color:var(--text-mid);line-height:1.7}
@media(max-width:768px){.equation__row{flex-direction:column;align-items:center}.equation__symbol{font-size:28px}}

/* ================================================================
   CASE STUDY CARDS
   ================================================================ */
.case-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;transition:all var(--transition);display:block;color:inherit;text-decoration:none}
.case-card:hover{border-color:var(--orange);box-shadow:0 4px 24px rgba(0,0,0,0.04)}
.case-card:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.case-card__metric{font-family:'DM Serif Display',serif;font-size:48px;color:var(--orange);line-height:1;margin-bottom:8px}
.case-card__label{font-size:13px;color:var(--text-light);font-weight:500;margin-bottom:20px;display:block}
.case-card__quote{font-size:16px;color:var(--text);line-height:1.8;font-style:italic;margin-bottom:20px}
.case-card__author{font-size:13px;font-weight:600;color:var(--ink)}
.case-card__role{font-size:12px;color:var(--text-light)}

/* ================================================================
   AUDIENCE
   ================================================================ */
.audience-item{display:flex;gap:40px;padding:40px 0;border-bottom:1px solid var(--border-light);align-items:flex-start}
.audience-item:last-child{border-bottom:none}
.audience-item__num{font-family:'DM Serif Display',serif;font-size:64px;color:var(--bone);line-height:1;flex-shrink:0;width:80px}
.audience-item__content{flex:1}
.audience-item__content h3{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:8px}
.audience-item__content p{font-size:16px;color:var(--text-mid);line-height:1.8}
@media(max-width:640px){.audience-item{flex-direction:column;gap:12px}.audience-item__num{font-size:40px;width:auto}}

/* ================================================================
   AUDIT HIGHLIGHT — full split layout
   ================================================================ */
.audit-hl{background:var(--ink);color:var(--white);padding:80px 0;position:relative;overflow:hidden}
.audit-hl__inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.audit-hl__content{position:relative;z-index:1}
.audit-hl__visual{position:relative;z-index:1}
.audit-hl__card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);padding:32px}
.audit-hl__card-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.audit-hl__card-row:last-child{border-bottom:none}
.audit-hl__card-row span:first-child{font-size:14px;color:rgba(255,255,255,0.6)}
.audit-hl__card-row span:last-child{font-family:'DM Serif Display',serif;font-size:18px;color:var(--orange)}
@media(max-width:768px){.audit-hl__inner{grid-template-columns:1fr}}

/* ================================================================
   GRIDS & SPLIT
   ================================================================ */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}.split{grid-template-columns:1fr;gap:40px}}

/* ================================================================
   STEPS (narrative)
   ================================================================ */
.step-narrative{padding:32px 0;border-bottom:1px solid var(--border-light)}
.step-narrative:last-child{border-bottom:none}
.step-narrative__num{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:8px;display:block}
.step-narrative h3{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:8px}
.step-narrative p{font-size:16px;color:var(--text-mid);line-height:1.8;max-width:540px}

/* ================================================================
   COMPARISON TABLE
   ================================================================ */
.cmp-table{width:100%;border-collapse:collapse;font-size:14px}
.cmp-table thead th{padding:14px 16px;text-align:center;font-weight:600;font-size:13px;color:var(--text-light);border-bottom:2px solid var(--border);background:var(--cream)}
.cmp-table thead th:first-child{text-align:left;color:var(--ink)}
.cmp-table thead th.hl{color:var(--orange);background:var(--orange-soft);border-bottom-color:var(--orange)}
.cmp-table tbody td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--border-light);color:var(--text-light)}
.cmp-table tbody td:first-child{text-align:left;font-weight:500;color:var(--text)}
.cmp-table tbody td.hl{background:rgba(255,139,1,0.02);color:var(--ink);font-weight:600}
.cmp-table .ck{color:var(--orange);font-weight:700}
.cmp-table .cx{color:var(--border)}

/* ================================================================
   PRICING
   ================================================================ */
.price-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition);background:var(--white)}
.price-card:hover{box-shadow:0 8px 32px rgba(0,0,0,0.06)}
.price-card--feat{border:2px solid var(--orange);position:relative}
.price-card--feat::before{content:'Recommended';position:absolute;top:0;right:16px;background:var(--orange);color:#fff;font-size:10px;font-weight:600;padding:3px 10px;border-radius:0 0 4px 4px;letter-spacing:0.5px}
.price-card__head{padding:32px 28px 20px}
.price-card__tier{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);margin-bottom:4px}
.price-card__name{font-family:'DM Serif Display',serif;font-size:22px;color:var(--ink);margin-bottom:8px}
.price-card__desc{font-size:14px;color:var(--text-light);line-height:1.6;margin-bottom:12px}
.price-card__amt{font-size:14px;color:var(--text-mid)}
.price-card__amt strong{font-family:'DM Serif Display',serif;font-size:36px;color:var(--ink);font-weight:400}
.price-card__body{padding:0 28px 28px}
.price-card__body h4{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);padding-top:20px;border-top:1px solid var(--border-light);margin-bottom:12px}
.price-card__body ul{list-style:none;padding:0}
.price-card__body li{font-size:14px;color:var(--text);padding:5px 0 5px 22px;position:relative}
.price-card__body li::before{content:'\2014';position:absolute;left:0;color:var(--orange);font-weight:600}
.price-card__body li.off{color:var(--text-faint)}.price-card__body li.off::before{color:var(--border)}
.price-card__cta{display:block;text-align:center;padding:13px;margin:16px 28px 28px;font-size:14px;font-weight:600;border-radius:var(--radius);transition:all var(--transition)}
.price-card__cta--p{background:var(--orange);color:#fff}.price-card__cta--p:hover{background:var(--orange-hover)}
.price-card__cta--s{background:var(--white);color:var(--ink);border:1.5px solid var(--ink)}.price-card__cta--s:hover{background:var(--ink);color:var(--white)}

/* ================================================================
   FAQ
   ================================================================ */
.faq-item{border-bottom:1px solid var(--border-light)}
.faq-item__q{width:100%;background:none;border:none;padding:24px 0;text-align:left;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item__q:hover{color:var(--orange)}
.faq-item__q::after{content:'+';font-size:20px;color:var(--text-light);flex-shrink:0}
.faq-item.open .faq-item__q::after{content:'\2212';color:var(--orange)}
.faq-item__a{max-height:0;overflow:hidden;transition:max-height 0.4s ease}
.faq-item.open .faq-item__a{max-height:400px;padding-bottom:24px}
.faq-item__a p{font-size:15px;color:var(--text-mid);line-height:1.8}

/* ================================================================
   PARTNER TIERS
   ================================================================ */
.tier-card{text-align:center;padding:40px 28px;border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-lg);background:rgba(255,255,255,0.02)}
.tier-card--feat{border-color:var(--orange);background:rgba(255,139,1,0.04)}
.tier-card__pct{font-family:'DM Serif Display',serif;font-size:42px;color:var(--white)}
.tier-card__label{font-size:12px;color:rgba(255,255,255,0.4);margin-bottom:16px}
.tier-card__name{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--orange);margin-bottom:16px}
.tier-card ul{list-style:none;padding:0;text-align:left}
.tier-card li{font-size:14px;color:rgba(255,255,255,0.6);padding:5px 0}

/* ================================================================
   CLOSING CTA
   ================================================================ */
.closing{padding:100px 0;text-align:center;background:var(--cream);border-top:1px solid var(--border-light)}
.closing__tagline{font-family:'DM Serif Display',serif;font-style:italic;font-size:20px;color:var(--orange);margin-top:32px}

/* ================================================================
   FOOTER — professional, complete
   ================================================================ */
.footer{background:var(--ink);color:rgba(255,255,255,0.5);padding:0}
.footer__top{padding:56px 0 40px;border-bottom:1px solid rgba(255,255,255,0.06)}
.footer__grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1.2fr;gap:36px}
.footer__brand img{height:34px;margin-bottom:16px}
.footer__brand p{font-size:13px;line-height:1.7;color:rgba(255,255,255,0.35);max-width:240px}
.footer__badge{margin-top:20px}
.footer__badge img{height:28px;opacity:0.6}
.footer__col h4{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:14px}
.footer__col ul{list-style:none;padding:0}
.footer__col li{margin-bottom:8px}
.footer__col a{font-size:13px;color:rgba(255,255,255,0.4);transition:color 0.2s}
.footer__col a:hover{color:var(--orange)}
/* Contact column */
.footer__contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.footer__contact-item .footer__contact-icon{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:rgba(255,255,255,0.4)}
.footer__contact-item a,.footer__contact-item span{font-size:13px;color:rgba(255,255,255,0.4)}
.footer__contact-item a:hover{color:var(--orange)}
.footer__bottom{padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center}
.footer__bottom p,.footer__bottom a{font-size:11px;color:rgba(255,255,255,0.2)}
.footer__bottom a:hover{color:var(--orange)}
.footer__bottom-links{display:flex;gap:20px}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.footer__grid{grid-template-columns:1fr 1fr}}