/*
Theme Name: DC Night Club
Description: Festive Night Club rebrand child theme for dchakrabarty.com
Template: dc-rebuild
Version: 1.0
*/

      :root{
        color-scheme: dark;
        --bg:#150E33;
        --bg-deep:#0D0824;
        --surface:#1E1547;
        --surface-2:#251A57;
        --ink:#F4F0FF;
        --ink-soft:#BCAFE3;
        --line:rgba(196,181,253,.24);
        --purple:#8B5CF6;
        --lav:#A78BFA;
        --magenta:#F72585;
        --pink:#FF5CA8;
        --gold:#FFD166;
        --band:#0A051E;
        --band-ink:#F6F1FF;
        --band-soft:#B3A6DC;
        --shadow:0 24px 50px -20px rgba(0,0,0,.65);
      }
      @media (prefers-color-scheme: dark){
        :root{
          --bg:#070414;
          --bg-deep:#04020E;
          --surface:#130B30;
          --surface-2:#1A1040;
          --ink:#F6F2FF;
          --ink-soft:#A79BD6;
          --line:rgba(196,181,253,.2);
          --purple:#A78BFA;
          --lav:#C4B5FD;
          --magenta:#FF4D9D;
          --pink:#FF7AB8;
          --band:#030109;
          --band-soft:#9D90CC;
        }
      }
      *{box-sizing:border-box}
      html{scroll-behavior:smooth}
      body{
        margin:0; background:var(--bg); color:var(--ink);
        font-family:"Satoshi",system-ui,sans-serif; font-size:17px; line-height:1.6;
        overflow-x:hidden;
      }
      h1,h2,h3{font-family:"Clash Display","Satoshi",sans-serif; line-height:1.06; margin:0; font-weight:600; letter-spacing:.005em}
      p{margin:0}
      a{color:inherit}
      img{max-width:100%; display:block}
      .wrap{max-width:1180px; margin:0 auto; padding:0 22px}
      section{padding:92px 0}
      .accent-i{font-style:normal; color:var(--pink)}

      /* ---------- reveal on scroll ---------- */
      .rv{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s)}
      .rv.in{opacity:1; transform:none}

      /* ---------- nav ---------- */
      header.nav{
        position:sticky; top:0; z-index:60;
        background:color-mix(in srgb, var(--bg) 86%, transparent);
        backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
        border-bottom:1px solid var(--line);
      }
      .nav-in{display:flex; align-items:center; gap:28px; padding:14px 0}
      .wordmark{font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.32rem; text-decoration:none; letter-spacing:.01em}
      .wordmark span{color:var(--magenta)}
      .nav-links{display:flex; gap:26px; margin-left:auto; font-weight:700; font-size:.95rem}
      .nav-links a{text-decoration:none; opacity:.82; padding-bottom:3px; border-bottom:2px solid transparent}
      .nav-links a:hover{opacity:1; color:var(--lav); border-bottom-color:var(--magenta)}
      .nav-cta{margin-left:8px}

      /* ---------- buttons & stickers ---------- */
      .btn{
        display:inline-flex; align-items:center; gap:9px; cursor:pointer;
        font-family:"Satoshi",sans-serif; font-weight:900; font-size:1rem;
        padding:14px 26px; border-radius:999px; border:2px solid var(--purple);
        background:linear-gradient(120deg, var(--purple), var(--magenta));
        color:#fff; text-decoration:none;
        transition:transform .18s ease, box-shadow .18s ease;
        box-shadow:0 10px 26px -8px rgba(247,37,133,.55);
      }
      .btn:hover{transform:translateY(-2px); box-shadow:0 16px 32px -8px rgba(139,92,246,.65)}
      .btn:active{transform:translateY(1px)}
      .btn-coral{background:linear-gradient(120deg, var(--purple), var(--magenta)); border-color:transparent}
      .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none}
      .btn-ghost:hover{border-color:var(--lav); color:var(--lav); box-shadow:0 0 22px -6px rgba(167,139,250,.6)}
      .btn-light{background:var(--gold); color:#241038; border-color:var(--gold); box-shadow:0 10px 26px -8px rgba(255,209,102,.5)}
      .sticker{
        display:inline-block; font-weight:900; font-size:.82rem; letter-spacing:.02em;
        padding:7px 14px; border-radius:999px; border:1.5px solid rgba(255,209,102,.7);
        background:rgba(255,209,102,.14); color:var(--gold);
        transform:rotate(-2deg);
      }
      .sticker.teal{background:rgba(247,37,133,.16); border-color:rgba(247,37,133,.7); color:var(--pink); transform:rotate(1.6deg)}
      .sticker.violet{background:rgba(139,92,246,.2); border-color:rgba(167,139,250,.7); color:var(--lav); transform:rotate(-1.4deg)}

      /* ---------- hero ---------- */
      .hero{
        padding:64px 0 30px; position:relative;
        background:
          radial-gradient(640px 420px at 88% 4%, rgba(139,92,246,.30), transparent 62%),
          radial-gradient(540px 400px at 4% 34%, rgba(247,37,133,.17), transparent 62%),
          radial-gradient(420px 300px at 55% 110%, rgba(255,209,102,.08), transparent 60%);
      }
      .hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:52px; align-items:center}
      .hero h1{font-size:clamp(2.6rem,5.8vw,4.45rem); font-weight:700}
      .hl{position:relative; white-space:nowrap}
      .hl svg{position:absolute; left:0; bottom:-.18em; width:100%; height:.32em}
      .hero-sub{margin-top:24px; font-size:1.13rem; color:var(--ink-soft); max-width:34rem}
      .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
      .hero-note{margin-top:18px; font-weight:700; font-size:.92rem; color:var(--ink-soft)}
      .hero-note b{color:var(--gold)}
      .hero-visual{position:relative}
      .hero-frame{
        position:relative; border-radius:26px; overflow:hidden;
        border:2px solid rgba(167,139,250,.65);
        box-shadow:0 0 46px rgba(139,92,246,.45), 15px 15px 0 rgba(247,37,133,.5);
        transform:rotate(1.2deg);
      }
      .hero-frame img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.4; filter:saturate(1.12) contrast(1.04)}
      .hero-frame::after{
        content:""; position:absolute; inset:0; pointer-events:none;
        background:linear-gradient(160deg, rgba(139,92,246,.20), rgba(247,37,133,.10) 55%, rgba(13,8,36,.14));
        mix-blend-mode:overlay;
      }
      .chip{
        position:absolute; display:flex; align-items:center; gap:9px;
        background:rgba(16,10,40,.94); border:1.5px solid var(--line); border-radius:16px;
        padding:10px 14px; font-weight:900; font-size:.86rem; line-height:1.3; color:var(--ink);
        box-shadow:0 14px 30px -10px rgba(0,0,0,.7), 0 0 18px -6px rgba(139,92,246,.55); max-width:230px;
      }
      .chip small{display:block; font-weight:500; color:var(--ink-soft); font-size:.76rem}
      .chip .dot{flex:none; width:12px; height:12px; border-radius:50%}
      .chip-1{top:6%; left:-34px; transform:rotate(-3deg)}
      .chip-2{bottom:16%; right:-26px; transform:rotate(2.4deg)}
      .chip-3{bottom:-20px; left:8%; transform:rotate(-1.6deg)}
      @keyframes floaty{0%,100%{margin-top:0}50%{margin-top:-9px}}
      .chip{animation:floaty 5.5s ease-in-out infinite}
      .chip-2{animation-delay:1.2s}.chip-3{animation-delay:2.1s}

      /* ---------- marquee ---------- */
      .marquee{background:linear-gradient(90deg, var(--magenta), var(--purple)); color:#fff; overflow:hidden; padding:13px 0; margin-top:56px; box-shadow:0 0 34px -8px rgba(247,37,133,.55)}
      .mq-track{display:flex; width:max-content; animation:mq 30s linear infinite}
      .mq-track span{font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.12rem; padding:0 14px; white-space:nowrap}
      .mq-track i{font-style:normal; color:var(--gold); padding:0 2px}
      @keyframes mq{to{transform:translateX(-50%)}}

      /* ---------- stats band ---------- */
      .band{background:var(--band); color:var(--band-ink)}
      .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
      .stat{background:linear-gradient(180deg, rgba(124,58,237,.14), rgba(10,5,30,.55)); border:1px solid rgba(124,58,237,.4); border-radius:18px; padding:30px 20px; text-align:center; box-shadow:0 0 28px -10px rgba(124,58,237,.5)}
      .stat .num{font-family:"Clash Display",sans-serif; font-size:clamp(2.4rem,4.6vw,3.5rem); font-weight:700; line-height:1}
      .stat .lbl{margin-top:8px; color:var(--band-soft); font-weight:500; font-size:.95rem}
      .stat:nth-child(1) .num{color:var(--gold)}
      .stat:nth-child(2) .num{color:var(--pink)}
      .stat:nth-child(3) .num{color:var(--lav)}
      .stat:nth-child(4) .num{color:var(--magenta)}

      /* ---------- section heads ---------- */
      .sec-head{max-width:44rem; margin-bottom:48px}
      .sec-head h2{font-size:clamp(2.05rem,4.3vw,3.1rem); font-weight:700}
      .sec-head p{margin-top:14px; color:var(--ink-soft); font-size:1.06rem}
      .sec-head.center{margin-left:auto; margin-right:auto; text-align:center}

      /* ---------- services ---------- */
      .svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
      .svc{
        --acc:var(--magenta);
        background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 13%, var(--surface)), var(--surface) 70%);
        border:1px solid color-mix(in srgb, var(--acc) 45%, var(--line));
        border-radius:22px; padding:28px 26px 24px; position:relative;
        transition:transform .25s ease, box-shadow .25s ease;
        transform-style:preserve-3d; will-change:transform;
      }
      .svc:hover{box-shadow:0 22px 40px -16px color-mix(in srgb, var(--acc) 60%, transparent), 0 0 26px -8px color-mix(in srgb, var(--acc) 55%, transparent)}
      .svc .no{
        position:absolute; top:14px; right:20px; font-family:"Clash Display",sans-serif;
        font-size:2.5rem; font-weight:700; color:var(--acc); opacity:.35; line-height:1;
      }
      .svc .ico{
        width:52px; height:52px; border-radius:16px; background:var(--acc);
        display:grid; place-items:center;
        box-shadow:0 10px 22px -8px color-mix(in srgb, var(--acc) 80%, transparent); margin-bottom:18px;
      }
      .svc .ico svg{width:27px; height:27px}
      .svc h3{font-size:1.34rem; margin-bottom:9px}
      .svc p{color:var(--ink-soft); font-size:.97rem}
      .svc .tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
      .svc .tag{font-size:.74rem; font-weight:900; padding:4px 10px; border-radius:999px; border:1.5px solid color-mix(in srgb, var(--acc) 70%, transparent); color:var(--ink)}
      .svc .go{margin-top:18px; font-weight:900; font-size:.92rem; color:var(--ink); text-decoration:none; display:inline-flex; gap:6px; align-items:center}
      .svc .go:hover{color:var(--acc)}

      /* ---------- tabs ---------- */
      .tabs-box{
        margin-top:26px; border:1px solid var(--line); border-radius:24px;
        background:var(--surface); box-shadow:0 26px 50px -22px rgba(247,37,133,.4); overflow:hidden;
      }
      .tabs-head{display:flex; gap:10px; padding:18px 22px 0; flex-wrap:wrap; align-items:center}
      .tabs-head .t-label{font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.12rem; margin-right:auto}
      .tab-btn{
        font-family:"Satoshi",sans-serif; font-weight:900; font-size:.92rem; cursor:pointer;
        padding:10px 20px; border-radius:999px; border:1.5px solid var(--line);
        background:transparent; color:var(--ink); transition:background .2s, color .2s, border-color .2s;
      }
      .tab-btn[aria-selected="true"]{background:linear-gradient(120deg, var(--purple), var(--magenta)); color:#fff; border-color:transparent}
      .tab-panel{display:none; padding:20px 22px 26px; gap:26px; grid-template-columns:1fr 1fr}
      .tab-panel.on{display:grid; animation:fadein .35s ease}
      @keyframes fadein{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
      .tab-panel h4{font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.26rem; margin:0 0 8px}
      .tab-panel p{color:var(--ink-soft)}
      .tab-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
      .tab-list li{display:flex; gap:10px; font-weight:700}
      .tab-list li::before{content:""; flex:none; width:10px; height:10px; border-radius:3px; background:var(--magenta); margin-top:8px; transform:rotate(45deg)}

      /* ---------- rufus ---------- */
      .rufus-sec{
        background:
          radial-gradient(560px 380px at 90% 0%, rgba(139,92,246,.26), transparent 60%),
          radial-gradient(480px 340px at 0% 100%, rgba(247,37,133,.14), transparent 60%),
          var(--band);
        color:var(--band-ink); position:relative; overflow:hidden;
      }
      .rufus-grid{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center}
      .rufus-sec h2{font-size:clamp(2.05rem,4.3vw,3.1rem); font-weight:700}
      .rufus-sec h2 em{font-style:normal; color:var(--lav)}
      .rufus-copy{margin-top:16px; color:var(--band-soft); font-size:1.06rem}
      .check-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:13px}
      .check-list li{display:flex; gap:12px; font-weight:700; align-items:flex-start}
      .check-list .ck{
        flex:none; width:24px; height:24px; border-radius:8px;
        background:linear-gradient(135deg, var(--purple), var(--magenta));
        display:grid; place-items:center; margin-top:2px;
      }
      .check-list .ck svg{width:14px; height:14px}
      .chat{
        background:#FBF8FF; color:#221543; border-radius:26px; padding:26px;
        border:2px solid rgba(167,139,250,.8);
        box-shadow:0 0 44px -6px rgba(139,92,246,.55), 14px 14px 0 rgba(139,92,246,.45);
        transform:rotate(-1deg);
      }
      .chat .chat-top{display:flex; align-items:center; gap:10px; font-weight:900; margin-bottom:18px}
      .chat .chat-top .who{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, #8B5CF6, #F72585); display:grid; place-items:center}
      .chat .chat-top .who svg{width:19px; height:19px}
      .bubble{border-radius:18px; padding:13px 16px; font-size:.95rem; line-height:1.5; max-width:92%}
      .bubble.q{background:#EDE7FD; border-bottom-left-radius:6px; font-weight:700}
      .bubble.a{background:#fff; border:2px solid #2A1650; margin-top:12px; margin-left:auto; border-bottom-right-radius:6px}
      .bubble.a b{color:#7C3AED}
      .src-chip{
        margin-top:14px; display:inline-block; font-size:.78rem; font-weight:900;
        background:#FFD166; border:2px solid #2A1650; border-radius:999px; padding:5px 12px; color:#241038;
      }

      /* ---------- AI edge ---------- */
      .method{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:stretch}
      .m-step{border:1px solid var(--line); border-radius:20px; padding:24px; background:var(--surface)}
      .m-step .m-no{font-family:"Clash Display",sans-serif; font-weight:700; font-size:1rem; color:var(--pink)}
      .m-step h3{font-size:1.32rem; margin:6px 0 8px}
      .m-step p{color:var(--ink-soft); font-size:.96rem}
      .m-arrow{display:grid; place-items:center; font-family:"Clash Display",sans-serif; font-size:1.7rem; color:var(--gold); font-weight:700}
      .ai-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
      .ai-chip{
        font-weight:900; font-size:.88rem; padding:9px 16px; border-radius:999px;
        border:1.5px solid var(--line); background:var(--surface-2);
      }
      .ai-chip:nth-child(odd){transform:rotate(-1.2deg)}
      .ai-chip:nth-child(even){transform:rotate(1.2deg)}
      .honest{margin-top:22px; font-weight:700; color:var(--ink-soft)}
      .honest b{color:var(--gold)}

      /* ---------- calculator ---------- */
      .calc{
        display:grid; grid-template-columns:1.15fr .85fr; gap:0; border:1px solid var(--line);
        border-radius:28px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(247,37,133,.45); background:var(--surface);
      }
      .calc-in{padding:34px 34px 30px}
      .calc-in h3{font-size:1.52rem; margin-bottom:6px}
      .calc-in .sub{color:var(--ink-soft); font-size:.96rem; margin-bottom:26px}
      .ctl{margin-bottom:24px}
      .ctl label{display:flex; justify-content:space-between; font-weight:900; font-size:.94rem; margin-bottom:9px}
      .ctl label output{color:var(--pink); font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.1rem}
      .ctl input[type=range]{width:100%; accent-color:var(--magenta); height:28px; cursor:pointer}
      .calc-out{background:linear-gradient(150deg, #6D28D9, #B3125F); color:#FFF3FA; padding:34px; display:flex; flex-direction:column; justify-content:center}
      .calc-out .o-lbl{font-weight:700; color:#E4D8FF; font-size:.92rem}
      .calc-out .o-big{font-family:"Clash Display",sans-serif; font-weight:700; font-size:clamp(2.5rem,4.8vw,3.5rem); color:var(--gold); line-height:1.05; margin:6px 0}
      .calc-out .o-year{font-weight:700; margin-bottom:24px}
      .calc-out .o-year b{color:#fff}

      /* ---------- process ---------- */
      .proc{position:relative; margin-top:8px}
      .proc-line{position:absolute; top:27px; left:4%; right:4%; height:4px; border-radius:4px; background:var(--line); overflow:hidden}
      .proc-line i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--purple),var(--magenta),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform 1.6s cubic-bezier(.3,.7,.2,1)}
      .proc.in .proc-line i{transform:scaleX(1)}
      .proc-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative}
      .p-step{text-align:left}
      .p-dot{
        width:54px; height:54px; border-radius:50%; border:2px solid rgba(255,255,255,.35);
        display:grid; place-items:center; font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.2rem;
        background:var(--surface); margin-bottom:16px; position:relative; z-index:1; color:var(--ink);
      }
      .p-step:nth-child(1) .p-dot{background:var(--purple); color:#fff; box-shadow:0 0 22px -4px var(--purple)}
      .p-step:nth-child(2) .p-dot{background:var(--magenta); color:#fff; box-shadow:0 0 22px -4px var(--magenta)}
      .p-step:nth-child(3) .p-dot{background:var(--gold); color:#241038; box-shadow:0 0 22px -4px var(--gold)}
      .p-step:nth-child(4) .p-dot{background:var(--lav); color:#241038; box-shadow:0 0 22px -4px var(--lav)}
      .p-step h3{font-size:1.24rem; margin-bottom:7px}
      .p-step p{color:var(--ink-soft); font-size:.95rem}

      /* ---------- proof ---------- */
      .proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
      .proof{
        background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:26px;
        box-shadow:8px 8px 0 color-mix(in srgb, var(--acc) 55%, transparent);
      }
      .proof .p-tag{font-size:.76rem; font-weight:900; letter-spacing:.03em; color:var(--acc); text-transform:uppercase}
      .proof h3{font-size:1.32rem; margin:8px 0 6px}
      .proof .big{font-family:"Clash Display",sans-serif; font-weight:700; font-size:2rem; line-height:1.15; margin:10px 0 4px}
      .proof p{color:var(--ink-soft); font-size:.95rem}
      .bars{margin-top:18px; display:grid; gap:8px}
      .bar-row{display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center; font-size:.78rem; font-weight:900; color:var(--ink-soft)}
      .bar{height:12px; border-radius:99px; background:rgba(196,181,253,.16); overflow:hidden}
      .bar i{display:block; height:100%; border-radius:99px; background:var(--acc); width:0; transition:width 1.3s cubic-bezier(.3,.7,.2,1) .2s}
      .proof.in .bar i{width:var(--w)}
      .quote-card{
        margin-top:22px; border-radius:22px; padding:28px; display:flex; gap:26px; align-items:center; flex-wrap:wrap;
        background:color-mix(in srgb, var(--gold) 13%, var(--surface)); border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
      }
      .quote-card .q-big{font-family:"Clash Display",sans-serif; font-weight:700; font-size:clamp(2rem,4vw,3rem); color:var(--gold); line-height:1}
      .quote-card .q-txt{font-weight:500; color:var(--ink-soft)}
      .quote-card .q-txt b{color:var(--ink)}

      /* ---------- faq ---------- */
      .faq-list{max-width:820px; margin:0 auto; display:grid; gap:14px}
      .faq{border:1px solid var(--line); border-radius:18px; background:var(--surface); overflow:hidden}
      .faq-q{
        width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
        background:none; border:0; cursor:pointer; text-align:left; padding:20px 22px;
        font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.14rem; color:var(--ink);
      }
      .faq-q .plus{
        flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line);
        display:grid; place-items:center; font-family:"Satoshi",sans-serif; font-weight:900; font-size:1.1rem;
        transition:transform .3s ease, background .3s ease, color .3s ease;
      }
      .faq.open .plus{transform:rotate(45deg); background:var(--gold); color:#241038; border-color:var(--gold)}
      .faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease}
      .faq.open .faq-a{grid-template-rows:1fr}
      .faq-a > div{overflow:hidden}
      .faq-a p{padding:0 22px 22px; color:var(--ink-soft)}

      /* ---------- final cta ---------- */
      .cta-band{
        background:
          radial-gradient(520px 320px at 15% 0%, rgba(139,92,246,.3), transparent 60%),
          radial-gradient(520px 320px at 85% 100%, rgba(247,37,133,.24), transparent 60%),
          var(--band);
        color:var(--band-ink); text-align:center; position:relative; overflow:hidden;
      }
      .cta-band h2{font-size:clamp(2.15rem,4.7vw,3.45rem); font-weight:700; max-width:46rem; margin:0 auto}
      .cta-band h2 em{font-style:normal; color:var(--gold)}
      .cta-band p{margin:18px auto 30px; color:var(--band-soft); max-width:36rem; font-size:1.05rem}
      .wave{display:block; width:100%; height:54px; margin-bottom:-1px}

      /* ---------- footer options ---------- */
      .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
      .foot-opt{margin-bottom:64px}
      .foot-opt:last-child{margin-bottom:0}
      .opt-label{display:flex; gap:16px; align-items:flex-start; margin-bottom:18px}
      .opt-letter{
        flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
        font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.3rem; color:#fff;
        background:linear-gradient(135deg, var(--purple), var(--magenta));
        box-shadow:0 10px 22px -8px rgba(247,37,133,.6);
      }
      .opt-label h3{font-size:1.42rem}
      .opt-label p{color:var(--ink-soft); font-size:.97rem; margin-top:3px; max-width:44rem}
      .foot-mock{border:1px solid var(--line); border-radius:26px; overflow:hidden; background:var(--band); color:var(--band-ink); box-shadow:var(--shadow)}
      .foot-mock a{text-decoration:none}
      .f-col h4{font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.02rem; margin:0 0 14px; color:var(--ink)}
      .f-col ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
      .f-col a{color:var(--band-soft); font-size:.94rem; font-weight:500}
      .f-col a:hover{color:var(--lav)}
      .f-bar{
        display:flex; gap:12px 26px; flex-wrap:wrap; align-items:center; justify-content:space-between;
        padding:18px 30px; border-top:1px solid var(--line); font-size:.85rem; color:var(--band-soft);
      }
      .f-bar nav{display:flex; gap:20px; flex-wrap:wrap; font-weight:700}
      .f-bar nav a{color:var(--band-soft)}
      .f-bar nav a:hover{color:var(--lav)}
      .f-bar a.to-top{font-weight:900; color:var(--gold)}
      .f-bar a.to-top:hover{color:var(--gold)}
      .socials{display:flex; gap:10px; margin-top:16px}
      .socials a{
        width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line);
        display:grid; place-items:center; color:var(--band-soft);
        transition:border-color .2s, color .2s, transform .2s;
      }
      .socials a:hover{border-color:var(--magenta); color:var(--pink); transform:translateY(-2px)}
      .socials svg{width:17px; height:17px}

      /* Footer Option A: newsletter-led */
      .fa-news{
        display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center;
        padding:36px 30px 30px;
        background:
          radial-gradient(480px 240px at 100% 0%, rgba(139,92,246,.28), transparent 65%),
          radial-gradient(380px 220px at 0% 100%, rgba(247,37,133,.16), transparent 65%);
      }
      .fa-news h3{font-size:1.66rem}
      .fa-news p{color:var(--band-soft); margin-top:8px; font-size:.98rem; max-width:30rem}
      .fa-form{display:flex; gap:10px}
      .fa-form input{
        flex:1; min-width:0; padding:13px 18px; border-radius:999px; border:1.5px solid var(--line);
        background:rgba(13,8,36,.55); color:var(--ink); font-family:"Satoshi",sans-serif; font-size:.95rem;
      }
      .fa-form input::placeholder{color:var(--band-soft)}
      .fa-form input:focus{outline:2px solid var(--magenta); outline-offset:1px; border-color:transparent}
      .fa-form .btn{flex:none}
      .fa-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:32px 30px; border-top:1px solid var(--line)}
      .fa-contact p{color:var(--band-soft); font-size:.94rem}
      .fa-contact a.mail{color:var(--gold); font-weight:900; font-size:1rem}

      /* Footer Option B: big-type statement */
      .fb-top{padding:44px 30px 6px}
      .fb-big{font-family:"Clash Display",sans-serif; font-weight:700; font-size:clamp(2.5rem,7.2vw,5.3rem); line-height:.98; letter-spacing:.01em}
      .fb-big span{color:var(--magenta)}
      .fb-line{margin-top:14px; color:var(--band-soft); font-size:1.08rem; max-width:36rem}
      .fb-cta{margin-top:24px; display:flex; gap:16px; flex-wrap:wrap; align-items:center}
      .fb-cta .note{font-weight:700; color:var(--band-soft); font-size:.92rem}
      .fb-cta .note b{color:var(--gold)}
      .fb-chips{display:flex; flex-wrap:wrap; gap:9px; padding:26px 30px 32px}
      .fb-chip{font-size:.8rem; font-weight:900; padding:6px 13px; border-radius:999px; border:1.5px solid var(--line); color:var(--band-soft)}

      /* Footer Option C: proof strip + sitemap */
      .fc-proof{
        display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:28px 30px;
        border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--gold) 7%, transparent);
      }
      .fc-proof .n{font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.7rem; line-height:1}
      .fc-proof .l{color:var(--band-soft); font-size:.86rem; margin-top:5px}
      .fc-proof div:nth-child(1) .n{color:var(--gold)}
      .fc-proof div:nth-child(2) .n{color:var(--pink)}
      .fc-proof div:nth-child(3) .n{color:var(--lav)}
      .fc-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; padding:32px 30px}
      .fc-brand p{color:var(--band-soft); font-size:.95rem; margin-top:12px; max-width:19rem}
      .fc-contact a.mail{color:var(--gold); font-weight:900}
      .fc-contact .btn{margin-top:16px; padding:11px 20px; font-size:.9rem}

      @media (max-width:900px){
        .fa-news{grid-template-columns:1fr}
        .fa-grid{grid-template-columns:repeat(2,1fr)}
        .fc-grid{grid-template-columns:repeat(2,1fr)}
      }
      @media (max-width:560px){
        .fa-grid,.fc-grid,.fc-proof{grid-template-columns:1fr}
        .fa-form{flex-direction:column}
        .fa-form .btn{justify-content:center}
        .f-bar{justify-content:flex-start}
      }

      /* ---------- page previews ---------- */
      .pg{display:block}
      .crumb{font-weight:700; font-size:.9rem; color:var(--ink-soft)}
      .crumb a{color:var(--lav); text-decoration:none}
      .crumb a:hover{text-decoration:underline}

      /* ---------- fit cards / other services ---------- */
      .fit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
      .fit-card{border:1px solid var(--line); border-radius:20px; padding:24px; background:var(--surface)}
      .fit-card h3{font-size:1.22rem; margin-bottom:8px}
      .fit-card p{color:var(--ink-soft); font-size:.96rem}
      .fit-card.not{border-style:dashed; background:transparent}
      .fit-card .fk{font-family:"Clash Display",sans-serif; font-weight:700; color:var(--pink); font-size:.95rem; margin-bottom:8px}
      .oth-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
      .oth-card{
        display:block; text-decoration:none; border:1px solid var(--line); border-radius:18px; padding:18px;
        background:var(--surface); transition:transform .2s ease, border-color .2s ease;
      }
      .oth-card:hover{transform:translateY(-3px); border-color:var(--acc)}
      .oth-card .o-no{font-family:"Clash Display",sans-serif; font-weight:700; color:var(--acc); font-size:.9rem}
      .oth-card h3{font-size:1.05rem; margin:5px 0 4px}
      .oth-card p{color:var(--ink-soft); font-size:.85rem}

      /* ---------- about ---------- */
      .op-card{
        border:1px solid var(--line); border-radius:26px; padding:30px; background:var(--surface);
        box-shadow:12px 12px 0 rgba(247,37,133,.35);
      }
      .op-mono{
        width:74px; height:74px; border-radius:22px; display:grid; place-items:center;
        font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.7rem; color:#fff;
        background:linear-gradient(135deg, var(--purple), var(--magenta)); margin-bottom:18px;
      }
      .op-card h3{font-size:1.5rem}
      .op-card .role{color:var(--pink); font-weight:900; font-size:.9rem; margin:4px 0 14px}
      .op-card p{color:var(--ink-soft); font-size:.97rem}
      .op-card p a{color:var(--gold); font-weight:900}

      /* ---------- insights ---------- */
      .flt-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px}
      .flt-btn{
        font-family:"Satoshi",sans-serif; font-weight:900; font-size:.88rem; cursor:pointer;
        padding:9px 17px; border-radius:999px; border:1.5px solid var(--line);
        background:transparent; color:var(--ink); transition:background .2s, color .2s, border-color .2s;
      }
      .flt-btn:hover{border-color:var(--lav); color:var(--lav)}
      .flt-btn[aria-selected="true"]{background:linear-gradient(120deg, var(--purple), var(--magenta)); color:#fff; border-color:transparent}
      .art-card .a-meta{margin-top:16px; font-size:.8rem; font-weight:900; color:var(--ink-soft)}

      /* ---------- contact ---------- */
      .c-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start}
      .c-form{border:1px solid var(--line); border-radius:26px; background:var(--surface); padding:30px; box-shadow:0 26px 50px -22px rgba(247,37,133,.4)}
      .c-form h3{font-size:1.4rem; margin-bottom:6px}
      .c-form .sub{color:var(--ink-soft); font-size:.95rem; margin-bottom:22px}
      .fld{margin-bottom:16px}
      .fld label{display:block; font-weight:900; font-size:.88rem; margin-bottom:7px}
      .fld input,.fld select,.fld textarea{
        width:100%; padding:12px 16px; border-radius:14px; border:1.5px solid var(--line);
        background:rgba(13,8,36,.45); color:var(--ink); font-family:"Satoshi",sans-serif; font-size:.96rem;
      }
      .fld select option{color:#221543}
      .fld textarea{min-height:96px; resize:vertical}
      .fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--magenta); outline-offset:1px; border-color:transparent}
      .topic-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
      .t-chip{
        font-family:"Satoshi",sans-serif; font-weight:900; font-size:.82rem; cursor:pointer;
        padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--ink);
        transition:background .2s, color .2s, border-color .2s;
      }
      .t-chip:hover{border-color:var(--lav)}
      .t-chip.sel{background:linear-gradient(120deg, var(--purple), var(--magenta)); color:#fff; border-color:transparent}
      .form-note{margin-top:14px; font-size:.85rem; color:var(--ink-soft); font-weight:700}

      /* ---------- detail pages ---------- */
      .pageswitch.sub
      .card-link{margin-top:18px; font-weight:900; font-size:.92rem; display:inline-flex; gap:6px; align-items:center; text-decoration:none; color:var(--ink)}
      .card-link:hover{color:var(--acc, var(--lav))}
      .kpi-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
      .meta-row{display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center; margin-top:22px; color:var(--ink-soft); font-weight:700; font-size:.93rem}
      .meta-row b{color:var(--gold)}
      .article-body{max-width:46rem}
      .article-body > p{color:var(--ink-soft); font-size:1.05rem; margin-bottom:18px}
      .article-body > p b{color:var(--ink)}
      .article-body h3{font-size:1.52rem; margin:38px 0 12px}
      .article-body ul{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:11px}
      .article-body ul li{display:flex; gap:11px; color:var(--ink-soft); font-weight:500}
      .article-body ul li::before{content:""; flex:none; width:10px; height:10px; border-radius:3px; background:var(--magenta); margin-top:9px; transform:rotate(45deg)}
      .article-body ul li b{color:var(--ink)}
      .pull-quote{
        border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
        background:color-mix(in srgb, var(--gold) 10%, var(--surface));
        border-radius:20px; padding:26px 28px; margin:30px 0;
        font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.32rem; line-height:1.38;
      }
      .pull-quote span{display:block; margin-top:10px; font-family:"Satoshi",sans-serif; font-size:.9rem; font-weight:700; color:var(--ink-soft)}
      .next-case{
        display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
        border:1px solid var(--line); border-radius:22px; padding:24px 26px; background:var(--surface); text-decoration:none;
        transition:transform .2s ease, border-color .2s ease;
      }
      .next-case:hover{transform:translateY(-3px); border-color:var(--lav)}
      .next-case .nc-tag{font-size:.76rem; font-weight:900; letter-spacing:.03em; text-transform:uppercase; color:var(--pink)}
      .next-case h3{font-size:1.3rem; margin-top:5px}
      .next-case .nc-arrow{font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.8rem; color:var(--gold)}
      .oth-grid.three{grid-template-columns:repeat(3,1fr)}
      .stats.three{grid-template-columns:repeat(3,1fr)}
      @media (max-width:700px){
        .oth-grid.three{grid-template-columns:1fr 1fr}
        .stats.three{grid-template-columns:1fr}
      }

      /* ---------- case study detail: original content components ---------- */
      .fact-band{background:linear-gradient(90deg, var(--magenta), var(--purple)); color:#fff; margin-top:46px; padding:15px 0; box-shadow:0 0 34px -8px rgba(247,37,133,.55)}
      .fact-band .fb-in{display:flex; flex-wrap:wrap; gap:8px 0; align-items:center; font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.04rem}
      .fact-band .fb-in span{white-space:nowrap}
      .fact-band .fb-in i{font-style:normal; color:var(--gold); padding:0 12px}
      .subnav{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
      .subnav a{
        font-size:.84rem; font-weight:900; text-decoration:none; color:var(--ink);
        border:1.5px solid var(--line); border-radius:999px; padding:7px 15px; background:var(--surface);
        transition:border-color .2s, color .2s;
      }
      .subnav a:hover{border-color:var(--magenta); color:var(--pink)}
      .story-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:46px; align-items:start}
      .fig{margin:0}
      .fig-btn{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:18px}
      .fig img{width:100%; height:auto; display:block; border-radius:18px; border:1px solid var(--line); background:#fff}
      .fig figcaption{margin-top:11px; font-size:.9rem; font-weight:600; color:var(--ink-soft); line-height:1.45}
      .fig .zoom-hint{font-size:.78rem; font-weight:900; color:var(--pink); text-transform:uppercase; letter-spacing:.04em}
      .fit-grid.four{grid-template-columns:repeat(2,1fr)}
      .sol-box{margin-top:8px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 26px 50px -22px rgba(247,37,133,.35); overflow:hidden}
      .sol-head{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:20px 22px 0}
      .sol-btn{
        display:flex; gap:12px; align-items:flex-start; text-align:left; cursor:pointer;
        font-family:"Satoshi",sans-serif; font-weight:900; font-size:.95rem; line-height:1.35; color:var(--ink);
        padding:13px 16px; border-radius:16px; border:1.5px solid var(--line); background:transparent;
        transition:background .2s, color .2s, border-color .2s;
      }
      .sol-btn .n{
        flex:none; width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
        background:color-mix(in srgb, var(--lav) 22%, transparent); color:var(--lav);
        font-family:"Clash Display",sans-serif; font-weight:700; font-size:.9rem;
      }
      .sol-btn[aria-selected="true"]{background:linear-gradient(120deg, var(--purple), var(--magenta)); color:#fff; border-color:transparent}
      .sol-btn[aria-selected="true"] .n{background:rgba(255,255,255,.22); color:#fff}
      .sol-panel{display:none; padding:26px 22px 28px}
      .sol-panel.on{display:block; animation:fadein .35s ease}
      .sol-panel h3{font-size:1.42rem; margin-bottom:12px}
      .sol-panel .prose p{color:var(--ink-soft); font-size:1.02rem; margin-bottom:14px}
      .sol-panel .prose p b{color:var(--ink)}
      .sol-panel .fig{margin-top:20px}
      .evid-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
      .lightbox{
        position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
        background:rgba(7,4,20,.92); padding:26px; cursor:zoom-out;
      }
      .lightbox.open{display:flex}
      .lightbox figure{margin:0; max-width:min(1060px,94vw)}
      .lightbox img{width:100%; height:auto; max-height:82vh; object-fit:contain; border-radius:14px; background:#fff; display:block}
      .lightbox figcaption{margin-top:12px; text-align:center; color:#EDE8FF; font-weight:600; font-size:.95rem}
      .lightbox .lb-close{
        position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%;
        border:1.5px solid rgba(255,255,255,.4); background:transparent; color:#fff; font-size:1.3rem; cursor:pointer;
      }
      @media (max-width:900px){
        .story-grid{grid-template-columns:1fr}
      }
      @media (max-width:700px){
        .fit-grid.four{grid-template-columns:1fr}
        .sol-head{grid-template-columns:1fr}
        .evid-grid{grid-template-columns:1fr}
      }

      /* ---------- service enrichment: deep dive + visual panel ---------- */
      .deep-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:start}
      .deep-copy p{color:var(--ink-soft); font-size:1.03rem; margin-bottom:16px}
      .deep-copy p b{color:var(--ink)}
      .deep-copy h3{font-size:1.38rem; margin:28px 0 10px}
      .deep-copy h3:first-child{margin-top:0}
      .panel{
        --acc:var(--purple);
        border:1px solid var(--line); border-radius:22px; background:var(--surface);
        padding:26px; box-shadow:10px 10px 0 color-mix(in srgb, var(--acc) 42%, transparent);
      }
      .panel .p-tag{font-size:.76rem; font-weight:900; letter-spacing:.03em; text-transform:uppercase; color:var(--acc)}
      .panel h3{font-size:1.3rem; margin:8px 0 4px}
      .panel .p-sub{color:var(--ink-soft); font-size:.93rem; margin-bottom:16px}
      .panel .bar i{width:0}
      .panel.in .bar i{width:var(--w)}
      .srow{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px dashed var(--line); font-weight:700; font-size:.97rem}
      .srow:last-of-type{border-bottom:0}
      .srow .sd{flex:none; width:11px; height:11px; border-radius:50%}
      .srow .sv{margin-left:auto; font-family:"Clash Display",sans-serif; font-weight:700; color:var(--gold); white-space:nowrap; text-align:right}
      .srow small{display:block; font-weight:500; color:var(--ink-soft); font-size:.82rem}
      .panel-note{margin-top:16px; font-size:.88rem; color:var(--ink-soft); font-weight:700}
      @media (max-width:900px){
        .deep-grid{grid-template-columns:1fr}
      }

      /* ---------- real footer (Option A: The Briefing) ---------- */
      .foot-real{background:var(--band); color:var(--band-ink); border-top:1px solid var(--line)}

      @media (max-width:1020px){
        .oth-grid{grid-template-columns:repeat(3,1fr)}
      }
      @media (max-width:900px){
        .fit-grid{grid-template-columns:1fr}
        .c-grid{grid-template-columns:1fr}
      }
      @media (max-width:560px){
        .oth-grid{grid-template-columns:1fr 1fr}
      }

      #confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:30}

      /* ---------- responsive ---------- */
      @media (max-width:1020px){
        .svc-grid{grid-template-columns:repeat(2,1fr)}
        .stats{grid-template-columns:repeat(2,1fr)}
        .proc-steps{grid-template-columns:repeat(2,1fr); gap:34px 22px}
        .proc-line{display:none}
        .proof-grid{grid-template-columns:1fr}
        .chip-1{left:-6px}.chip-2{right:-6px}
      }
      @media (max-width:820px){
        section{padding:64px 0}
        .nav-links{display:none}
        .hero-grid,.rufus-grid,.calc{grid-template-columns:1fr}
        .hero{padding-top:40px}
        .hero-frame{transform:none}
        .chip{position:static; margin-top:12px; max-width:none; animation:none}
        .hero-chips{display:flex; flex-direction:column; margin-top:16px}
        .method{grid-template-columns:1fr}
        .m-arrow{transform:rotate(90deg); padding:2px 0}
        .tab-panel{grid-template-columns:1fr}
        .calc-out{padding:28px}
      }
      @media (max-width:560px){
        .svc-grid{grid-template-columns:1fr}
        .stats{grid-template-columns:1fr 1fr; gap:22px}
        .proc-steps{grid-template-columns:1fr}
        .hero-ctas .btn{width:100%; justify-content:center}
      }
      @media (prefers-reduced-motion: reduce){
        html{scroll-behavior:auto}
        .rv{opacity:1; transform:none; transition:none}
        .mq-track{animation:none}
        .chip{animation:none}
        .proc-line i{transition:none; transform:scaleX(1)}
        .bar i{transition:none}
        *{animation-duration:.01ms !important; animation-iteration-count:1 !important}
      }
    
/* ---------- WordPress additions ---------- */
.nc-main{padding:0;margin:0}
/* services dropdown */
.nav-drop{position:relative}
.nav-drop .drop-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nav-drop .drop-toggle::after{content:"";border:solid currentColor;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg) translateY(-2px);opacity:.7}
.drop-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,6px);min-width:270px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;box-shadow:0 24px 60px -18px rgba(0,0,0,.55);z-index:70}
.nav-drop:hover .drop-menu,.nav-drop.open .drop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop-menu a{display:block;padding:10px 14px;border-radius:10px;font-size:.9rem;border-bottom:none!important;opacity:.85}
.drop-menu a:hover{background:rgba(139,92,246,.14);opacity:1;color:var(--lav)}
.drop-menu a small{display:block;font-weight:400;font-size:.76rem;color:var(--ink-soft);margin-top:2px}
/* form feedback */
.form-note{margin-top:12px;font-size:.92rem;min-height:1.4em}
.form-note.ok{color:#4ade80}
.form-note.err{color:#f87171}
/* mobile nav */
@media (max-width:900px){
  .nav-in{flex-wrap:wrap;gap:14px}
  .nav-links{order:3;width:100%;margin-left:0;gap:18px;flex-wrap:wrap}
  .drop-menu{position:static;transform:none;opacity:1;visibility:visible;display:none;box-shadow:none;margin-top:8px;min-width:0}
  .nav-drop.open .drop-menu{display:block}
}