
:root{
 --purple:#8b5cf6;--purple2:#a855f7;--green:#22c55e;--green2:#84cc16;
 --blue:#0ea5e9;--blue2:#2563eb;--cyan:#22d3ee;
 --bg:#030712;--panel:#0b1220;--line:#2a3b59;--text:#f8fafc;--muted:#a9b7cb;
 --a:var(--purple);--b:var(--blue);--c:var(--green);--t1:#17102b;--t2:#071d2b;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{
 margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 background:
 radial-gradient(circle at 8% 3%,rgba(139,92,246,.25),transparent 30rem),
 radial-gradient(circle at 90% 12%,rgba(14,165,233,.22),transparent 28rem),
 radial-gradient(circle at 42% 95%,rgba(34,197,94,.14),transparent 32rem),
 linear-gradient(145deg,#020617 0%,#071221 48%,#030712 100%);
}
a{text-decoration:none}.shell{max-width:1260px;margin:0 auto;padding:0 22px}
.topbar{
 background:linear-gradient(90deg,var(--purple),var(--blue),var(--green),var(--purple));
 background-size:300% 100%;animation:gradientFlow 12s linear infinite;color:#fff;font-size:.76rem;font-weight:900;
 box-shadow:0 6px 28px rgba(37,99,235,.16)
}
.header{position:sticky;top:0;z-index:80;border-bottom:1px solid rgba(93,130,181,.34);background:rgba(3,7,18,.88);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brandmark{
 width:48px;height:48px;border-radius:15px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);
 background:linear-gradient(145deg,var(--purple),var(--blue) 55%,var(--green));box-shadow:0 12px 34px rgba(139,92,246,.27),0 0 34px rgba(14,165,233,.14);font-weight:1000
}
.cta{color:#fff;padding:12px 18px;border-radius:12px;font-weight:1000;background:linear-gradient(110deg,var(--purple),var(--blue),var(--green));background-size:220% 100%;box-shadow:0 12px 32px rgba(37,99,235,.24);animation:gradientFlow 8s linear infinite}
.header nav a{color:#cbd5e1}.header nav a:hover{color:#fff}

.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(63,86,122,.48);background:linear-gradient(120deg,rgba(139,92,246,.10),rgba(14,165,233,.06) 45%,rgba(34,197,94,.08))}
.hero:before{content:"";position:absolute;inset:0;opacity:.32;background-image:linear-gradient(rgba(134,163,213,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(134,163,213,.09) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(#000,transparent 90%)}
.hero:after{content:"";position:absolute;width:550px;height:550px;border-radius:50%;right:-180px;top:-260px;background:conic-gradient(from 180deg,var(--purple),var(--blue),var(--green),var(--purple));filter:blur(80px);opacity:.15}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:46px;align-items:center;padding:64px 0}
.kicker{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:1000;color:#67e8f9}
h1{font-size:clamp(3rem,6vw,5.7rem);line-height:.98;letter-spacing:-.055em;margin:.6rem 0 0;font-weight:1000;background:linear-gradient(92deg,#fff 0 22%,#c4b5fd 42%,#38bdf8 67%,#86efac 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro{font-size:1.05rem;line-height:1.86;color:#ccd8e8;max-width:860px}
.target-keyword{font-weight:1000!important;text-decoration:none!important;color:#fff!important;padding:.08em .32em;border-radius:.38em;background:linear-gradient(90deg,var(--purple),var(--blue),var(--green),var(--purple));background-size:300% 100%;animation:gradientFlow 7s linear infinite;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 8px 24px rgba(37,99,235,.18)}
.hero-art{height:330px;position:relative}.orb1,.orb2{position:absolute;border-radius:999px}
.orb1{width:235px;height:235px;right:18px;top:8px;background:radial-gradient(circle at 30% 30%,#ddd6fe,var(--purple) 30%,var(--blue) 62%,transparent 73%);box-shadow:0 0 85px rgba(139,92,246,.36)}
.orb2{width:155px;height:155px;right:170px;bottom:8px;background:radial-gradient(circle at 35% 35%,#dcfce7,var(--green) 35%,var(--blue) 72%,transparent 74%);box-shadow:0 0 70px rgba(34,197,94,.26)}
.signal-card{position:absolute;right:0;bottom:30px;width:270px;padding:19px;border-radius:20px;border:1px solid rgba(139,92,246,.46);background:linear-gradient(150deg,rgba(17,24,39,.91),rgba(5,18,33,.92));backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 36px rgba(14,165,233,.10)}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid rgba(72,101,145,.52);border-radius:18px;background:linear-gradient(120deg,rgba(139,92,246,.10),rgba(14,165,233,.08),rgba(34,197,94,.08));box-shadow:0 20px 45px rgba(0,0,0,.16)}
.metric{padding:18px 19px;border-right:1px solid rgba(72,101,145,.40)}.metric:last-child{border-right:0}
.metric strong{display:block;font-size:1.55rem;background:linear-gradient(90deg,#c4b5fd,#38bdf8,#86efac);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric span{font-size:.77rem;color:#8fa3bf}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;padding-top:32px;padding-bottom:40px}
.card{border:1px solid rgba(61,83,120,.62);border-radius:21px;background:linear-gradient(180deg,rgba(13,23,41,.96),rgba(5,11,21,.98));box-shadow:0 18px 50px rgba(0,0,0,.20)}
.answer{padding:30px;border-color:rgba(139,92,246,.55);background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(14,165,233,.10) 52%,rgba(34,197,94,.10)),linear-gradient(180deg,#0d1729,#08111f);box-shadow:0 22px 60px rgba(37,99,235,.12)}
.label{text-transform:uppercase;letter-spacing:.20em;font-size:.70rem;font-weight:1000;background:linear-gradient(90deg,#c4b5fd,#38bdf8,#86efac);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-title{font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.15;font-weight:1000;letter-spacing:-.025em}
.prose{font-size:1rem;line-height:1.88;color:#c7d2e2}.prose h2{font-size:2rem;line-height:1.18;color:#fff;margin:2.55rem 0 1rem;letter-spacing:-.02em;position:relative;padding-left:15px}
.prose h2:before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;border-radius:99px;background:linear-gradient(var(--purple),var(--blue),var(--green))}
.prose h3{font-size:1.3rem;color:#86efac;margin:1.55rem 0 .65rem}.prose p{margin:0 0 1.18rem}.prose strong{color:#fff}.prose a{color:#67e8f9;text-decoration:underline;text-underline-offset:3px}.article{padding:32px}

.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;list-style:none;padding:0;margin:21px 0 0}
.checks li{position:relative;border:1px solid rgba(74,102,145,.50);background:linear-gradient(120deg,rgba(139,92,246,.07),rgba(14,165,233,.05),rgba(34,197,94,.04));border-radius:14px;padding:12px 13px 12px 38px;color:#cbd5e1}
.checks li:before{content:"✓";position:absolute;left:14px;color:#86efac;font-weight:1000}

.table-wrap{overflow:auto;margin:19px 0 28px;border-radius:15px;box-shadow:0 14px 34px rgba(0,0,0,.16)}
table{width:100%;border-collapse:collapse;border:1px solid rgba(71,101,145,.48);overflow:hidden;background:#08111f}
th,td{padding:13px;border-bottom:1px solid rgba(57,81,118,.44);text-align:left}
th{font-size:.78rem;background:linear-gradient(90deg,rgba(139,92,246,.20),rgba(14,165,233,.16),rgba(34,197,94,.14));color:#fff}
td{color:#c8d3e3;font-size:.86rem}tr:hover td{background:rgba(14,165,233,.035)}

.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.related-card{display:block;border:1px solid rgba(68,98,143,.54);background:linear-gradient(145deg,rgba(139,92,246,.06),rgba(14,165,233,.05),rgba(34,197,94,.04));border-radius:15px;padding:15px;color:#edf4ff;transition:.2s}
.related-card:hover{border-color:#38bdf8;transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,99,235,.14)}
.related-card small{display:block;color:#8093ae;margin-top:5px}

.sidebar{position:sticky;top:104px;height:max-content;display:grid;gap:16px}.sidebar .card{padding:19px}
.toc a{display:block;padding:9px 0;border-bottom:1px solid rgba(54,78,113,.42);color:#b8c5d8;font-size:.9rem}.toc a:last-child{border-bottom:0}.toc a:hover{color:#86efac}

.case{border:1px solid rgba(14,165,233,.45);background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(14,165,233,.08),rgba(34,197,94,.06));border-radius:19px;padding:22px;margin:24px 0}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.case-grid div{border:1px solid rgba(69,98,142,.50);border-radius:14px;background:linear-gradient(145deg,#08111f,#0a1424);padding:14px}

.faq-list{display:grid;gap:10px}.faq{border:1px solid rgba(139,92,246,.36);border-radius:15px;background:linear-gradient(90deg,rgba(139,92,246,.08),rgba(14,165,233,.055),rgba(34,197,94,.045));overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:15px 17px;font-weight:900;display:flex;justify-content:space-between;gap:10px}.faq summary span{color:#86efac}.faq p{padding:0 17px 17px;margin:0;color:#becadd;line-height:1.76}

.home-link-box,.query-directory{margin:30px 0;padding:24px;border:1px solid rgba(139,92,246,.44);border-radius:20px;background:linear-gradient(135deg,rgba(139,92,246,.09),rgba(14,165,233,.07),rgba(34,197,94,.06));box-shadow:0 18px 45px rgba(0,0,0,.14)}
.home-link{display:inline-flex;margin-top:15px;padding:12px 15px;border-radius:13px;font-weight:1000;color:white;background:linear-gradient(90deg,var(--purple),var(--blue),var(--green),var(--purple));background-size:300% 100%;animation:gradientFlow 8s linear infinite;box-shadow:0 12px 30px rgba(37,99,235,.18)}
.query-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:19px}
.query-link{position:relative;display:flex;align-items:center;min-height:48px;padding:10px 12px;border-radius:12px;font-weight:1000;line-height:1.28;color:#fff!important;text-decoration:none!important;border:1px solid transparent;background:linear-gradient(#08111f,#08111f) padding-box,linear-gradient(105deg,var(--purple),var(--blue),var(--green),var(--purple)) border-box;background-size:100% 100%,300% 300%;animation:borderMove 7s linear infinite;box-shadow:0 10px 24px rgba(0,0,0,.14);transition:.2s}
.query-link:before{content:"";position:absolute;inset:0;border-radius:11px;background:linear-gradient(115deg,var(--purple),var(--blue),var(--green));opacity:.07;animation:glow 3.2s ease-in-out infinite}
.query-link span{position:relative;z-index:1}.query-link:hover{transform:translateY(-3px);box-shadow:0 15px 36px rgba(37,99,235,.18)}

.float{position:fixed;right:20px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:1000;z-index:9999;border:2px solid rgba(255,255,255,.88);box-shadow:0 14px 34px rgba(0,0,0,.42)}
.wa{bottom:22px;background:linear-gradient(145deg,#16a34a,#22c55e)}.tg{bottom:92px;background:linear-gradient(145deg,#2563eb,#0ea5e9)}
.footer{border-top:1px solid rgba(58,82,119,.48);background:linear-gradient(100deg,#020617,#07111f,#03101a);color:#8ea0ba}

@keyframes gradientFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes borderMove{0%{background-position:0 0,0% 50%}100%{background-position:0 0,300% 50%}}
@keyframes glow{0%,100%{opacity:.05}50%{opacity:.16}}
@media(max-width:1050px){.query-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}.hero-art{display:none}.layout{grid-template-columns:1fr}.sidebar{position:static}.case-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.query-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.shell{padding:0 14px}.metrics{grid-template-columns:1fr 1fr}.metric:nth-child(2){border-right:0}.checks,.related-grid,.case-grid,.query-grid{grid-template-columns:1fr}.article{padding:21px}}
@media(prefers-reduced-motion:reduce){.topbar,.cta,.target-keyword,.home-link,.query-link,.query-link:before{animation:none!important}}


/* V3 PRODUCT RATING / REVIEW SNIPPET */
.product-review-snippet{
  margin:28px 0;padding:24px;border-radius:20px;
  border:1px solid rgba(139,92,246,.48);
  background:
    linear-gradient(135deg,rgba(139,92,246,.13),rgba(14,165,233,.10) 48%,rgba(34,197,94,.11)),
    linear-gradient(180deg,#0a1424,#07101e);
  box-shadow:0 20px 50px rgba(0,0,0,.18),0 0 38px rgba(14,165,233,.08);
}
.product-review-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:14px}
.product-rating-value{
  font-size:2.4rem;font-weight:1000;line-height:1;
  background:linear-gradient(90deg,#c4b5fd,#38bdf8,#86efac);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.product-stars{font-size:1.25rem;letter-spacing:.14em;color:#fbbf24;text-shadow:0 0 18px rgba(251,191,36,.22)}
.product-review-count{
  display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;
  border:1px solid rgba(56,189,248,.44);
  background:linear-gradient(90deg,rgba(139,92,246,.10),rgba(14,165,233,.09),rgba(34,197,94,.08));
  color:#e8f3ff;font-weight:900
}
.product-review-note{margin-top:13px;color:#9fb0c7;font-size:.9rem;line-height:1.65}


/* V4 LAYOUT-ONLY FIX — no meta/schema/content changes */
.topbar .shell{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:8px;padding-bottom:8px;min-height:34px}
.header .shell{display:flex;align-items:center;gap:30px;min-height:82px}
.header .brand{flex:0 0 auto}
.header nav{display:flex!important;align-items:center;justify-content:flex-end;gap:26px;margin-left:auto;white-space:nowrap}
.header nav a{font-size:.9rem;font-weight:800}
.header .cta{display:none!important}

.block{display:block}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.ml-auto{margin-left:auto}.min-w-0{min-width:0}.text-center{text-align:center}
.font-black{font-weight:900}.font-bold{font-weight:700}
.text-xs{font-size:.75rem;line-height:1.45}.text-sm{font-size:.875rem;line-height:1.5}
.text-slate-300{color:#cbd5e1}.text-slate-400{color:#94a3b8}.text-slate-500{color:#64748b}.text-white{color:#fff}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-9{padding-top:2.25rem;padding-bottom:2.25rem}
.px-4{padding-left:1rem;padding-right:1rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}
.rounded-xl{border-radius:.75rem}.break-all{overflow-wrap:anywhere;word-break:break-word}

.hero h1{max-width:900px;overflow-wrap:anywhere}
.hero .intro{max-width:900px}
.hero .target-keyword{cursor:default}
.signal-card{width:290px;min-height:150px;display:flex;flex-direction:column;justify-content:center;padding:21px 22px}
.hero-resource-url{display:block;margin-top:9px;color:#7dd3fc;font-size:.83rem;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;max-height:3.1em;overflow:hidden}
.signal-card p{margin-bottom:0}

.product-review-row{align-items:center}
.related-card,.query-link{min-width:0;overflow-wrap:anywhere}

.footer .shell{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.footer .shell > .flex{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

@media(max-width:1050px){
  .header nav{gap:18px}
  .header nav a{font-size:.84rem}
}
@media(max-width:900px){
  .header .shell{min-height:74px}
  .header nav{display:none!important}
  .topbar .hidden{display:none!important}
}
@media(min-width:901px){
  .topbar .hidden{display:inline!important}
}
@media(max-width:650px){
  .topbar .shell{align-items:flex-start}
  .header .shell{gap:16px}
  .brandmark{width:42px;height:42px}
  .hero-inner{padding:42px 0}
  h1{font-size:clamp(2.5rem,13vw,4rem)}
  .signal-card{width:100%}
  .footer .shell{display:block}
  .footer .shell > .flex{margin-top:18px}
}


/* V5 REMOVE RAW URL FROM HERO CARD */
.signal-card{min-height:118px!important;justify-content:center!important}
.signal-card .label{margin-bottom:10px}
.signal-card p{margin-top:0!important;font-size:.86rem;line-height:1.6;color:#a9b7cb}
