*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1a1033;--navy2:#120d26;--purple:#6b4fd8;--purple2:#7c63e0;
  --violet:#9b82f0;--lav2:#f5f3ff;--teal:#00c2b3;--teal2:#00d4be;
  --white:#fff;--gray:#f7f7fb;--muted:#6b7280;--border:rgba(107,79,216,.14);
  --font:'Montserrat',sans-serif;--serif:'Roboto',sans-serif;
  --shadow:0 6px 32px rgba(26,16,51,.10);--shadow-lg:0 20px 60px rgba(26,16,51,.15)
}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--navy);background:var(--white);overflow-x:hidden;line-height:1.6}

/* ── TOPBAR ── */
.topbar{background:var(--navy2);padding:8px 0;font-size:12px;color:rgba(255,255,255,.5)}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;align-items:center}
.topbar a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .15s}
.topbar a:hover{color:var(--violet)}
.topbar-right{display:flex;gap:18px;align-items:center}
.topbar-signin{background:rgba(107,79,216,.25);border:1px solid rgba(107,79,216,.4);color:var(--violet)!important;padding:3px 13px;border-radius:6px;font-weight:600;font-size:11.5px}

/* ── NAV ── */
.site-nav{background:var(--navy);position:sticky;top:0;z-index:200;box-shadow:0 2px 20px rgba(0,0,0,.3)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:32px;height:32px;padding:5px;background:rgba(107,79,216,.2);border-radius:8px;border:1px solid rgba(107,79,216,.4)}
.logo-mark span{border-radius:2px;background:var(--purple)}
.logo-mark span:nth-child(2){background:var(--violet);opacity:.7}
.logo-mark span:nth-child(3){background:var(--violet);opacity:.5}
.logo-mark span:nth-child(4){background:var(--teal);opacity:.85}
.logo-text{font-size:22px;font-weight:800;color:white;letter-spacing:-.03em}
.logo-text span{color:var(--violet)}
.logo-tagline{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.12em;text-transform:uppercase}
.nav-support-badge{display:flex;align-items:center;gap:8px}
.support-label{background:rgba(0,194,179,.15);border:1px solid rgba(0,194,179,.3);color:var(--teal2);font-size:11px;font-weight:700;padding:4px 11px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{color:rgba(255,255,255,.65);font-size:13.5px;font-weight:500;padding:7px 14px;border-radius:8px;text-decoration:none;transition:all .15s}
.nav-links a:hover{color:white;background:rgba(255,255,255,.08)}
.nav-links a.active{color:white;background:rgba(107,79,216,.3)}
.nav-right{display:flex;gap:10px;align-items:center}
.btn-nav-ghost{color:rgba(255,255,255,.7);font-size:13px;font-weight:500;padding:7px 15px;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,.15);transition:all .15s}
.btn-nav-ghost:hover{color:white;border-color:rgba(255,255,255,.3)}
.btn-nav-cta{background:var(--purple);color:white;font-size:13px;font-weight:600;padding:8px 18px;border-radius:8px;text-decoration:none;transition:all .15s}
.btn-nav-cta:hover{background:var(--purple2);transform:translateY(-1px)}

/* ── HERO SEARCH ── */
.search-hero{background:var(--navy);padding:72px 0 64px;position:relative;overflow:hidden}
.sh-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(107,79,216,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(107,79,216,.07) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 100% 80% at 50% 50%,black 20%,transparent 100%);pointer-events:none}
.sh-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px)}
.sg1{width:500px;height:500px;background:rgba(107,79,216,.2);top:-120px;right:-60px;animation:gd 11s ease-in-out infinite}
.sg2{width:320px;height:320px;background:rgba(0,194,179,.12);bottom:-40px;left:5%;animation:gd 14s ease-in-out infinite reverse}
@keyframes gd{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,16px)}}
.sh-inner{max-width:760px;margin:0 auto;padding:0 40px;position:relative;z-index:2;text-align:center}
.sh-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(107,79,216,.18);border:1px solid rgba(107,79,216,.35);color:var(--violet);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;border-radius:99px;margin-bottom:22px}
.eye-dot{width:5px;height:5px;background:var(--violet);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.sh-inner h1{font-family:var(--serif);font-size:clamp(34px,4.5vw,52px);color:white;line-height:1.1;letter-spacing:-.02em;margin-bottom:10px}
.sh-inner h1 em{color:var(--violet);font-style:italic}
.sh-sub{color:rgba(255,255,255,.5);font-size:16px;line-height:1.7;margin-bottom:36px}

/* Search bar */
.search-bar-wrap{position:relative;margin-bottom:28px}
.search-bar{width:100%;padding:17px 60px 17px 56px;border-radius:14px;border:2px solid rgba(107,79,216,.3);background:rgba(255,255,255,.07);color:white;font-size:16px;font-family:var(--font);outline:none;transition:all .2s;backdrop-filter:blur(10px)}
.search-bar::placeholder{color:rgba(255,255,255,.35)}
.search-bar:focus{border-color:var(--violet);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(107,79,216,.2)}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);font-size:18px;pointer-events:none}
.search-submit{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--purple);color:white;border:none;padding:9px 20px;border-radius:9px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s}
.search-submit:hover{background:var(--purple2)}
.popular-searches{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}
.ps-label{font-size:12px;color:rgba(255,255,255,.35);font-weight:500}
.ps-chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);font-size:12px;font-weight:500;padding:4px 12px;border-radius:99px;text-decoration:none;transition:all .15s;cursor:pointer}
.ps-chip:hover{background:rgba(107,79,216,.25);border-color:var(--violet);color:var(--violet)}

/* ── STATUS BAR ── */
.status-bar{background:rgba(0,194,179,.08);border-bottom:1px solid rgba(0,194,179,.15);padding:12px 0}
.status-inner{max-width:1280px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.status-left{display:flex;align-items:center;gap:10px}
.status-dot{width:8px;height:8px;background:var(--teal);border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(0,194,179,.2)}
.status-text{font-size:13px;font-weight:600;color:var(--navy)}
.status-sub{font-size:12px;color:var(--muted)}
.status-right{display:flex;gap:16px;flex-wrap:wrap}
.status-metric{text-align:center}
.sm-val{font-size:15px;font-weight:800;color:var(--teal);font-family:var(--serif)}
.sm-label{font-size:11px;color:var(--muted);font-weight:500}

/* ── SECTIONS SHARED ── */
.section{padding:80px 0}
.section-inner{max-width:1280px;margin:0 auto;padding:0 40px}
.section-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--purple);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.section-eyebrow::before{content:'';display:block;width:16px;height:2px;background:var(--purple);border-radius:2px}
.section-title{font-family:var(--serif);font-size:clamp(26px,2.8vw,40px);color:var(--navy);line-height:1.15;letter-spacing:-.02em;margin-bottom:12px}
.section-sub{color:var(--muted);font-size:15.5px;line-height:1.75;max-width:540px}

/* ── TOPIC CARDS ── */
.topics-section{background:var(--white);padding:72px 0}
.topics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.topic-card{background:var(--gray);border-radius:16px;padding:28px 24px;border:1px solid var(--border);transition:all .25s;cursor:pointer;text-decoration:none;display:block;position:relative;overflow:hidden}
.topic-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.topic-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);background:var(--white);border-color:rgba(107,79,216,.2)}
.topic-card:hover::after{transform:scaleX(1)}
.topic-icon-wrap{width:52px;height:52px;border-radius:14px;background:var(--lav2);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px;transition:background .2s}
.topic-card:hover .topic-icon-wrap{background:rgba(107,79,216,.15)}
.topic-name{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:8px}
.topic-desc{font-size:13.5px;color:var(--muted);line-height:1.65;margin-bottom:16px}
.topic-count{font-size:12px;font-weight:600;color:var(--purple);display:flex;align-items:center;gap:6px}
.topic-count::before{content:'';display:block;width:14px;height:2px;background:var(--purple);border-radius:2px}
.topic-arrow{position:absolute;top:24px;right:22px;color:var(--border);font-size:18px;transition:color .2s,transform .2s}
.topic-card:hover .topic-arrow{color:var(--purple);transform:translateX(3px)}

/* ── FEATURED ARTICLES ── */
.featured-section{background:var(--gray);padding:72px 0}
.featured-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:48px}
.featured-article{background:white;border-radius:16px;border:1px solid var(--border);overflow:hidden;transition:all .25s;cursor:pointer}
.featured-article:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.fa-img{height:200px;background:linear-gradient(135deg,var(--navy) 0%,#2d1a52 60%,rgba(107,79,216,.4) 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fa-img-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(107,79,216,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(107,79,216,.1) 1px,transparent 1px);background-size:28px 28px}
.fa-img-icon{font-size:52px;position:relative;z-index:2}
.fa-badge{position:absolute;top:14px;left:16px;background:rgba(107,79,216,.3);border:1px solid rgba(107,79,216,.5);color:var(--violet);font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase;z-index:2}
.fa-body{padding:22px 24px}
.fa-category{font-size:11px;font-weight:700;color:var(--purple);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.fa-title{font-size:18px;font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:10px}
.fa-excerpt{font-size:13.5px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.fa-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.fa-meta-dot{width:3px;height:3px;background:var(--muted);border-radius:50%}
.fa-read-more{color:var(--purple);font-weight:600;text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:5px;transition:gap .15s}
.fa-read-more:hover{gap:9px}

.featured-sidebar{display:flex;flex-direction:column;gap:14px}
.article-row{background:white;border-radius:12px;padding:18px 20px;border:1px solid var(--border);transition:all .2s;cursor:pointer;display:flex;gap:14px;align-items:flex-start;text-decoration:none}
.article-row:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(107,79,216,.2)}
.ar-icon{width:36px;height:36px;border-radius:10px;background:var(--lav2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;margin-top:1px;transition:background .2s}
.article-row:hover .ar-icon{background:rgba(107,79,216,.15)}
.ar-category{font-size:10.5px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.ar-title{font-size:14px;font-weight:700;color:var(--navy);line-height:1.35;margin-bottom:4px}
.ar-meta{font-size:12px;color:var(--muted)}

/* ── VIDEO TUTORIALS ── */
.videos-section{background:var(--white);padding:72px 0}
.videos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.video-card{border-radius:14px;overflow:hidden;border:1px solid var(--border);transition:all .25s;cursor:pointer;background:white}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(107,79,216,.2)}
.video-thumb{height:140px;background:var(--navy);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vt-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(107,79,216,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(107,79,216,.08) 1px,transparent 1px);background-size:20px 20px}
.vt-glow{position:absolute;width:100px;height:100px;border-radius:50%;filter:blur(30px)}
.vt-g1{background:rgba(107,79,216,.4);top:-20px;right:-10px}
.vt-g2{background:rgba(0,194,179,.3);bottom:-20px;left:-10px}
.play-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:all .2s;backdrop-filter:blur(6px)}
.video-card:hover .play-btn{background:var(--purple);border-color:var(--purple);transform:scale(1.1)}
.play-icon{color:white;font-size:15px;margin-left:3px}
.vt-duration{position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,.6);color:white;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;z-index:2}
.vt-badge{position:absolute;top:8px;left:10px;background:linear-gradient(90deg,var(--purple),var(--teal));color:white;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:4px;z-index:2;text-transform:uppercase;letter-spacing:.05em}
.video-body{padding:14px 16px}
.vb-category{font-size:10.5px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.vb-title{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.35;margin-bottom:6px}
.vb-meta{font-size:11.5px;color:var(--muted)}

/* ── QUICK ACTIONS ── */
.quick-section{background:var(--lav2);padding:60px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.quick-card{background:white;border-radius:14px;padding:24px 20px;border:1px solid var(--border);text-align:center;transition:all .25s;text-decoration:none;display:block}
.quick-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(107,79,216,.25)}
.qc-icon{font-size:28px;margin-bottom:12px}
.qc-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px}
.qc-desc{font-size:12.5px;color:var(--muted);line-height:1.55}

/* ── CONTACT SUPPORT ── */
.contact-section{background:white;padding:72px 0}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.contact-card{border-radius:16px;padding:32px 28px;border:1px solid var(--border);transition:all .25s;position:relative;overflow:hidden}
.contact-card::before{content:'';position:absolute;top:-50px;right:-50px;width:160px;height:160px;border-radius:50%;opacity:.15;pointer-events:none}
.contact-card.chat{background:var(--navy)}
.contact-card.chat::before{background:radial-gradient(circle,var(--purple) 0%,transparent 70%)}
.contact-card.email{background:var(--lav2)}
.contact-card.email::before{background:radial-gradient(circle,var(--purple) 0%,transparent 70%)}
.contact-card.phone{background:var(--gray)}
.contact-card.phone::before{background:radial-gradient(circle,var(--teal) 0%,transparent 70%)}
.contact-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.cc-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px}
.chat .cc-icon{background:rgba(107,79,216,.3)}
.email .cc-icon{background:rgba(107,79,216,.12)}
.phone .cc-icon{background:rgba(0,194,179,.12)}
.cc-title{font-size:18px;font-weight:700;margin-bottom:8px}
.chat .cc-title{color:white}
.email .cc-title,.phone .cc-title{color:var(--navy)}
.cc-desc{font-size:13.5px;line-height:1.65;margin-bottom:20px}
.chat .cc-desc{color:rgba(255,255,255,.55)}
.email .cc-desc,.phone .cc-desc{color:var(--muted)}
.cc-availability{font-size:12px;font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:6px}
.avail-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.chat .cc-availability{color:var(--teal2)}
.chat .avail-dot{background:var(--teal2)}
.email .cc-availability{color:var(--purple)}
.email .avail-dot{background:var(--purple)}
.phone .cc-availability{color:var(--teal)}
.phone .avail-dot{background:var(--teal)}
.cc-btn{display:block;padding:11px 20px;border-radius:10px;font-size:14px;font-weight:700;text-align:center;text-decoration:none;transition:all .2s;cursor:pointer;border:none;font-family:var(--font)}
.chat .cc-btn{background:var(--purple);color:white}
.chat .cc-btn:hover{background:var(--purple2);transform:translateY(-1px)}
.email .cc-btn{background:var(--purple);color:white}
.email .cc-btn:hover{background:var(--purple2);transform:translateY(-1px)}
.phone .cc-btn{background:var(--teal);color:white}
.phone .cc-btn:hover{background:var(--teal2);transform:translateY(-1px)}

/* ── RECENT UPDATES ── */
.updates-section{background:var(--gray);padding:72px 0}
.updates-layout{display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:start;margin-top:48px}
.updates-list{display:flex;flex-direction:column;gap:0}
.update-row{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid #eeeaf8;transition:all .15s;cursor:pointer;text-decoration:none}
.update-row:first-child{padding-top:0}
.update-row:last-child{border-bottom:none}
.update-row:hover .ur-title{color:var(--purple)}
.ur-date-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:44px}
.ur-dot{width:10px;height:10px;border-radius:50%;background:var(--purple);border:2px solid white;box-shadow:0 0 0 3px rgba(107,79,216,.15);flex-shrink:0;margin-bottom:6px}
.ur-dot.teal{background:var(--teal);box-shadow:0 0 0 3px rgba(0,194,179,.15)}
.ur-date{font-size:10.5px;font-weight:600;color:var(--muted);text-align:center;line-height:1.3}
.ur-content{flex:1}
.ur-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.badge-new{background:rgba(0,194,179,.1);color:var(--teal)}
.badge-update{background:var(--lav2);color:var(--purple)}
.badge-fix{background:rgba(239,68,68,.08);color:#ef4444}
.ur-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:5px;transition:color .15s;line-height:1.35}
.ur-desc{font-size:13px;color:var(--muted);line-height:1.6}

/* Status panel */
.status-panel{background:white;border-radius:16px;border:1px solid var(--border);padding:24px 22px;position:sticky;top:84px}
.sp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.sp-title{font-size:14px;font-weight:700;color:var(--navy)}
.sp-all-good{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--teal)}
.sp-ag-dot{width:7px;height:7px;background:var(--teal);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,194,179,.4)}50%{box-shadow:0 0 0 5px rgba(0,194,179,0)}}
.sp-items{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.sp-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--gray);border-radius:9px}
.sp-item-name{font-size:13px;font-weight:600;color:var(--navy)}
.sp-item-status{font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px}
.sp-status-op{color:var(--teal)}
.sp-status-op::before{content:'';display:block;width:6px;height:6px;background:var(--teal);border-radius:50%}
.sp-history-link{display:block;text-align:center;font-size:12.5px;color:var(--purple);font-weight:600;text-decoration:none;padding:10px;border-radius:9px;border:1.5px solid var(--border);transition:all .15s}
.sp-history-link:hover{background:var(--lav2);border-color:rgba(107,79,216,.3)}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}.d6{transition-delay:.42s}

/* ── FOOTER ── */
.site-footer{background:var(--navy2);color:rgba(255,255,255,.45);padding:60px 0 28px}
.footer-inner{max-width:1280px;margin:0 auto;padding:0 40px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:26px}
.footer-logo{font-size:20px;font-weight:800;color:white;text-decoration:none;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-logo span{color:var(--violet)}
.footer-brand p{font-size:13px;line-height:1.75;max-width:260px}
.footer-contact{margin-top:18px;display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.footer-contact a{color:var(--violet);text-decoration:none}
.footer-col h4{color:white;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-links a{color:rgba(255,255,255,.45);text-decoration:none;font-size:13px;transition:color .15s}
.footer-links a:hover{color:var(--violet)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px;flex-wrap:wrap;gap:10px}
.footer-bottom-links{display:flex;gap:18px}
.footer-bottom-links a{color:rgba(255,255,255,.35);text-decoration:none;transition:color .15s}
.footer-bottom-links a:hover{color:var(--violet)}

@media(max-width:1024px){
  .topics-grid{grid-template-columns:repeat(2,1fr)}
  .videos-grid{grid-template-columns:repeat(2,1fr)}
  .featured-layout,.updates-layout{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .status-panel{position:static}
}
@media(max-width:640px){
  .nav-links,.nav-right .btn-nav-ghost{display:none}
  .topics-grid,.quick-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-inner,.section-inner,.sh-inner,.status-inner{padding-left:20px;padding-right:20px}
  .contact-grid{grid-template-columns:1fr}
}

/* ── WordPress Theme Additions ─────────────────────────────────── */

/* Videos grid */
.videos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-top:36px; }
.video-card { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--navy); transition:all .25s; cursor:pointer; display:block; }
.video-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(107,79,216,.3); }
.vc-thumb { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#1a0a3c,#2d1060); overflow:hidden; }
.vc-thumb img { width:100%; height:100%; object-fit:cover; }
.vc-thumb-placeholder { width:100%; height:100%; background:linear-gradient(135deg,#1a1033,#2d1060); }
.vc-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.vc-play div, .video-card .vc-play { width:52px; height:52px; border-radius:50%; background:rgba(107,79,216,.7); display:flex; align-items:center; justify-content:center; transition:all .2s; }
.video-card:hover .vc-play > *, .video-card:hover .vc-play { transform:scale(1.1); background:var(--purple); }
.vc-duration { position:absolute; bottom:8px; right:10px; background:rgba(0,0,0,.75); border-radius:5px; padding:2px 7px; font-size:11px; font-weight:700; color:#fff; }
.vc-body { padding:18px; }
.vc-title { font-size:15px; font-weight:700; line-height:1.35; margin-bottom:7px; color:var(--navy); }
.vc-desc { font-size:13px; color:var(--muted); line-height:1.55; margin-bottom:12px; }
.vc-meta { display:flex; gap:12px; font-size:12px; color:#9ca3af; }
.vc-views { color:var(--purple); font-weight:600; }

/* Featured articles grid */
.featured-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:36px; }
.feat-card { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--navy); transition:all .25s; display:flex; flex-direction:column; }
.feat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(107,79,216,.3); }
.feat-thumb img { width:100%; height:160px; object-fit:cover; }
.feat-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.feat-topic { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--purple); margin-bottom:8px; }
.feat-title { font-size:15px; font-weight:700; line-height:1.35; margin-bottom:8px; }
.feat-excerpt { font-size:13px; color:var(--muted); line-height:1.55; flex:1; }
.feat-meta { display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:12px; color:#9ca3af; }
.feat-arrow { font-size:16px; color:var(--purple); transition:transform .15s; }
.feat-card:hover .feat-arrow { transform:translateX(4px); }

/* Guides grid */
.guides-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-top:36px; }
.guide-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px; text-decoration:none; color:var(--navy); transition:all .25s; display:flex; gap:18px; }
.guide-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(107,79,216,.3); }
.guide-num { font-family:var(--serif); font-size:40px; font-weight:900; color:rgba(107,79,216,.15); line-height:1; flex-shrink:0; min-width:48px; }
.guide-title { font-size:15px; font-weight:700; margin-bottom:12px; line-height:1.3; }
.guide-steps { list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.guide-steps li { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--muted); line-height:1.4; }
.gs-dot { min-width:18px; height:18px; border-radius:50%; background:rgba(107,79,216,.12); border:1px solid rgba(107,79,216,.3); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:var(--purple); flex-shrink:0; margin-top:1px; }
.guide-cta { font-size:12.5px; font-weight:700; color:var(--purple); }

/* Updates grid */
.updates-grid { display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:start; }
@media(max-width:900px){ .updates-grid{grid-template-columns:1fr} }

/* Archive */
.archive-wrap { min-height:100vh; }
.archive-hero { background:var(--navy); padding:56px 0; }
.archive-title { font-family:var(--serif); font-size:clamp(28px,4vw,44px); color:white; margin-top:12px; letter-spacing:-.02em; }
.archive-desc { color:rgba(255,255,255,.5); margin-top:10px; font-size:15px; }
.archive-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.update-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; text-decoration:none; color:var(--navy); display:block; transition:all .2s; }
.update-card:hover { border-color:rgba(107,79,216,.3); box-shadow:var(--shadow); }
.uc-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.uc-version { font-size:11px; font-weight:700; color:var(--muted); background:var(--gray); padding:2px 8px; border-radius:4px; }
.uc-date { font-size:11px; color:var(--muted); }
.uc-title { font-size:15px; font-weight:700; margin-bottom:7px; line-height:1.3; }
.uc-desc { font-size:13px; color:var(--muted); line-height:1.55; }
.pagination-wrap { margin-top:40px; display:flex; justify-content:center; gap:8px; }
.pagination-wrap .page-numbers { padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:13px; font-weight:600; color:var(--navy); text-decoration:none; transition:all .15s; }
.pagination-wrap .page-numbers.current, .pagination-wrap .page-numbers:hover { background:var(--purple); color:#fff; border-color:var(--purple); }
.no-results { text-align:center; padding:80px 20px; }
.nr-icon { font-size:48px; margin-bottom:16px; }
.no-results h2 { font-family:var(--serif); font-size:28px; color:var(--navy); margin-bottom:10px; }
.no-results p { color:var(--muted); font-size:15px; }
.no-results a { color:var(--purple); font-weight:600; }

/* Single article */
.single-wrap { min-height:100vh; background:var(--gray); padding:40px 0 80px; }
.single-inner { max-width:800px; margin:0 auto; padding:0 40px; }
.single-header { display:flex; align-items:center; gap:8px; margin-bottom:24px; font-size:13px; }
.breadcrumb-link { color:var(--purple); text-decoration:none; font-weight:600; }
.breadcrumb-link:hover { text-decoration:underline; }
.breadcrumb-sep { color:var(--muted); }
.breadcrumb-current { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.single-article { background:#fff; border-radius:20px; padding:40px; border:1px solid var(--border); }
.sa-meta { display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:12.5px; }
.sa-type { padding:4px 12px; border-radius:99px; font-weight:700; font-size:11px; }
.type-video { background:rgba(107,79,216,.1); color:var(--purple); }
.type-guide { background:rgba(0,194,179,.1); color:var(--teal); }
.type-article { background:rgba(107,79,216,.08); color:var(--purple); }
.type-release { background:rgba(0,194,179,.08); color:var(--teal); }
.sa-date, .sa-duration { color:var(--muted); }
.sa-title { font-family:var(--serif); font-size:clamp(24px,3vw,36px); color:var(--navy); line-height:1.2; margin-bottom:24px; letter-spacing:-.02em; }
.sa-thumb { border-radius:12px; overflow:hidden; margin-bottom:28px; position:relative; }
.sa-thumb img { width:100%; display:block; }
.sa-play-overlay { position:absolute; inset:0; background:rgba(26,16,51,.4); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#fff; font-weight:700; text-decoration:none; transition:background .2s; }
.sa-play-overlay:hover { background:rgba(107,79,216,.6); }
.sa-play-btn { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; }
.sa-steps-overview { background:var(--lav2); border:1px solid rgba(107,79,216,.2); border-radius:12px; padding:20px; margin-bottom:28px; }
.so-title { font-weight:700; font-size:13px; color:var(--purple); margin-bottom:10px; text-transform:uppercase; letter-spacing:.06em; }
.so-list { padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.so-list li { font-size:14px; color:var(--navy); }
.sa-content { font-size:15.5px; line-height:1.8; color:#374151; }
.sa-content h2, .sa-content h3 { font-family:var(--serif); color:var(--navy); margin:28px 0 12px; }
.sa-content h2 { font-size:22px; }
.sa-content h3 { font-size:18px; }
.sa-content p { margin-bottom:16px; }
.sa-content ul, .sa-content ol { padding-left:22px; margin-bottom:16px; }
.sa-content li { margin-bottom:6px; }
.sa-content a { color:var(--purple); font-weight:600; }
.sa-content img { max-width:100%; border-radius:10px; margin:16px 0; }
.sa-content blockquote { border-left:3px solid var(--purple); padding-left:16px; color:var(--muted); font-style:italic; margin:20px 0; }
.sa-related { margin-top:40px; padding-top:28px; border-top:1px solid var(--border); }
.sa-related-title { font-family:var(--serif); font-size:18px; color:var(--navy); margin-bottom:16px; }
.sa-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sa-rel-card { background:var(--gray); border:1px solid var(--border); border-radius:10px; padding:14px; text-decoration:none; color:var(--navy); transition:all .15s; }
.sa-rel-card:hover { border-color:rgba(107,79,216,.3); background:var(--lav2); }
.sa-rel-title { font-size:13px; font-weight:600; line-height:1.4; margin-bottom:5px; }
.sa-rel-meta { font-size:11px; color:var(--muted); }
.sa-helpful { margin-top:32px; padding:24px; background:var(--gray); border-radius:12px; text-align:center; }
.sh-question { font-weight:700; font-size:15px; color:var(--navy); margin-bottom:14px; }
.sh-btns { display:flex; gap:10px; justify-content:center; }
.sh-btn { padding:9px 22px; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all .15s; border:2px solid var(--border); background:#fff; color:var(--navy); }
.sh-btn.sh-yes:hover { border-color:var(--teal); color:var(--teal); background:rgba(0,194,179,.06); }
.sh-btn.sh-no:hover { border-color:var(--purple); color:var(--purple); background:var(--lav2); }

/* Contact section */
.contact-section { background:var(--gray); }
.contact-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.contact-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:28px 22px; text-align:center; transition:all .25s; }
.contact-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(107,79,216,.25); }
.cc-icon { font-size:36px; margin-bottom:14px; }
.cc-title { font-family:var(--serif); font-size:18px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.cc-desc { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:16px; }
.cc-link { display:block; font-weight:700; color:var(--purple); font-size:14px; text-decoration:none; margin-bottom:8px; }
.cc-link:hover { text-decoration:underline; }
.cc-hours { font-size:12px; color:var(--muted); margin-top:8px; }
.cc-btn-primary { display:block; background:var(--purple); color:#fff; font-weight:700; font-size:13px; padding:11px 20px; border-radius:9px; text-decoration:none; transition:all .15s; margin-bottom:8px; }
.cc-btn-primary:hover { background:var(--purple2); }
.cc-btn-ghost { display:block; border:1.5px solid var(--border); color:var(--navy); font-weight:600; font-size:13px; padding:10px 20px; border-radius:9px; text-decoration:none; transition:all .15s; }
.cc-btn-ghost:hover { border-color:var(--purple); color:var(--purple); }
.self-help-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sh-row-label { font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }

/* Outline button */
.btn-outline-purple { display:inline-flex; align-items:center; gap:7px; color:var(--purple); font-size:13.5px; font-weight:700; text-decoration:none; padding:10px 18px; border:1.5px solid var(--border); border-radius:10px; transition:all .2s; background:#fff; }
.btn-outline-purple:hover { border-color:var(--purple); background:var(--lav2); }

/* Demo notice */
.demo-notice { text-align:center; font-size:13px; color:var(--muted); margin-top:16px; background:rgba(107,79,216,.05); border:1px dashed rgba(107,79,216,.2); border-radius:8px; padding:10px 16px; }

/* Page */
.page-wrap { max-width:900px; margin:0 auto; padding:60px 40px; }
.page-title { font-family:var(--serif); font-size:clamp(26px,3vw,40px); color:var(--navy); margin-bottom:28px; }
.page-content { font-size:15.5px; line-height:1.8; color:#374151; }

/* Videos section */
.videos-section { background:var(--gray); }
.guides-section { background:#fff; }
.featured-section { background:#fff; }

/* Responsive */
@media(max-width:900px){
  .single-inner,.section-inner{padding:0 20px}
  .sa-related-grid{grid-template-columns:1fr 1fr}
  .contact-cards{grid-template-columns:1fr 1fr}
  .footer-inner-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .nav-links{display:none}
  .archive-grid,.videos-grid,.guides-grid,.contact-cards{grid-template-columns:1fr}
  .sa-related-grid{grid-template-columns:1fr}
  .single-article{padding:24px}
}

/* ── Video Lightbox ─────────────────────────────────────── */
#mdiVideoLightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.vlb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,6,26,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vlb-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 940px;
  animation: vlbScale .22s cubic-bezier(.34,1.28,.64,1);
}
@keyframes vlbScale { from { opacity:0; transform: scale(.94) } to { opacity:1; transform: scale(1) } }

.vlb-title {
  color: rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 12px;
  padding-right: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 20px;
}

.vlb-frame-wrap {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 32px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(107,79,216,.35);
}

.vlb-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.vlb-close {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  font-family: sans-serif;
  line-height: 1;
  padding: 0;
}
.vlb-close:hover { background: rgba(255,255,255,.28); }

/* Make video-card a clickable div */
.video-card[data-video-url],
.video-card[data-video-href] {
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════
   VIDEO PLAY BUTTON — centered circle, consistent everywhere
   ═══════════════════════════════════════════════════════ */

/* The overlay that fills the whole thumb */
.vc-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* let the card click through */
}

/* The actual circle button inside vc-play */
.vc-play-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(107, 79, 216, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.video-card:hover .vc-play-btn {
  background: var(--purple);
  transform: scale(1.1);
}

/* Remove old conflicting rules that made vc-play itself the circle */
.vc-play div,
.video-card .vc-play {
  /* reset — layout is now handled by .vc-play-btn */
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}

/* ═══════════════════════════════════════════════════════
   HOMEPAGE VIDEOS — exactly 3 columns, full width
   ═══════════════════════════════════════════════════════ */

.videos-grid--3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 900px) {
  .videos-grid--3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 580px) {
  .videos-grid--3 { grid-template-columns: 1fr !important; }
}

/* Archive video page uses same card style — match homepage grid */
.archive-wrap .videos-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════
   BILLING HELP SECTION
   ═══════════════════════════════════════════════════════ */

.billing-help-section { background: var(--gray); }

.bh-search-wrap {
  position: relative;
  margin: 36px 0 28px;
}
.bh-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.bh-search-input {
  width: 100%;
  padding: 14px 20px 14px 46px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  font-size: 14.5px;
  font-family: var(--font);
  color: var(--navy);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.bh-search-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(107,79,216,.1);
}
.bh-search-input::placeholder { color: #aaa; }

.bh-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.bh-sidebar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 14px;
  position: sticky;
  top: 84px;
}
.bh-sidebar-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 12px;
  padding-left: 8px;
}
.bh-topic-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.bh-topic {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.35;
}
.bh-topic:hover { background: var(--lav2); color: var(--purple); }
.bh-topic.active { background: rgba(107,79,216,.12); color: var(--purple); font-weight: 700; }

.bh-content {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 30px;
  min-height: 320px;
}
.bh-article { display: none; }
.bh-article.active { display: block; }

.bh-article-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--border);
  line-height: 1.2;
}
.bh-article-body { display: flex; flex-direction: column; gap: 18px; }
.bh-block h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--purple); margin-bottom: 8px; }
.bh-block p { font-size: 14px; color: #374151; line-height: 1.7; margin: 0; }
.bh-block ul, .bh-block ol { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.bh-block li { font-size: 13.5px; color: #374151; line-height: 1.5; }
.bh-block strong { color: var(--navy); }
.bh-badge {
  display: inline-flex;
  align-items: center;
  background: var(--lav2);
  border: 1px solid rgba(107,79,216,.2);
  color: var(--purple);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 6px;
  margin: 4px 4px 0 0;
}

.bh-popular { margin-top: 32px; }
.bh-popular-label { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 16px; }
.bh-popular-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bh-pop-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: all .2s;
  line-height: 1.35;
}
.bh-pop-card:hover {
  border-color: var(--purple);
  background: var(--lav2);
  color: var(--purple);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

@media (max-width: 860px) {
  .bh-layout { grid-template-columns: 1fr; }
  .bh-sidebar { position: static; }
  .bh-popular-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .bh-popular-grid { grid-template-columns: 1fr; }
  .bh-content { padding: 20px 16px; }
}


/* ═══════════════════════════════════════════════════════
   CONTACT CARDS — no icons, accent-bar design
   ═══════════════════════════════════════════════════════ */

/* Reset old icon rule */
.contact-section .cc-icon { display: none !important; }

/* New card layout */
.contact-section .contact-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  transition: all .25s;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.contact-section .contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(107,79,216,.2);
}

/* Colour accent bar at top of each card */
.cc-accent-bar {
  height: 4px;
  border-radius: 4px 4px 0 0;
  width: 100%;
}
.cc-phone  .cc-accent-bar { background: linear-gradient(90deg, var(--teal), var(--teal2)); }
.cc-ticket .cc-accent-bar { background: linear-gradient(90deg, var(--purple), var(--violet)); }
.cc-chat   .cc-accent-bar { background: linear-gradient(90deg, var(--teal), var(--purple)); }
.cc-email  .cc-accent-bar { background: linear-gradient(90deg, var(--violet), var(--teal)); }

/* Card header row: tag + availability */
.cc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 0;
}
.cc-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  background: var(--gray);
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
}
.cc-avail {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--teal);
}
.cc-avail--purple { color: var(--purple); }
.cc-avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse 2s infinite;
}
.cc-avail-dot--purple {
  background: var(--purple);
  animation: none;
}

/* Title + desc + actions inside card */
.contact-section .cc-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  padding: 14px 24px 4px;
}
.contact-section .cc-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  padding: 0 24px 16px;
  flex: 1;
}
.contact-section .cc-link {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--purple);
  text-decoration: none;
  padding: 0 24px 6px;
  transition: color .15s;
}
.contact-section .cc-link:hover { color: var(--purple2); text-decoration: underline; }
.contact-section .cc-hours {
  font-size: 12px;
  color: var(--muted);
  padding: 0 24px 20px;
}
.contact-section .cc-btn-primary,
.contact-section .cc-btn-ghost {
  display: block;
  margin: 0 24px 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
}
.contact-section .cc-btn-primary {
  background: var(--purple);
  color: #fff;
  border: none;
}
.contact-section .cc-btn-primary:hover { background: var(--purple2); }
.contact-section .cc-btn-ghost {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.contact-section .cc-btn-ghost:hover { border-color: var(--purple); color: var(--purple); }

/* Quick self-help pills — no emoji */
.sh-pill {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--navy);
  text-decoration: none;
  transition: all .15s;
}
.sh-pill:hover { border-color: var(--purple); color: var(--purple); background: var(--lav2); }


/* ═══════════════════════════════════════════════════════
   VIDEO THUMBNAIL — gradient background restored
   ═══════════════════════════════════════════════════════ */

.vc-thumb-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(135deg, #1a1033 0%, #2d1060 60%, rgba(107,79,216,.5) 100%);
  overflow: hidden;
}

/* Glow orbs inside placeholder */
.vc-thumb-placeholder .vt-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
}
.vc-thumb-placeholder .vt-g1 {
  width: 120px; height: 120px;
  background: rgba(107,79,216,.5);
  top: -30px; right: -20px;
}
.vc-thumb-placeholder .vt-g2 {
  width: 100px; height: 100px;
  background: rgba(0,194,179,.35);
  bottom: -20px; left: -10px;
}


/* ═══════════════════════════════════════════════════════
   LOOP ERROR DETECTOR SECTION
   ═══════════════════════════════════════════════════════ */

.loop-errors-section { background: var(--navy2); padding: 80px 0; }
.loop-errors-section .section-eyebrow { color: var(--teal2); }
.loop-errors-section .section-eyebrow::before { background: var(--teal2); }
.loop-errors-section .section-title { color: #fff; }
.loop-errors-section .section-sub { color: rgba(255,255,255,.5); }

/* Input panel */
.led-input-wrap { margin-top: 40px; }
.led-input-inner {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(107,79,216,.3);
  border-radius: 16px;
  padding: 28px 30px;
}
.led-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
.led-textarea {
  width: 100%;
  min-height: 90px;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(107,79,216,.3);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-family: 'Courier New', monospace;
  padding: 14px 16px;
  resize: vertical;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  line-height: 1.6;
}
.led-textarea:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(107,79,216,.15);
}
.led-textarea::placeholder { color: rgba(255,255,255,.2); }

.led-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}
.led-btn-detect {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--purple), var(--teal));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity .2s, transform .15s;
}
.led-btn-detect:hover { opacity: .9; transform: translateY(-1px); }
.led-btn-clear {
  background: transparent;
  color: rgba(255,255,255,.4);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
}
.led-btn-clear:hover { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.25); }

/* Example chips */
.led-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.led-chip-label { font-size: 11.5px; color: rgba(255,255,255,.3); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.led-chip {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(107,79,216,.3);
  color: var(--violet);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 99px;
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
}
.led-chip:hover { background: rgba(107,79,216,.2); border-color: var(--violet); color: #fff; }

/* Result panel */
.led-result {
  margin-top: 24px;
  background: rgba(0,194,179,.07);
  border: 1.5px solid rgba(0,194,179,.3);
  border-radius: 16px;
  overflow: hidden;
  animation: ledSlideIn .25s ease;
}
@keyframes ledSlideIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
.led-result-inner { padding: 24px 28px; }
.led-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.led-result-badge { background: rgba(0,194,179,.15); border: 1px solid rgba(0,194,179,.4); color: var(--teal2); font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 8px; }
.led-result-close { background: transparent; border: none; color: rgba(255,255,255,.4); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px; }
.led-result-close:hover { color: #fff; }

.led-result-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; margin-bottom: 20px; }
.led-result-card { background: rgba(255,255,255,.06); border-radius: 10px; padding: 14px 16px; }
.led-rc-wide { grid-column: span 1; }
.led-rc-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.35); margin-bottom: 6px; }
.led-rc-val { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.35; }

.led-fix-row { background: rgba(107,79,216,.12); border: 1px solid rgba(107,79,216,.3); border-radius: 10px; padding: 16px 18px; }
.led-fix-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--violet); margin-bottom: 6px; }
.led-fix-text { font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.6; margin-bottom: 10px; }
.led-fix-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--purple); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 8px; text-decoration: none; transition: background .15s; }
.led-fix-btn:hover { background: var(--purple2); }

/* No match */
.led-no-match {
  margin-top: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
}
.led-no-match a { color: var(--violet); font-weight: 600; }

/* Loop reference map */
.led-map { margin-top: 56px; }
.led-map-header { margin-bottom: 24px; }
.led-map-grid { display: flex; flex-direction: column; gap: 2px; }
.led-map-row {
  display: grid;
  grid-template-columns: 90px 1fr 220px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
}
.led-map-row:hover { background: rgba(107,79,216,.1); border-color: rgba(107,79,216,.25); }
.led-map-loop {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal2);
  white-space: nowrap;
}
.led-map-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.led-map-desc { font-size: 12.5px; color: rgba(255,255,255,.4); line-height: 1.4; }
.led-map-path {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--violet);
  background: rgba(107,79,216,.12);
  border: 1px solid rgba(107,79,216,.2);
  border-radius: 7px;
  padding: 5px 10px;
  text-align: center;
  line-height: 1.4;
}

/* Billing help → loop tool link */
.bh-pop-card--tool {
  text-decoration: none;
  background: rgba(107,79,216,.07);
  border-color: rgba(107,79,216,.3);
  color: var(--purple) !important;
}
.bh-pop-card--tool:hover {
  background: var(--purple) !important;
  color: #fff !important;
}

/* Responsive */
@media (max-width: 860px) {
  .led-result-grid { grid-template-columns: 1fr 1fr; }
  .led-map-row { grid-template-columns: 80px 1fr; }
  .led-map-path { display: none; }
}
@media (max-width: 580px) {
  .led-result-grid { grid-template-columns: 1fr; }
  .led-input-inner { padding: 20px 16px; }
}


/* ═══════════════════════════════════════════════════════
   NAV — updated order, mobile drawer, smooth scroll
   ═══════════════════════════════════════════════════════ */

/* Ensure Billing Help link stands out slightly */
.nav-links a[href="#billing-help"],
.nav-links a[href*="billing-help"] {
  color: var(--teal2);
}
.nav-links a[href="#billing-help"]:hover,
.nav-links a[href*="billing-help"]:hover {
  background: rgba(0,194,179,.1);
  color: var(--teal2);
}

/* Mobile hamburger button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: 8px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,.75);
  border-radius: 2px;
  transition: all .22s ease;
}
.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-mobile-drawer {
  display: none;
  background: var(--navy2);
  border-top: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.nav-mobile-drawer.open {
  max-height: 400px;
}
.nav-mobile-links {
  list-style: none;
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-mobile-links a {
  display: block;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: all .15s;
}
.nav-mobile-links a:hover {
  background: rgba(107,79,216,.2);
  color: white;
}

@media (max-width: 768px) {
  .nav-links, .nav-right .btn-nav-ghost { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-drawer { display: block; }
}


/* ═══════════════════════════════════════════════════════
   GUIDES — rich card design
   ═══════════════════════════════════════════════════════ */

.guides-grid-rich {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.guide-card-rich {
  display: flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--navy);
  transition: all .25s;
  position: relative;
}
.guide-card-rich:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(26,16,51,.12);
  border-color: rgba(107,79,216,.25);
}

/* Left gradient stripe */
.gcr-stripe {
  width: 5px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--gc-a, #6b4fd8), var(--gc-b, #9b82f0));
}

.gcr-inner {
  display: flex;
  gap: 20px;
  padding: 24px 24px 24px 20px;
  flex: 1;
  align-items: flex-start;
}

/* Big number */
.gcr-num {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
  min-width: 60px;
  background: linear-gradient(135deg, var(--gc-a, #6b4fd8), var(--gc-b, #9b82f0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 2px;
}

.gcr-body { flex: 1; min-width: 0; }

.gcr-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 6px;
}

.gcr-excerpt {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 14px;
}

.gcr-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gcr-steps li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: #4b5563;
  line-height: 1.4;
}

.gcr-step-dot {
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gc-a, #6b4fd8), var(--gc-b, #9b82f0));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}

.gcr-more {
  color: var(--muted) !important;
  font-style: italic;
  font-size: 12px !important;
  padding-left: 29px;
}

.gcr-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--gc-a, var(--purple));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .15s;
}
.guide-card-rich:hover .gcr-cta { gap: 8px; }

/* Archive guides page — same rich cards but in 3 columns */
.archive-wrap .guides-grid-rich {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .guides-grid-rich { grid-template-columns: 1fr; }
  .archive-wrap .guides-grid-rich { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .archive-wrap .guides-grid-rich { grid-template-columns: 1fr; }
  .gcr-num { font-size: 40px; min-width: 48px; }
}


/* ═══════════════════════════════════════════════════════
   SCROLL TO TOP BUTTON
   ═══════════════════════════════════════════════════════ */

.scroll-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--teal));
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(107,79,216,.4);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .2s;
}
.scroll-to-top.stt-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-to-top:hover {
  box-shadow: 0 6px 28px rgba(107,79,216,.55);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .scroll-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}