/* DigitalBaloch SEO Tools page: design preview styles */
:root{--hh:77px}
/* DigitalBaloch SEO Tools page: design preview styles (layout only, no tool logic) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.st-ci svg,.st-cat-i svg,.st-pill svg,.st-side svg,.st-float svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Hero ---------- */
.st-hero{position:relative;overflow:hidden;isolation:isolate;padding:72px 0 88px!important}
.st-hero-bg{position:absolute;inset:0;z-index:-1;background:
 radial-gradient(60% 70% at 85% 10%,rgba(109,40,217,.55),transparent 60%),
 radial-gradient(45% 60% at 5% 100%,rgba(167,139,250,.22),transparent 60%),
 linear-gradient(180deg,#0B0B2B,#0E0E36)}
.st-hero-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(70% 80% at 50% 30%,#000,transparent);mask-image:radial-gradient(70% 80% at 50% 30%,#000,transparent)}
.st-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.st-hero h1{font:800 clamp(34px,4.6vw,56px)/1.08 var(--display);letter-spacing:-.02em;margin-top:20px}
.st-grad{background:linear-gradient(90deg,#C4B5FD,#A78BFA 55%,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-hero p{margin-top:20px;color:#D9D5F3;max-width:560px}
.st-dot{width:8px;height:8px;border-radius:50%;background:var(--purple-soft);box-shadow:0 0 0 4px rgba(167,139,250,.25)}
.st-search{display:flex;align-items:center;gap:8px;margin-top:28px;max-width:580px;background:#fff;border-radius:16px;padding:8px 8px 8px 16px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.st-search .st-s-i{color:var(--muted);display:flex}
.st-search .st-s-i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.st-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px/24px var(--body);color:var(--ink);padding:10px 4px}
.st-search input::placeholder{color:#8A87A6}
.st-search .btn{min-height:44px;padding:0 22px}
.st-search:focus-within{box-shadow:0 0 0 3px var(--purple-soft),0 20px 50px rgba(0,0,0,.35)}
.st-pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;font:500 14px/20px var(--body);color:#B9B4DE}
.st-pop button{font:500 13px/20px var(--body);color:#E6E3FA;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 12px;cursor:pointer;transition:.15s}
.st-pop button:hover{background:rgba(167,139,250,.25);border-color:var(--purple-soft)}

/* hero visual */
.st-hero-vis{position:relative;padding:52px 0 40px 24px}
.st-report{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.st-rep-h{display:flex;justify-content:space-between;align-items:center;font:700 12px/16px var(--body);letter-spacing:.12em;color:#C9C5E8}
.st-rep-h em{font:500 12px/16px var(--body);letter-spacing:0;font-style:normal;background:rgba(167,139,250,.2);color:#DDD6FE;border-radius:999px;padding:4px 10px}
.st-rep-top{display:flex;align-items:center;gap:24px;margin-top:18px}
.st-ring{position:relative;width:118px;height:118px;flex:none}
.st-ring svg{width:100%;height:100%}
.st-ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 34px/1 var(--display);color:#fff}
.st-bars{flex:1;display:grid;gap:14px}
.st-bars div,.st-mini li,.st-kw li{display:grid;gap:6px}
.st-bars span{font:500 13px/16px var(--body);color:#C9C5E8}
.st-bars i,.st-mini li i,.st-kw li i{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.st-bars i::after,.st-mini li i::after,.st-kw li i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:99px;background:linear-gradient(90deg,#A78BFA,#6D28D9)}
.st-rep-l{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.st-rep-l li{display:flex;align-items:center;gap:10px;font:500 14px/20px var(--body);color:#ECE9FB;background:rgba(255,255,255,.06);border-radius:10px;padding:10px 12px}
.st-rep-l li>span{width:22px;min-width:22px;height:22px;padding:0;border-radius:50%;display:grid;place-items:center;flex:none;font:700 13px/1 var(--body)}
.st-rep-l .st-ok{background:rgba(52,211,153,.2);color:#6EE7B7}
.st-rep-l .st-warn{background:rgba(251,191,36,.2);color:#FCD34D}
.st-rep-l svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.st-float{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border-radius:14px;padding:12px 16px 12px 12px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.st-float span{width:40px;height:40px;border-radius:11px;background:var(--lav);color:var(--purple);display:grid;place-items:center}
.st-float b{display:block;font:700 14px/18px var(--body)}
.st-float small{display:block;font:500 12px/16px var(--body);color:var(--muted)}
.st-float.f1{left:-8px;bottom:0}
.st-float.f2{right:-10px;top:0}

/* ---------- Sticky category bar ---------- */
.st-bar{position:sticky;top:var(--hh,72px);z-index:15;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.st-bar-in{display:flex;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px;overflow-x:auto;scrollbar-width:none}
.st-bar-in::-webkit-scrollbar{display:none}
.st-pill{display:inline-flex;align-items:center;gap:8px;flex:none;font:600 14px/20px var(--body);color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 14px;cursor:pointer;transition:.15s}
.st-pill svg{width:16px;height:16px;color:var(--purple)}
.st-pill i{font:600 12px/18px var(--body);font-style:normal;min-width:22px;text-align:center;border-radius:99px;background:var(--lav);color:var(--purple-deep);padding:0 6px}
.st-pill:hover{border-color:var(--purple-soft);background:var(--lav)}
.st-pill.on{background:var(--purple);border-color:var(--purple);color:#fff}
.st-pill.on svg{color:#fff}.st-pill.on i{background:rgba(255,255,255,.2);color:#fff}
.st-bar-note{margin-left:auto;flex:none;font:500 14px/20px var(--body);color:var(--muted);padding-left:12px}
.st-bar-note b{color:var(--ink)}

/* ---------- Featured ---------- */
.st-feat{padding:72px 0 24px!important;background:linear-gradient(180deg,var(--lav),#fff)}
.st-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.st-sh h2{font:800 clamp(26px,3vw,36px)/1.15 var(--display);letter-spacing:-.01em;margin-top:6px;color:var(--navy)}
.st-sh p{color:var(--muted);font-size:16px;line-height:24px}
.st-feat-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:24px}
.st-fc{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.st-fc:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi);border-color:var(--purple-soft)}
.st-fc h3{font:800 20px/26px var(--display);color:var(--navy)}
.st-fc p{font-size:15px;line-height:24px;color:var(--muted)}
.st-fc.big,.st-fc.dk{background:linear-gradient(160deg,#0B0B2B,#1B1250 70%,#2A1670);border-color:#2a2a5c;color:#fff}
.st-fc.big h3,.st-fc.dk h3{color:#fff}.st-fc.big p,.st-fc.dk p{color:#C9C5E8}
.st-fc-top{display:flex;gap:16px;align-items:flex-start}
.st-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:700 11px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--purple);color:#fff;border-radius:999px;padding:4px 12px}
.st-badge svg{width:12px;height:12px;fill:currentColor;stroke:none}
.st-badge.soft{background:var(--lav);color:var(--purple-deep)}
.dk .st-badge.soft,.big .st-badge.soft{background:rgba(167,139,250,.2);color:#DDD6FE}
.st-ci{flex:none;width:48px;height:48px;border-radius:13px;background:var(--lav);color:var(--purple);display:grid;place-items:center;transition:.2s}
.st-ci.lg{width:56px;height:56px;border-radius:15px}
.big .st-ci,.dk .st-ci{background:rgba(167,139,250,.18);color:#DDD6FE}
.st-mini{display:flex;align-items:center;gap:22px;margin-top:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px}
.st-mring{flex:none;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--purple-soft) 0 85%,rgba(255,255,255,.12) 0);display:grid;place-items:center;position:relative}
.st-mring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#15114a}
.st-mring b{position:relative;font:800 24px/1 var(--display);color:#fff}
.st-mini ul{flex:1;list-style:none;padding:0;display:grid;gap:12px}
.st-mini li span,.st-kw li span{font:500 12px/16px var(--body);color:#C9C5E8}
.st-kw{list-style:none;padding:0;display:grid;gap:12px;margin-top:6px}
.st-kw li span{color:var(--muted)}
.st-kw li i{background:var(--lav)}
.st-fc-btn,.st-fc-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:600 15px/20px var(--body);color:var(--purple)}
.st-fc-btn{align-self:flex-start;background:var(--purple);color:#fff;border-radius:12px;padding:12px 20px;margin-top:6px}
.dk .st-fc-link{color:#DDD6FE}
.st-fc svg:not(.st-ci svg){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.st-fc:hover .st-fc-btn svg,.st-fc:hover .st-fc-link svg{transform:translateX(4px)}
.st-code{margin:6px 0 0;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;font:500 13px/22px ui-monospace,SFMono-Regular,Menlo,monospace;color:#C4B5FD;white-space:pre-wrap;overflow:hidden}

/* ---------- Main: sidebar + categories ---------- */
.st-main{padding:56px 0 64px!important}
.st-layout{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.st-side{position:sticky;top:calc(var(--hh,72px) + 76px)}
.st-side-in{display:grid;gap:4px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.st-side small{font:700 12px/16px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px 10px 10px}
.st-side a[data-s]{display:flex;align-items:center;gap:10px;font:500 14px/20px var(--body);color:var(--ink);border-radius:10px;padding:10px;transition:.15s}
.st-side a[data-s] svg{width:18px;height:18px;color:var(--purple);flex:none}
.st-side a[data-s] span{flex:1}
.st-side a[data-s] i{font:600 12px/18px var(--body);font-style:normal;color:var(--muted)}
.st-side a[data-s]:hover{background:var(--lav)}
.st-side a[data-s].on{background:var(--lav);color:var(--purple-deep);font-weight:600;box-shadow:inset 3px 0 0 var(--purple)}
.st-side-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;background:var(--navy);color:#fff;border-radius:12px;padding:12px 14px;font:600 14px/20px var(--body)}
.st-side-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-side-cta:hover{background:var(--purple)}
.st-content{display:grid;gap:56px;min-width:0}
.st-cat{padding:0!important;scroll-margin-top:calc(var(--hh,72px) + 84px)}
.st-cat-h{display:flex;align-items:center;gap:16px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--border)}
.st-cat-h>div{flex:1;min-width:0}
.st-cat-i{flex:none;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--purple),#8B5CF6);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(109,40,217,.28)}
.st-cat-h h2{font:800 24px/30px var(--display);color:var(--navy);letter-spacing:-.01em}
.st-cat-h p{font-size:15px;line-height:22px;color:var(--muted);margin-top:2px}
.st-count{flex:none;font:600 13px/20px var(--body);color:var(--purple-deep);background:var(--lav);border:1px solid var(--border);border-radius:999px;padding:4px 14px}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.st-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;min-height:248px;transition:transform .2s,box-shadow .2s,border-color .2s}
.st-card h3{font:700 17px/24px var(--display);color:var(--navy);margin-top:6px}
.st-card p{font-size:14px;line-height:22px;color:var(--muted)}
.st-cf{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:14px;border-top:1px dashed var(--border)}
.st-cf em{font:600 12px/18px var(--body);font-style:normal;color:var(--purple-deep);background:var(--lav);border-radius:99px;padding:2px 10px}
.st-cf b{display:inline-flex;align-items:center;gap:6px;font:600 14px/20px var(--body);color:var(--purple)}
.st-cf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.st-card:hover{transform:translateY(-4px);border-color:var(--purple-soft);box-shadow:var(--shadow-hi)}
.st-card:hover .st-ci{background:var(--purple);color:#fff}
.st-card:hover .st-cf svg{transform:translateX(4px)}
.st-empty{text-align:center;color:var(--muted);padding:48px 16px;border:1px dashed var(--border);border-radius:16px}

/* ---------- CTA banner ---------- */
.st-cta{padding:8px 0 80px!important}
.st-cta-card{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;border-radius:24px;padding:48px 44px}
.st-cta-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 120% at 100% 0%,rgba(109,40,217,.7),transparent 60%),radial-gradient(40% 100% at 0% 100%,rgba(167,139,250,.25),transparent 60%)}
.st-cta-card>div:first-child{flex:1 1 420px}
.st-cta-card h2{font:800 clamp(26px,3vw,36px)/1.15 var(--display);letter-spacing:-.01em;margin-top:8px;max-width:540px}
.st-cta-card h2 em{font-style:normal;color:var(--purple-soft)}
.st-cta-card p{margin-top:14px;color:#C9C5E8;max-width:560px;font-size:16px;line-height:26px}
.st-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.st-cta-btns .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
 .st-layout{grid-template-columns:1fr}
 .st-side{display:none}
 .st-feat-grid{grid-template-columns:1fr 1fr}
 .st-fc.big{grid-column:1/-1}
}
@media (max-width:900px){
 .st-hero{padding:48px 0 64px!important}
 .st-hero-grid{grid-template-columns:1fr;gap:40px}
 .st-grid{grid-template-columns:repeat(2,1fr)}
 .st-bar-note{display:none}
}
@media (max-width:639px){
 .st-hero-vis{padding:12px 0 24px 0}
 .st-float{display:none}
 .st-search{flex-wrap:wrap;padding:8px}
 .st-search input{flex:1 1 60%}
 .st-search .btn{flex:1 1 100%}
 .st-search .st-s-i{padding-left:6px}
 .st-feat{padding-top:48px!important}
 .st-feat-grid,.st-grid{grid-template-columns:1fr}
 .st-card{min-height:0}
 .st-cat-h{flex-wrap:wrap}.st-count{order:3}
 .st-cta-card{padding:32px 24px}
 .st-cta-btns,.st-cta-btns .btn{width:100%}
 .st-rep-top{gap:16px}.st-ring{width:96px;height:96px}
}
@media (prefers-reduced-motion:reduce){.st-card,.st-fc,.st-ci,.st-cf svg{transition:none}.st-card:hover,.st-fc:hover{transform:none}}

/* Tools not built yet: honest, non-clickable state */
.st-card.soon,.st-fc.soon{cursor:default}
.st-card.soon:hover{transform:none;box-shadow:none;border-color:var(--border)}
.st-card.soon:hover .st-ci{background:var(--lav);color:var(--purple)}
.st-fc.soon:hover{transform:none;box-shadow:var(--shadow);border-color:var(--border)}
.st-fc.dk.soon:hover{border-color:#2a2a5c}
.st-card.soon .st-cf b,.st-fc.soon .st-fc-link{color:var(--muted)}
.st-fc.dk.soon .st-fc-link{color:#B9B4DE}
.st-card.soon .st-cf b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--purple-soft)}