*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #08080a;
      --bg-2: #0d0d10;
      --bg-3: #131317;
      --bg-glass: rgba(8, 8, 10, 0.78);
      --text: #f4f0e8;
      --text-2: #9e9a8e;
      --text-3: #5c5950;
      --gold: #c8a55a;
      --gold-light: #e8d48a;
      --gold-dark: #a68840;
      --gold-dim: rgba(200, 165, 90, 0.10);
      --gold-glow: rgba(200, 165, 90, 0.05);
      --border: rgba(200, 165, 90, 0.08);
      --border-hover: rgba(200, 165, 90, 0.18);
      --serif: 'Cormorant Garamond', Georgia, serif;
      --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-o: cubic-bezier(0, 0, 0.2, 1);
      --max-w: 1320px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }

    body::after {
      content: '';
      position: fixed; inset: 0;
      opacity: 0.018;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px;
      pointer-events: none;
      z-index: 9999;
    }

    .c { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.5rem, 3vw, 3rem); }

    /* ── NAV ── */
    header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 24px 0;
      transition: all 0.5s var(--ease);
    }
    header.scrolled {
      padding: 14px 0;
      background: var(--bg-glass);
      backdrop-filter: blur(28px) saturate(1.3);
      -webkit-backdrop-filter: blur(28px) saturate(1.3);
      border-bottom: 1px solid var(--border);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; }

    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
    }

    .logo-mark { flex-shrink: 0; }

    .logo-text { display: flex; flex-direction: column; gap: 0; }
    .logo-top {
      display: flex; align-items: baseline; gap: 0;
      font-family: var(--serif); font-size: 14px; line-height: 1.1;
      letter-spacing: 0.5px;
    }
    .logo-top-digital { font-weight: 300; color: var(--text-2); font-size: 9px; text-transform: uppercase; letter-spacing: 3.5px; font-family: var(--sans); }
    .logo-main {
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 500;
      font-style: italic;
      line-height: 1.1;
      background: linear-gradient(135deg, #c8a55a, #edd99a, #c8a55a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .logo-fyi {
      font-family: var(--sans);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 4px;
      color: var(--gold);
      margin-top: 1px;
      text-align: right;
    }

    .nav-links { display: flex; align-items: center; gap: 40px; list-style: none; }
    .nav-links a {
      font-size: 0.82rem; font-weight: 500; color: var(--text-2);
      letter-spacing: 0.03em; transition: color 0.3s;
    }
    .nav-links a:hover { color: var(--gold-light); }

    .btn-cta {
      display: inline-flex; align-items: center;
      padding: 11px 26px;
      font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
      letter-spacing: 0.05em; text-transform: uppercase;
      border: 1px solid var(--gold); color: var(--gold);
      border-radius: 0; background: transparent; cursor: pointer;
      transition: all 0.4s var(--ease); text-decoration: none;
    }
    .btn-cta:hover { background: var(--gold); color: var(--bg); box-shadow: 0 8px 32px rgba(200,165,90,0.15); }

    .btn-fill {
      display: inline-flex; align-items: center;
      padding: 14px 32px;
      font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase;
      background: var(--gold); color: var(--bg); border: 1px solid var(--gold);
      border-radius: 0; cursor: pointer; transition: all 0.4s var(--ease); text-decoration: none;
    }
    .btn-fill:hover { background: var(--gold-light); box-shadow: 0 8px 40px rgba(200,165,90,0.2); transform: translateY(-1px); }

    .btn-outline {
      display: inline-flex; align-items: center;
      padding: 14px 32px;
      font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase;
      background: transparent; color: var(--text-2);
      border: 1px solid rgba(200,165,90,0.2);
      border-radius: 0; cursor: pointer; transition: all 0.4s var(--ease); text-decoration: none;
    }
    .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

    .menu-btn { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 8px; }
    @media (max-width: 768px) { .nav-links { display: none; } .menu-btn { display: block; } }

    .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(200,165,90,0.2), rgba(200,165,90,0.4), rgba(200,165,90,0.2), transparent); }
    .divider-thin { height: 1px; background: linear-gradient(90deg, transparent, var(--border-hover), transparent); }

    /* ── HERO ── */
    .hero {
      min-height: 100vh; display: flex; align-items: center;
      position: relative; padding: 160px 0 120px; overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute;
      top: -15%; left: 50%; transform: translateX(-50%);
      width: 900px; height: 700px;
      background: radial-gradient(ellipse, rgba(200,165,90,0.04) 0%, transparent 60%);
      pointer-events: none;
    }
    .hero::after {
      content: ''; position: absolute;
      top: 20%; right: 12%; width: 1px; height: 40%;
      background: linear-gradient(180deg, transparent, rgba(200,165,90,0.12), transparent);
      pointer-events: none;
    }

    .hero-inner { position: relative; z-index: 1; text-align: center; max-width: 880px; margin: 0 auto; }

    .hero-label {
      font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold);
      opacity: 0; animation: fadeUp 0.8s var(--ease-o) 0.1s forwards;
    }
    .hero h1 {
      font-family: var(--serif); font-size: clamp(3.5rem, 7.5vw, 7.5rem);
      font-weight: 400; line-height: 0.92; letter-spacing: -0.03em;
      margin: 28px 0 32px; color: var(--text);
      opacity: 0; animation: fadeUp 0.8s var(--ease-o) 0.25s forwards;
    }
    .hero h1 em {
      font-style: italic; font-weight: 300;
      background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-desc {
      font-size: clamp(1rem, 1.15vw, 1.15rem); color: var(--text-2);
      max-width: 52ch; margin: 0 auto; line-height: 1.8; font-weight: 300;
      opacity: 0; animation: fadeUp 0.8s var(--ease-o) 0.4s forwards;
    }
    .hero-actions {
      display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 44px;
      opacity: 0; animation: fadeUp 0.8s var(--ease-o) 0.55s forwards;
    }

    .hero-stats {
      display: grid; grid-template-columns: repeat(4, 1fr);
      margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--border);
      opacity: 0; animation: fadeUp 0.8s var(--ease-o) 0.7s forwards;
    }
    .hs-item { text-align: center; }
    .hs-item + .hs-item { border-left: 1px solid var(--border); }
    .hs-num { font-family: var(--serif); font-size: clamp(2.2rem, 3.5vw, 3.2rem); font-weight: 300; color: var(--text); line-height: 1; }
    .hs-label { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); margin-top: 8px; }
    @media (max-width: 600px) {
      .hero-stats { grid-template-columns: 1fr 1fr; gap: 32px 0; }
      .hs-item:nth-child(3) { border-left: none; border-top: 1px solid var(--border); padding-top: 32px; }
      .hs-item:nth-child(4) { border-top: 1px solid var(--border); padding-top: 32px; }
    }

    /* ── SECTIONS ── */
    .sec { padding: clamp(80px, 11vw, 150px) 0; }
    .sl { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; color: var(--gold); display: block; margin-bottom: 16px; }
    .st { font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 4rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
    .sd { font-size: clamp(0.95rem, 1.05vw, 1.1rem); color: var(--text-2); max-width: 52ch; margin-top: 18px; line-height: 1.8; font-weight: 300; }
    .sh { margin-bottom: clamp(48px, 6vw, 72px); }

    /* ── SERVICE CARDS ── */
    .sg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
    .sc {
      background: var(--bg-2); padding: clamp(32px, 3vw, 48px);
      display: flex; flex-direction: column; position: relative; overflow: hidden;
      transition: all 0.5s var(--ease); cursor: pointer; text-decoration: none; color: inherit;
    }
    .sc::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(135deg, #c8a55a, #e8d48a, #c8a55a);
      transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
    }
    .sc:hover { background: var(--bg-3); }
    .sc:hover::before { transform: scaleX(1); }
    .sc-num { font-family: var(--serif); font-size: 0.95rem; color: var(--text-3); font-weight: 500; margin-bottom: 28px; transition: color 0.3s; }
    .sc:hover .sc-num { color: var(--gold); }
    .sc-title { font-family: var(--serif); font-size: clamp(1.4rem, 1.8vw, 1.7rem); font-weight: 500; margin-bottom: 14px; letter-spacing: -0.01em; }
    .sc-desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.75; flex-grow: 1; font-weight: 300; }
    .sc-link {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--gold); margin-top: 28px;
      opacity: 0; transform: translateY(8px); transition: all 0.4s var(--ease);
    }
    .sc-link svg { transition: transform 0.3s; }
    .sc:hover .sc-link { opacity: 1; transform: translateY(0); }
    .sc:hover .sc-link svg { transform: translateX(4px); }
    @media (max-width: 1024px) { .sg { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .sg { grid-template-columns: 1fr; } }

    /* ── TESTIMONIALS ── */
    .tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .tc { background: var(--bg-2); border: 1px solid var(--border); padding: clamp(32px, 3vw, 44px); display: flex; flex-direction: column; transition: border-color 0.4s; }
    .tc:hover { border-color: var(--border-hover); }
    .tc-icon { font-family: var(--serif); font-size: 3rem; color: rgba(200,165,90,0.2); line-height: 1; margin-bottom: 20px; font-weight: 300; }
    .tq { font-family: var(--serif); font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-style: italic; font-weight: 400; color: var(--text); line-height: 1.55; flex-grow: 1; margin-bottom: 28px; }
    .t-line { width: 32px; height: 1px; background: rgba(200,165,90,0.25); margin-bottom: 16px; }
    .ta { font-size: 0.85rem; font-weight: 500; color: var(--text); }
    .tr { font-size: 0.75rem; color: var(--text-3); margin-top: 3px; font-weight: 400; letter-spacing: 0.02em; }
    @media (max-width: 768px) { .tg { grid-template-columns: 1fr; } }

    /* ── CTA ── */
    .cta-sec {
      background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      padding: clamp(64px, 8vw, 120px) 0; text-align: center; position: relative; overflow: hidden;
    }
    .cta-sec::before {
      content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
      width: 700px; height: 500px;
      background: radial-gradient(ellipse, rgba(200,165,90,0.04) 0%, transparent 55%);
      pointer-events: none;
    }
    .cta-sec * { position: relative; z-index: 1; }
    .cta-sec .st { max-width: 100%; margin: 12px auto 18px; }
    .cta-sec .sd { margin: 0 auto 40px; text-align: center; }
    .cta-sec .lk { color: var(--gold); border-bottom: 1px solid rgba(200,165,90,0.3); padding-bottom: 1px; transition: border-color 0.3s; }
    .cta-sec .lk:hover { border-color: var(--gold); }

    /* ── FOOTER ── */
    footer { background: var(--bg-2); border-top: 1px solid var(--border); padding: 80px 0 40px; }
    .fg { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
    .fb-desc { font-size: 0.85rem; color: var(--text-3); margin-top: 16px; max-width: 30ch; line-height: 1.7; font-weight: 300; }
    .fh { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-3); margin-bottom: 24px; }
    .fl { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .fl a { font-size: 0.85rem; color: var(--text-2); transition: color 0.3s; font-weight: 400; }
    .fl a:hover { color: var(--gold); }
    .fbt { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-3); }
    .fbt a { color: var(--text-3); transition: color 0.3s; }
    .fbt a:hover { color: var(--gold); }
    @media (max-width: 768px) { .fg { grid-template-columns: 1fr 1fr; gap: 32px; } .fbt { flex-direction: column; gap: 12px; text-align: center; } }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
    .rv { opacity: 0; transform: translateY(36px); transition: opacity 0.8s var(--ease-o), transform 0.8s var(--ease-o); }
    .rv.v { opacity: 1; transform: translateY(0); }
    .stg > * { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-o), transform 0.7s var(--ease-o); }
    .stg.v > *:nth-child(1) { transition-delay: 0s; }
    .stg.v > *:nth-child(2) { transition-delay: 0.1s; }
    .stg.v > *:nth-child(3) { transition-delay: 0.1s; }
    .stg.v > *:nth-child(4) { transition-delay: 0.2s; }
    .stg.v > *:nth-child(5) { transition-delay: 0.2s; }
    .stg.v > *:nth-child(6) { transition-delay: 0.3s; }
    .stg.v > * { opacity: 1; transform: translateY(0); }
  
/* ===== UNIVERSAL MOBILE FIXES =====
  main{position:relative!important}footer{position:relative!important;clear:both!important} */
@media(max-width:768px){
  /* Typography */
  body{font-size:15px;line-height:1.7}
  h1{font-size:1.8rem!important;line-height:1.1!important}
  h2{font-size:1.3rem!important}
  h3{font-size:1.1rem!important}
  
  /* Container padding */
  .c,.mx{padding:0 16px!important}
  
  /* Nav */
  .nav-links,.nl{display:none}
  .menu-btn,.mb{display:block!important}
  
  /* Hero sections */
  .hero,.wp-hero{padding-top:100px!important;padding-bottom:32px!important}
  .hero h1{font-size:clamp(1.8rem,7vw,2.4rem)!important}
  .hero p,.hero .sd,.sd,.sub,.wp-subtitle{font-size:0.9rem!important;max-width:100%!important}
  
  /* Blog content */
  .blog-content{padding:0!important}
  .blog-header h1{font-size:1.6rem!important}
  .blog-section p{font-size:0.9rem!important}
  
  /* Grids - all collapse to single column */
  .sg,.tg,.fg,.scores-grid,.preview-grid,.stats-grid{grid-template-columns:1fr!important}
  
  /* Footer */
  .fg{grid-template-columns:1fr!important;gap:24px!important}
  .fbt,.fb{flex-direction:column!important;gap:8px!important;text-align:center!important}
  
  /* Tables - horizontal scroll */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  th,td{padding:6px 8px!important;font-size:0.78rem!important;white-space:normal}
  
  /* Buttons */
  .btn-fill,.btn-cta,.bf,.bc0{width:100%;justify-content:center;padding:12px 20px!important;font-size:0.78rem!important}
  
  /* FAQ sections */
  .faq-q{font-size:0.88rem!important;padding:14px 0!important}
  .faq-ai{font-size:0.85rem!important}
  
  /* CTA sections */
  .cta-sec,.cta{padding:48px 0!important}
  .cta-sec h2,.cta h2,.st{font-size:1.5rem!important}
  
  /* Images */
  img{max-width:100%;height:auto}
  
  /* Breadcrumb */
  .bc{font-size:0.7rem!important;padding-top:80px!important}
  
  /* Service/feature grids */
  .service-grid,.feature-grid{grid-template-columns:1fr!important}
  
  /* Meta info */
  .blog-meta,.wp-meta,.meta{flex-direction:column!important;gap:6px!important;font-size:0.72rem!important}
  
  /* Related articles */
  .related-section a{padding:14px!important}
  
  /* Case study stats */
  .case-stat{padding:16px!important}
  
  /* Knowledge center */
  .module-grid,.lesson-grid{grid-template-columns:1fr!important}
  
  /* Whitepaper sidebar hidden */
  .sidebar,.wp-viz,.blog-sidebar{display:none!important}
  
  /* Whitepaper layout single column */
  .layout,.wp-layout{grid-template-columns:1fr!important}
  .text,.wp-text,.wp-body{max-width:100%!important}
  
  /* Audit tool */
  .audit-input{flex-direction:column!important}
  .score-ring{width:120px!important;height:120px!important}
  .detail-row{flex-direction:column!important;align-items:flex-start!important;gap:4px!important}
  .detail-row .value{max-width:100%!important;text-align:left!important}
  .actions{flex-direction:column!important}
  .actions button,.actions a{width:100%!important;justify-content:center!important}
  .scores-grid{grid-template-columns:repeat(3,1fr)!important}
  .score-card .v{font-size:1.1rem!important}
  .score-card .k{font-size:0.5rem!important}
  
  /* Tag lists */
  .tag-list{gap:3px!important}
  .tag{font-size:0.62rem!important}
  
  /* Prevent horizontal overflow */
  *{max-width:100vw}
  pre,code{overflow-x:auto;white-space:pre-wrap;word-break:break-word}
}

/* Small phones */
@media(max-width:400px){
  .c,.mx{padding:0 12px!important}
  h1{font-size:1.5rem!important}
  .hero h1{font-size:1.6rem!important}
  .scores-grid{grid-template-columns:repeat(2,1fr)!important}
  .nav{padding:0 8px}
}

/* ── COMPOUND CHART ── */
.cmp-wrap{max-width:1000px;margin:48px auto 0;position:relative}
.cmp-legend{display:flex;gap:32px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.cmp-key{display:inline-flex;align-items:center;gap:10px;font-size:0.72rem;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--text-2)}
.cmp-key i{display:inline-block;width:24px;height:2px;border-radius:1px}
.cmp-key-gold i{background:linear-gradient(90deg,#b89b4a,#e2cc7e)}
.cmp-key-cool i{background:#7a9bb0;height:0;border-top:2px dashed #7a9bb0;width:24px}
.cmp-svg{width:100%;height:auto;aspect-ratio:800/320;display:block;overflow:visible}
.cmp-line{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.4s cubic-bezier(.22,.61,.36,1)}
.cmp-line.cmp-cool{stroke-dasharray:4 6;stroke-dashoffset:0;opacity:0;transition:opacity 1.4s ease 0.2s}
.cmp-fill{opacity:0;transition:opacity 1.6s ease 1s}
.cmp-wrap.v .cmp-line.cmp-gold{stroke-dashoffset:0}
.cmp-wrap.v .cmp-line.cmp-cool{opacity:1}
.cmp-wrap.v .cmp-fill{opacity:1}
.cmp-axis{display:flex;justify-content:space-between;padding:0 4%;margin-top:16px;font-size:0.68rem;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--text-3)}
@media (max-width:600px){.cmp-legend{gap:20px}.cmp-key{font-size:0.65rem;letter-spacing:0.12em}}