:root {
  /* Valley Desk palette — taken from the homepage hero (.vd-hero): warm paper
     background, deep ink text, one green accent. Every page inherits it. */
  --bg0:#eef2ed; --bg1:#ffffff; --bg2:#f6f8f5; --bg3:#eaf1ec; --bg4:#d5ddd8; --surf:#ffffff;
  --g:#0ca968; --g2:#078b58; --g3:#0ca96826; --g4:#0ca96814; --g5:#0ca96808;
  --b:#078b58; --b2:#078b582e; --b3:#078b5814;
  --y:#d97706; --r:#e11d48; --p:#8b5cf6; --o:#ea580c;
  --t1:#091713; --t2:#4f635b; --t3:#647670;
  --navy:#0b1713; --navy2:#13251f;
  --mono:'Lexend Deca',sans-serif; --head:'Sora',sans-serif; --serif:'Fraunces',serif; --card:'Montserrat',sans-serif;
  --rad:8px; --rad2:16px; --rad3:17px;
  --shadow-glow:0 0 17px rgba(12,169,104,0.16),0 0 34px rgba(12,169,104,0.06);
  --glass-bg:rgba(255,255,255,.64); --glass-bg-hov:rgba(255,255,255,.80); --glass-brd:rgba(255,255,255,.75); --glass-sheen:rgba(255,255,255,.5); --glass-shadow:0 8px 28px rgba(28,57,45,.15),0 1.5px 0 rgba(255,255,255,.6) inset;
  /* page background = the hero background */
  --page-glow:rgba(20,166,105,.12); --page-grid:rgba(12,25,21,.028);
  --page-base:linear-gradient(135deg,#f7f8f4 0%,#eef2ed 52%,#e8eee9 100%);
}
[data-theme="dark"]{
  /* Hero's dark variant: green-black instead of neutral black */
  --bg0:#17171a; --bg1:#222227; --bg2:#1c1c20; --bg3:#2a2a30; --bg4:#5a5c63; --surf:#222227;
  --g:#1fc57f; --g2:#4fdba0; --g3:#1fc57f33; --g4:#1fc57f16; --g5:#1fc57f09;
  --b:#0ca968; --b2:#0ca9682e; --b3:#0ca96814;
  --y:#fbbf24; --r:#ff6b6b; --p:#c4a6ff; --o:#ffa15c;
  --t1:#f3f7f4; --t2:#9eb1a9; --t3:#82968d;
  --navy:#131316; --navy2:#1c1c20;
  --shadow-glow:0 0 17px rgba(31,197,127,0.22),0 0 34px rgba(31,197,127,0.08);
  --glass-bg:rgba(34,34,38,.62); --glass-bg-hov:rgba(44,44,49,.80); --glass-brd:rgba(255,255,255,.10); --glass-sheen:rgba(255,255,255,.06); --glass-shadow:0 8px 28px rgba(0,0,0,.58),0 1.5px 0 rgba(255,255,255,.06) inset;
  --page-glow:rgba(20,166,105,.13); --page-grid:rgba(255,255,255,.022);
  --page-base:linear-gradient(135deg,#17171a,#1d1d21 55%,#1c1c20);
}
html,body{overflow-x:hidden;max-width:100%;width:100%}
body>*{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--mono);background:var(--bg0);color:var(--t1);font-size:12px;line-height:1.6;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--mono)}
.wrap{max-width:1320px;margin:0 auto;padding:0 12px;width:100%}

/* TOPBAR */
.topbar{position:relative;background:linear-gradient(90deg,rgba(11,23,19,.98),rgba(19,37,31,.98));backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);height:27px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.14)}
[data-theme="dark"] .topbar{background:linear-gradient(90deg,rgba(6,12,9,.98),rgba(13,24,20,.98))}
.topbar-w{max-width:1320px;margin:0 auto;padding:0 12px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;overflow:hidden}
.tb-left{display:flex;align-items:center;gap:7px;flex-shrink:0}
.tb-date{font-size:8px;color:rgba(255,255,255,.92);letter-spacing:0.5px;white-space:nowrap}
.tb-sep{width:1px;height:8px;background:rgba(255,255,255,.28);flex-shrink:0}
.tb-edition{font-size:8px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:1.5px 7px;border-radius:17px;letter-spacing:1px;white-space:nowrap;font-weight:700}
.live-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(255,93,99,.22);border:1px solid rgba(255,93,99,.55);color:#ffb3b6;font-size:8px;font-weight:700;letter-spacing:1px;padding:1.5px 7px;border-radius:17px;white-space:nowrap}
.live-dot{width:4px;height:4px;background:#ff5d63;border-radius:50%;animation:lp 1.5s ease infinite}
/* Green "live" variant of the pill, used for the Live Result link in the topbar */
.live-pill-g{background:rgba(12,169,104,.2);border-color:rgba(12,169,104,.6);color:#7dffc0;transition:all .15s}
.live-pill-g .live-dot{background:#3dffa0}
.live-pill-g:hover{background:rgba(12,169,104,.32);color:#fff}
.live-pill-g i{font-size:7px}
@keyframes lp{0%,100%{transform:scale(1)}50%{transform:scale(1.7);opacity:.4}}
.tb-right{display:flex;align-items:center;gap:7px}
.tb-right a{font-size:8px;color:rgba(255,255,255,.94);letter-spacing:0.5px;white-space:nowrap;font-weight:600}
.tb-right a:hover{color:#7dffc0}
.tb-sep2{width:1px;height:8px;background:rgba(255,255,255,.28)}

/* MASTHEAD */
.masthead{position:sticky;top:0;z-index:210;background:var(--glass-bg);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid var(--glass-brd);padding:10px 0;overflow:visible;box-shadow:0 4px 24px rgba(24,44,36,.08)}
[data-theme="dark"] .masthead{box-shadow:0 4px 24px rgba(0,0,0,.4)}
.masthead::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2.5px;background:linear-gradient(90deg,var(--g) 0%,var(--b) 100%)}
.mast-w{max-width:1320px;margin:0 auto;padding:0 12px;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;width:100%}
.logo-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-box{width:32px;height:32px;background:#fff;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;color:#fff;box-shadow:0 5px 12px rgba(24,44,36,.28);position:relative;padding:3px;overflow:hidden;border:1px solid var(--bg4)}
.logo-box::after{content:'';position:absolute;inset:0;border-radius:9px;background:linear-gradient(155deg,rgba(255,255,255,.12),transparent 60%);pointer-events:none}
.logo-img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1}
.logo-text{display:flex;align-items:baseline;gap:5px;flex-wrap:nowrap;line-height:1}
.logo-main{font-family:var(--head);font-size:15px;font-weight:800;letter-spacing:-0.5px;color:var(--t1);white-space:nowrap}
.logo-main span{color:var(--g)}
.logo-sub{font-size:7px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;font-weight:600;white-space:nowrap;display:none}
@media(min-width:560px){.logo-sub{display:inline}.logo-text{flex-direction:column;align-items:flex-start;gap:1.5px}.logo-main{font-size:19px}}
.mast-sep{width:1px;height:32px;background:var(--bg4);flex-shrink:0}
.mast-desc{font-size:9px;color:var(--t2);line-height:1.5;flex:1;min-width:0}
.mast-desc strong{color:var(--g);font-weight:700}
.mast-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.mast-icons{display:flex;align-items:center;gap:5px;flex-shrink:0;margin-left:auto}
.mstat{text-align:center;padding:0 10px;border-left:1px solid var(--bg4)}
.mstat-n{font-family:var(--head);font-size:14px;font-weight:800;color:var(--g);display:block;line-height:1}
.mstat-l{font-size:7px;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-top:2.5px;display:block;font-weight:600}
.mast-cta{display:inline-flex;align-items:center;gap:5px;background:var(--g);color:#fff;padding:7px 10px;border-radius:8px;font-size:9px;font-weight:700;letter-spacing:0.5px;white-space:nowrap;flex-shrink:0;border:1px solid var(--g);transition:all .15s}
.mast-cta span{display:none}
@media(min-width:420px){.mast-cta span{display:inline}}
.mast-cta:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-1px);box-shadow:0 5px 14px rgba(24,44,36,.25)}

/* NAVBAR */
.navbar{position:sticky;top:0;z-index:200;border-bottom:1px solid var(--bg4);backdrop-filter:blur(10px);background:rgba(255,255,255,.94)}
[data-theme="dark"] .navbar{background:rgba(11,21,17,.94)}
.nav-w{max-width:1320px;margin:0 auto;padding:0 12px;height:37px;display:flex;align-items:stretch;width:100%}
.nav-list{display:flex;align-items:stretch;list-style:none;flex:1;gap:0;overflow-x:auto;scrollbar-width:none}
.nav-list::-webkit-scrollbar{display:none}
.nav-list>li{position:relative;display:flex;flex-shrink:0}
.nav-list>li>a{display:flex;align-items:center;gap:3.5px;padding:0 11px;font-size:9px;font-weight:700;letter-spacing:0.5px;color:var(--t2);white-space:nowrap;text-transform:uppercase;border-bottom:1.5px solid transparent}
.nav-list>li>a:hover,.nav-list>li.cur>a{color:var(--g);background:var(--g5)}
.nav-list>li.cur>a{color:var(--g);border-bottom:1.5px solid var(--b)}
.nbadge{font-size:7px;font-weight:800;padding:1px 4px;border-radius:2.5px;letter-spacing:0.5px}
.nb-g{background:var(--g);color:#fff} .nb-b{background:var(--b);color:#fff} .nb-r{background:var(--r);color:#fff}
.chev{font-size:7px;opacity:.4}
.ddrop{position:absolute;top:100%;left:0;background:var(--bg1);border:1px solid var(--bg4);border-top:1.5px solid var(--b);min-width:162px;padding:4px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:all .18s;z-index:300;box-shadow:0 17px 37px rgba(24,44,36,.16)}
.nav-list>li:hover .ddrop{opacity:1;visibility:visible;transform:translateY(0)}
.ddrop a{display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:9px;color:var(--t2);border-radius:3.5px;font-weight:500;text-transform:none}
.ddrop a:hover{color:var(--g);background:var(--g4)}
.ddrop a i{width:11px;color:var(--g);font-size:9px}
.nav-right{display:flex;align-items:center;gap:4px;padding-left:7px;flex-shrink:0}
.nsearch{display:flex;align-items:center;background:var(--bg3);border:1px solid var(--bg4);border-radius:17px;padding:3.5px 8px 3.5px 10px;gap:4px}
.nsearch:focus-within{border-color:var(--g);box-shadow:0 0 0 2.5px var(--g4)}
.nsearch input{background:none;border:none;outline:none;font-family:var(--mono);font-size:8px;color:var(--t1);width:94px}
.nsearch input::placeholder{color:var(--t3)}
.icon-btn{width:27px;height:27px;background:linear-gradient(155deg,var(--g4),var(--b3));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--g3);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--g2);font-size:10px;position:relative;flex-shrink:0;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(24,44,36,.1)}
.icon-btn:hover{color:#fff;border-color:var(--g);background:var(--g);box-shadow:0 4px 12px var(--g3)}
.icon-btn .dot{position:absolute;top:3.5px;right:3.5px;width:4px;height:4px;background:var(--r);border-radius:50%;border:1px solid var(--bg2);animation:lp 2s ease infinite}
[data-theme="dark"] .i-sun{display:inline}[data-theme="dark"] .i-moon{display:none}
[data-theme="light"] .i-sun{display:none}[data-theme="light"] .i-moon{display:inline}

/* CAT STRIP */
.cat-strip{background:var(--glass-bg);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);border-bottom:1px solid var(--glass-brd);overflow-x:auto;scrollbar-width:none;width:100%}
.cat-strip::-webkit-scrollbar{display:none}
.cs-inner{display:flex;align-items:center;max-width:1320px;margin:0 auto;padding:0 12px;white-space:nowrap;min-width:max-content}
.cs-btn{display:flex;align-items:center;gap:4px;padding:8px 12px;font-size:8px;letter-spacing:1px;color:var(--t2);border-right:1px solid var(--bg4);cursor:pointer;text-transform:uppercase;white-space:nowrap;flex-shrink:0;position:relative}
.cs-btn:hover,.cs-btn.act{color:var(--t1);background:var(--bg4)}
.cs-btn.act{color:var(--g)}
.cs-btn.act::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1.5px;background:var(--g);border-radius:1.5px}
.cs-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}

/* HERO — a rich "aurora mesh" gradient: layered colour glows (deodar
   green, teal, saffron, a hint of violet for depth) over a near-black
   base, plus a soft grain texture and a dot-grid vignette so it reads
   as a designed surface rather than a flat CSS gradient. Same
   background on every screen size; only the type scale (clamp()) and
   spacing further down adapt for mobile. */
.hero{--h1:#0ca968;--h1d:#078b58;--h2:#2dd4bf;--h3:#ff9a3d;position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(1100px 620px at 14% -12%, rgba(12,169,104,.5), transparent 60%),
    radial-gradient(900px 560px at 88% -8%, rgba(45,212,191,.38), transparent 62%),
    radial-gradient(760px 460px at 50% 108%, rgba(255,154,61,.32), transparent 62%),
    radial-gradient(560px 420px at 92% 78%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(160deg,#02100c 0%,#052319 42%,#031a13 72%,#02100c 100%);
  min-height:auto;padding:28px 0 46px}
/* Dark mode: true-black base, same brand colours at slightly lower
   opacity so it sits comfortably against the rest of the dark theme. */
[data-theme="dark"] .hero{
  --h1:#1fc57f; --h1d:#0d8a53; --h2:#4fdba0; --h3:#ffab5c;
  background:
    radial-gradient(1100px 620px at 14% -12%, rgba(31,197,127,.3), transparent 60%),
    radial-gradient(900px 560px at 88% -8%, rgba(79,219,160,.22), transparent 62%),
    radial-gradient(760px 460px at 50% 108%, rgba(255,171,92,.2), transparent 62%),
    radial-gradient(560px 420px at 92% 78%, rgba(168,130,255,.14), transparent 60%),
    linear-gradient(160deg,#000000 0%,#0a0a0a 42%,#050505 72%,#000000 100%)}
[data-theme="dark"] .hero-overlay{background-image:radial-gradient(rgba(31,197,127,.16) 1px, transparent 1px),radial-gradient(rgba(79,219,160,.1) 1px, transparent 1px)}
[data-theme="dark"] .hero-eyebrow-ico{box-shadow:0 0 10px rgba(31,197,127,.55)}
[data-theme="dark"] .hero-title-grad{filter:drop-shadow(0 0 22px rgba(31,197,127,.3))}
[data-theme="dark"] .hero-search-wrap:focus-within{box-shadow:0 0 0 3.5px rgba(79,219,160,.22),0 12px 34px rgba(0,0,0,.4)}
[data-theme="dark"] .hero-search-btn{box-shadow:0 4px 16px rgba(31,197,127,.35)}
[data-theme="dark"] .hero-search-btn:hover{box-shadow:0 6px 20px rgba(79,219,160,.45)}
[data-theme="dark"] .hero-ql:hover{border-color:rgba(31,197,127,.55);background:rgba(31,197,127,.18)}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,var(--h2) 0%,var(--h1) 50%,var(--h3) 100%);z-index:3}

/* Soft grain so the gradient reads as a textured surface, not flat CSS */
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>")}

/* Drifting colour glows — bigger & softer than before for a richer mesh */
.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;animation:heroFloat 8s ease-in-out infinite}
.hero-blob1{width:380px;height:380px;top:-150px;left:-100px;background:radial-gradient(circle,var(--h1),transparent 70%);opacity:.65}
.hero-blob2{width:320px;height:320px;top:-100px;right:-100px;background:radial-gradient(circle,var(--h2),transparent 70%);opacity:.5;animation-delay:1.4s}
.hero-blob3{width:300px;height:300px;bottom:-150px;left:36%;background:radial-gradient(circle,var(--h3),transparent 70%);opacity:.42;animation-delay:2.6s}
@keyframes heroFloat{0%,100%{transform:translateY(0) translateX(0) scale(1)}50%{transform:translateY(-12px) translateX(6px) scale(1.06)}}

/* Fine dot-grid + vignette — keeps the centre (headline/search) as the
   focal point and gives the gradient a subtle printed texture */
.hero-overlay{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(184,247,214,.22) 1px, transparent 1px),radial-gradient(rgba(153,246,228,.14) 1px, transparent 1px);
  background-size:24px 24px,24px 24px;background-position:0 0,12px 12px;
  -webkit-mask-image:radial-gradient(ellipse 820px 460px at 50% 0%,rgba(0,0,0,.7) 0%,transparent 78%);mask-image:radial-gradient(ellipse 820px 460px at 50% 0%,rgba(0,0,0,.7) 0%,transparent 78%)}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:1}
.hero-wave svg{width:100%;height:48px;display:block}
.hero-inner{max-width:1180px;margin:0 auto;padding:0 12px;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:4px 13px 4px 5px;border-radius:26px;box-shadow:0 4px 18px rgba(0,0,0,.28)}
.hero-eyebrow-ico{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--h2),var(--h1) 55%,var(--h3));display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;flex-shrink:0;box-shadow:0 0 10px rgba(12,169,104,.6);animation:heroPulse 2.6s ease-in-out infinite}
@keyframes heroPulse{0%,100%{box-shadow:0 0 8px rgba(12,169,104,.5)}50%{box-shadow:0 0 15px rgba(12,169,104,.85)}}
.hero-eyebrow-tag{font-size:8px;font-weight:700;letter-spacing:0.5px;color:rgba(226,232,240,.85);white-space:nowrap}
.hero-eyebrow-tag b{color:#fff}
.hero-title{font-family:var(--head);line-height:1.08;margin-bottom:20px;display:flex;flex-direction:column;align-items:center}
.hero-title-main{font-size:clamp(22px,6.6vw,50px);font-weight:800;color:#f8fafc;letter-spacing:-1.1px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-title-grad{background:linear-gradient(100deg,var(--h2) 0%,var(--h1) 45%,var(--h3) 80%,var(--h2) 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(12,169,104,.35));animation:heroShimmer 7s ease-in-out infinite}
@keyframes heroShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-search-wrap{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:42px;padding:5px 5px 5px 16px;width:100%;max-width:420px;margin:0 auto 15px;box-shadow:0 14px 38px rgba(0,0,0,.32);transition:box-shadow .2s,border-color .2s}
.hero-search-wrap:hover{border-color:rgba(255,255,255,.3)}
.hero-search-wrap:focus-within{border-color:var(--h2);box-shadow:0 0 0 3.5px rgba(45,212,191,.22),0 14px 38px rgba(0,0,0,.32)}
.hero-search-input{background:none;border:none;outline:none;font-family:var(--mono);font-size:10px;color:#fff;width:100%}
.hero-search-input::placeholder{color:rgba(203,213,225,.5)}
.hero-search-btn{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--h2),var(--h1));color:#fff;padding:9px 17px;border-radius:42px;font-size:9px;font-weight:700;white-space:nowrap;flex-shrink:0;border:none;box-shadow:0 4px 16px rgba(12,169,104,.4);transition:transform .15s,box-shadow .15s}
.hero-search-btn:hover{box-shadow:0 6px 20px rgba(45,212,191,.5);transform:translateY(-1px)}
.hero-quicklinks{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.hero-ql{font-size:8px;color:rgba(226,232,240,.88);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);padding:5px 11px;border-radius:17px;font-weight:600;transition:all .18s;cursor:pointer}
.hero-ql:hover{color:#fff;border-color:rgba(12,169,104,.6);background:rgba(12,169,104,.22);transform:translateY(-1.5px)}
/* Each chip's hover colour now matches that category's own brand colour
   (see the accent map in js/home.js) instead of an arbitrary hue, so the
   hero stays visually tied to the rest of the site. */
.hero-quicklinks .hero-ql:nth-child(1):hover{border-color:rgba(12,169,104,.65);background:rgba(12,169,104,.22)}    /* Check Result — green */
.hero-quicklinks .hero-ql:nth-child(2):hover{border-color:rgba(12,169,104,.65);background:rgba(12,169,104,.22)}    /* JKBOSE — green */
.hero-quicklinks .hero-ql:nth-child(3):hover{border-color:rgba(225,29,72,.65);background:rgba(225,29,72,.22)}      /* NEET — rose */
.hero-quicklinks .hero-ql:nth-child(4):hover{border-color:rgba(56,189,248,.65);background:rgba(56,189,248,.22)}    /* JEE — blue */
.hero-quicklinks .hero-ql:nth-child(5):hover{border-color:rgba(245,197,24,.65);background:rgba(245,197,24,.22)}    /* JKSSB — yellow */
.hero-stat{text-align:center;flex-shrink:0}
.hero-stat-n{font-family:var(--head);font-size:19px;font-weight:900;background:linear-gradient(100deg,var(--h2),var(--h1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block}
.hero-stat-l{font-size:7px;color:rgba(203,213,225,.65);letter-spacing:1px;text-transform:uppercase;margin-top:2.5px;display:block;font-weight:700}
.hero-stats{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.hero-stat-sep{width:1px;height:24px;background:rgba(255,255,255,.18);flex-shrink:0}
@media(max-width:480px){.hero-stat-sep{height:20px}.hero-stats{gap:10px}}

/* CAT GRID */
.cat-grid-section{padding:14px 0 8px}
.cgs-header{display:flex;flex-direction:column;gap:3.5px;margin-bottom:14px}
.cgs-title-wrap{display:flex;align-items:center;gap:8px}
.cgs-bar{width:5px;height:19px;background:linear-gradient(180deg,var(--g),var(--b));border-radius:3px;box-shadow:0 2px 9px rgba(12,169,104,.4)}
.cgs-title{font-family:var(--head);font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-0.2px}
.cgs-chip{font-size:8px;color:var(--g);border:1px solid var(--g3);padding:1.5px 7px;border-radius:1.5px;letter-spacing:1px}
.cgs-sub{font-size:9px;color:var(--t2)}
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cat-grid-card{position:relative;isolation:isolate;overflow:hidden;background:var(--glass-bg);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--glass-brd);border-radius:var(--rad2);padding:13px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease,background .25s ease;box-shadow:var(--glass-shadow)}
.cat-grid-card::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,var(--glass-sheen),transparent 45%);pointer-events:none;z-index:0}
.cat-grid-card::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);pointer-events:none;z-index:0;transition:left .6s ease}
.cat-grid-card:hover::after{left:130%}
.cat-grid-card>*{position:relative;z-index:1}
.cat-grid-card:hover{background:var(--glass-bg-hov);transform:translateY(-2.5px);box-shadow:0 14px 30px rgba(12,169,104,.16),0 0 0 1px var(--g3) inset}
.cgc-icon{width:36px;height:36px;border-radius:var(--rad);display:flex;align-items:center;justify-content:center;font-size:17px;border:1px solid;flex-shrink:0}
.cgc-body{flex:1;min-width:0}
.cgc-name{font-size:10px;font-weight:700;color:var(--t1)}
.cgc-desc{font-size:8px;color:var(--t3);margin-top:1px}
.cgc-count{font-size:8px;font-weight:700;margin-top:2.5px}
.cgc-arrow{font-size:9px;flex-shrink:0}

/* TOOLS / JOBS LIST */
.tools-section{padding:30px 0}
.tools-section+.tools-section{border-top:1px solid var(--bg4)}
.sh{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.sh-bar{width:5px;height:19px;background:linear-gradient(180deg,var(--g),var(--b));border-radius:3px;box-shadow:0 2px 9px rgba(12,169,104,.4)}
.sh-title{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--t1);text-transform:uppercase;letter-spacing:0.6px;text-shadow:0 1px 0 rgba(255,255,255,.4)}
[data-theme="dark"] .sh-title{text-shadow:none}
.cat-section-hd{position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--rad2);margin:22px 0 12px;border-left-width:4px !important;border-left-style:solid;
  background:rgba(255,255,255,.5);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border-top:1px solid var(--glass-brd);border-right:1px solid var(--glass-brd);border-bottom:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);overflow:hidden}
[data-theme="dark"] .cat-section-hd{background:rgba(22,32,28,.5)}
.cat-section-hd::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--glass-sheen),transparent 60%);pointer-events:none}
.csh-icon{position:relative;z-index:1;font-size:21px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--glass-bg-hov);backdrop-filter:blur(6px);border:1px solid var(--glass-brd);border-radius:9px;flex-shrink:0;box-shadow:0 1px 4px rgba(24,44,36,.08)}
.csh-info{position:relative;z-index:1;flex:1}
.csh-title{font-size:12px;font-weight:800;color:var(--t1);letter-spacing:0.2px}
.csh-desc{font-size:8.5px;color:var(--t2);margin-top:2px;font-weight:500}
.csh-count{position:relative;z-index:1;font-size:9px;font-weight:800;padding:3.5px 10px;border-radius:20px;background:rgba(0,0,0,.055);white-space:nowrap}
[data-theme="dark"] .csh-count{background:rgba(255,255,255,.1)}
.tools-list{display:flex;flex-direction:column;gap:14px}
:root{--tc-bg:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.32));--tc-brd:rgba(255,255,255,.9);--tc-brd-hov:rgba(90,102,96,.55);
  --tc-shadow:inset 5px 5px 12px rgba(163,170,180,.35),inset -5px -5px 12px rgba(255,255,255,.85),0 4px 10px rgba(163,170,180,.12);
  --tc-shadow-hov:inset 3px 3px 8px rgba(163,170,180,.4),inset -3px -3px 8px rgba(255,255,255,.8),0 10px 22px rgba(163,170,180,.28);
  --tc-shadow-active:inset 9px 9px 18px rgba(163,170,180,.55),inset -9px -9px 18px rgba(255,255,255,.85)}
[data-theme="dark"]{--tc-bg:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));--tc-brd:rgba(255,255,255,.14);--tc-brd-hov:rgba(255,255,255,.4);
  --tc-shadow:inset 5px 5px 12px rgba(0,0,0,.42),inset -5px -5px 12px rgba(255,255,255,.04),0 4px 10px rgba(0,0,0,.26);
  --tc-shadow-hov:inset 3px 3px 8px rgba(0,0,0,.5),inset -3px -3px 8px rgba(255,255,255,.055),0 10px 22px rgba(0,0,0,.45);
  --tc-shadow-active:inset 9px 9px 18px rgba(0,0,0,.6),inset -9px -9px 18px rgba(255,255,255,.05)}
.tool-card{position:relative;overflow:hidden;isolation:isolate;background:var(--tc-bg);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--tc-brd);border-radius:var(--rad2);padding:13px 15px;display:flex;align-items:flex-start;gap:8px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease,border-color .25s ease,background .25s ease;box-shadow:var(--tc-shadow)}
.tool-card>*{position:relative;z-index:1}
.tool-card:hover{border-color:var(--tc-brd-hov);transform:translateY(-3px);box-shadow:var(--tc-shadow-hov)}
.tool-card:active{transform:translateY(-1px);box-shadow:var(--tc-shadow-active)}
.tc-cat-dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.3);z-index:2}
[data-theme="dark"] .tc-cat-dot{box-shadow:0 0 0 2px rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.5)}
.tc-body{flex:1;min-width:0}
.tc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tc-name-wrap{display:flex;flex-direction:column}
.tc-name{font-size:12px;font-weight:700;color:var(--t1);letter-spacing:-0.5px;position:relative;display:inline-block;transition:color .15s}
.tool-card:hover .tc-name{color:var(--g)}
.tc-name::after{content:'';position:absolute;left:0;bottom:-1.5px;width:0;height:1.5px;background:linear-gradient(90deg,var(--g),var(--b));transition:width .25s ease;border-radius:1.5px}
.tool-card:hover .tc-name::after{width:100%}
.tc-ver{font-size:8px;font-weight:700;color:var(--t3);margin-top:1px}
.tc-badges{display:flex;gap:4px;flex-wrap:wrap}
.tc-top-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex-shrink:0}
.tcb{font-size:6.5px;font-weight:800;padding:2px 6px;border-radius:2.5px;letter-spacing:0.4px;text-transform:uppercase}
.tcb-r{background:rgba(196,79,79,.12);color:#c44f4f;border:1px solid rgba(196,79,79,.3)}
.tcb-g{background:rgba(7,135,76,.1);color:#07874c;border:1px solid rgba(7,135,76,.3)}
.tcb-b{background:rgba(27,126,174,.12);color:#1b7eae;border:1px solid rgba(27,126,174,.3)}
.tcb-y{background:rgba(142,114,14,.12);color:#8e720e;border:1px solid rgba(142,114,14,.3)}
.tcb-p{background:rgba(143,99,181,.12);color:#8f63b5;border:1px solid rgba(143,99,181,.3)}
.tcb-admit{background:rgba(27,126,174,.12);color:#1b7eae;border:1px solid rgba(27,126,174,.3)}
.tc-desc{font-size:9px;font-weight:600;color:var(--t2);line-height:1.6;margin:5px 0 8px}
.tc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tc-tags{display:flex;gap:4px;flex-wrap:wrap}
.tc-tag{font-size:8px;background:var(--bg3);border:1px solid var(--bg4);color:var(--t2);padding:1.5px 6px;border-radius:1.5px}
.tc-dates{display:flex;gap:8px;flex-wrap:wrap}
.tc-date{font-size:8px;font-weight:700;padding:3.5px 8px;border-radius:3.5px;display:flex;align-items:center;gap:4px;letter-spacing:0.5px}
.tc-date-start{background:rgba(0,200,120,.12);border:1px solid rgba(0,200,120,.4);color:#00c878}
.tc-date-reg{background:rgba(255,140,0,.12);border:1px solid rgba(255,140,0,.4);color:#ff8c00}
.tc-date i{font-size:8px}

.tc-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tc-btn{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;padding:8px 12px;border-radius:7px;border:1px solid transparent;transition:all .15s;white-space:nowrap;min-height:31px}
.tc-btn-g{background:var(--g);color:#fff}
.tc-btn-g:hover{background:var(--g2);border-color:var(--tc-brd-hov);transform:translateY(-3px);box-shadow:var(--tc-shadow-hov),0 3.5px 12px rgba(12,169,104,.35)}
.tc-btn-g:active{transform:translateY(-1px);box-shadow:var(--tc-shadow-active)}
.tc-btn-b{background:var(--bg1);color:var(--b);border-color:var(--b2)}
.tc-btn-b:hover{background:var(--b3);border-color:var(--tc-brd-hov);transform:translateY(-3px);box-shadow:var(--tc-shadow-hov)}
.tc-btn-b:active{transform:translateY(-1px);box-shadow:var(--tc-shadow-active)}
.tc-btn-o{background:var(--bg1);color:var(--t2);border-color:var(--bg4)}
.tc-btn-o:hover{color:var(--t1);border-color:var(--tc-brd-hov);transform:translateY(-3px);box-shadow:var(--tc-shadow-hov)}
.tc-btn-o:active{transform:translateY(-1px);box-shadow:var(--tc-shadow-active)}
#noResults{display:none;text-align:center;padding:34px 0;color:var(--t3);font-size:10px}

/* INFO BOX */
.info-box{background:rgba(12,169,104,.07);border:1px solid rgba(12,169,104,.22);border-radius:var(--rad2);padding:10px 12px;margin:15px auto;display:flex;align-items:flex-start;gap:8px}
.info-box i{color:var(--b);font-size:13px;flex-shrink:0;margin-top:1px}
.info-box p{font-size:9px;color:var(--t2);line-height:1.6}
.info-box p strong{color:var(--b)}

/* FOOTER */
footer{margin-top:24px;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-top:1px solid var(--glass-brd);position:relative}
.footer-top{max-width:1320px;margin:0 auto;padding:22px 12px;display:grid;grid-template-columns:187px 1fr 1fr 1fr;gap:19px;width:100%}
.fb-desc{font-size:9px;color:var(--t2);line-height:1.7;margin:7px 0 10px}
.soc-row{display:flex;gap:4px;flex-wrap:wrap}
.soc-btn{width:24px;height:24px;background:var(--bg3);border:1px solid var(--bg4);border-radius:var(--rad);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:9px;cursor:pointer}
.soc-btn:hover{color:var(--g);border-color:var(--g3)}
.fc-t{font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--t1);padding-bottom:7px;border-bottom:1px solid var(--bg4);margin-bottom:7px}
.f-links{list-style:none;display:flex;flex-direction:column;gap:4px}
.f-links a{font-size:9px;color:var(--t2);display:flex;align-items:center;gap:3.5px}
.f-links a:hover{color:var(--g)}
.footer-bot{border-top:1px solid var(--bg4);padding:8px 12px;max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px}
.fb-l,.fb-r{font-size:8px;color:var(--t3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-r a:hover{color:var(--g)}
.fb-credit{font-weight:600;color:var(--t2);position:relative;padding-left:10px}
.fb-credit::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:9px;background:var(--bg4)}

#backToTop{position:fixed;bottom:20px;right:20px;width:34px;height:34px;background:var(--bg2);border:1px solid var(--bg4);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--g);font-size:12px;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s;z-index:500;box-shadow:0 3.5px 14px rgba(0,0,0,.3)}
#backToTop.visible{opacity:1;visibility:visible;transform:translateY(0)}
#backToTop:hover{background:var(--g);color:#fff;border-color:var(--g)}

.mobile-nav{display:none}
@media(max-width:768px){
  .mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--glass-bg);backdrop-filter:blur(32px) saturate(220%);-webkit-backdrop-filter:blur(32px) saturate(220%);border:1px solid var(--glass-brd);border-bottom:0;border-radius:24px 24px 0 0;z-index:600;padding:5px 5px calc(5px + env(safe-area-inset-bottom));box-shadow:0 -10px 26px rgba(0,0,0,.14),var(--glass-shadow);gap:3px}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  #backToTop{bottom:calc(66px + env(safe-area-inset-bottom))}
}
[data-theme="dark"] .mobile-nav{box-shadow:0 -10px 26px rgba(0,0,0,.5),var(--glass-shadow)}
/* ===================================================================
   MOBILE MENU — dock-style items (inspired by Magic UI's "Dock" +
   "Border Beam"; pure CSS, no libraries). Every item is an icon tile with
   its label BELOW it, in its own accent colour. The active page widens into
   one squircle box holding icon (left) + label (right), with a light beam
   travelling around its border. Pressing a tile magnifies it and its
   neighbours a little.
=================================================================== */
@property --mn-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.mn-item{--mn-c:#0ca968;position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:42px;padding:2px 1.5px 1px;border:none;border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font-family:var(--mono);font-size:7px;line-height:1.25;font-weight:700;letter-spacing:.2px;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--t2);background:none;
  transition:flex-grow .45s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s,box-shadow .25s}
.mn-item:nth-child(1){--mn-c:#0ca968}
.mn-item:nth-child(2){--mn-c:#f59e0b}
.mn-item:nth-child(3){--mn-c:#8b5cf6}
.mn-item:nth-child(4){--mn-c:#0ea5e9}
.mn-item:nth-child(5){--mn-c:#f97316}
.mn-item:nth-child(6){--mn-c:#ec4899}
.mn-ic{position:relative;flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--mn-c);
  background:var(--g4);
  background:linear-gradient(150deg,color-mix(in srgb,var(--mn-c) 22%,transparent),color-mix(in srgb,var(--mn-c) 6%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mn-c) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s,box-shadow .25s}
.mn-item i{font-size:12px}

/* active page — widened squircle box: icon left, label right, glow + travelling beam */
.mn-item.act{flex-grow:2.3;flex-direction:row;gap:7px;padding:0 2px;color:#fff;font-size:8px;font-weight:800;letter-spacing:.1px;
  background:var(--mn-c);
  background:linear-gradient(150deg,color-mix(in srgb,var(--mn-c),#fff 24%),var(--mn-c) 70%);
  box-shadow:0 6px 12px -4px color-mix(in srgb,var(--mn-c) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.mn-item.act .mn-ic{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:#fff}
.mn-item.act i{font-size:13px}
.mn-item.act::after{content:'';position:absolute;inset:-2px;border-radius:18px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--mn-a),transparent 0 62%,color-mix(in srgb,var(--mn-c),#fff 55%) 82%,#fff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:mn-beam 2.8s linear infinite}
@keyframes mn-beam{to{--mn-a:360deg}}

/* press = dock magnification on the icon tiles (neighbours lift a little) */
.mn-item:not(.act):active .mn-ic{transform:translateY(-3px) scale(1.14)}
.mn-item:not(.act):active + .mn-item:not(.act) .mn-ic,.mn-item:not(.act):has(+ .mn-item:not(.act):active) .mn-ic{transform:translateY(-2px) scale(1.07)}
.mn-item.act:active{transform:scale(.97)}

/* Centre "Menu" glyph — soft 2x2 grid that spins open when pressed */
.mn-menu-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:2.5px;width:12px;height:12px;transition:transform .45s cubic-bezier(.34,1.56,.64,1),gap .3s}
.mn-menu-dots span{background:currentColor;border-radius:3px;width:100%;height:100%}
.mn-menu-dots span:nth-child(1),.mn-menu-dots span:nth-child(4){border-radius:50%}
.mn-menu-dots span:nth-child(2),.mn-menu-dots span:nth-child(3){opacity:.55}
.mn-item:active .mn-menu-dots{transform:rotate(90deg) scale(1.1);gap:4px}

/* very narrow phones: slightly tighter so the active label never clips */
@media(max-width:360px){.mn-item.act{gap:5px;padding:0 4px;font-size:7px}.mn-item.act i{font-size:12px}}

@media(prefers-reduced-motion:reduce){
  .mn-item.act::after{animation:none}
  .mn-item,.mn-ic,.mn-menu-dots{transition:none}
}

/* ===================================================================
   OFF-CANVAS MENU PANEL (desktop + mobile — opened from the header
   hamburger icon). Slides in from the right over an overlay backdrop.
=================================================================== */
#menuBtn{order:-1}
.offcanvas-backdrop{position:fixed;inset:0;background:rgba(3,10,7,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s;z-index:900}
.offcanvas-backdrop.show{opacity:1;visibility:visible;transition:opacity .28s ease}
.offcanvas{position:fixed;top:0;right:0;bottom:0;width:330px;max-width:88vw;background:var(--glass-bg);backdrop-filter:blur(36px) saturate(220%);-webkit-backdrop-filter:blur(36px) saturate(220%);border-left:1px solid var(--glass-brd);z-index:950;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:-18px 0 50px rgba(0,0,0,.28)}
.offcanvas.show{transform:translateX(0)}
.oc-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bg4);flex-shrink:0}
.oc-head .logo-wrap{flex:1;min-width:0}
.oc-close{width:28px;height:28px;border-radius:8px;background:var(--bg3);border:1px solid var(--bg4);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:12px;cursor:pointer;flex-shrink:0;transition:all .15s}
.oc-close:hover{color:#fff;background:var(--r);border-color:var(--r)}
.oc-body{flex:1;overflow-y:auto;padding:14px 16px 20px}
.oc-section{margin-bottom:18px}
.oc-section:last-child{margin-bottom:4px}
.oc-section-t{font-size:8px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid var(--bg4)}
.oc-links{list-style:none;display:flex;flex-direction:column;gap:1.5px}
.oc-link{display:flex;align-items:center;gap:10px;padding:8.5px 8px;border-radius:8px;font-size:10px;font-weight:600;color:var(--t2);transition:all .15s}
.oc-link:hover{background:var(--g5);color:var(--g)}
.oc-link.oc-cur{background:var(--g4);color:var(--g)}
.oc-link{--oc-c:#0ca968}
.oc-links li:nth-child(1) .oc-link{--oc-c:#0ca968}
.oc-links li:nth-child(2) .oc-link{--oc-c:#f97316}
.oc-links li:nth-child(3) .oc-link{--oc-c:#0ea5e9}
.oc-links li:nth-child(4) .oc-link{--oc-c:#8b5cf6}
.oc-links li:nth-child(5) .oc-link{--oc-c:#f59e0b}
.oc-link i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;font-size:11.5px;color:var(--oc-c);flex-shrink:0;
  background:var(--g4);
  background:linear-gradient(150deg,color-mix(in srgb,var(--oc-c) 22%,transparent),color-mix(in srgb,var(--oc-c) 6%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--oc-c) 28%,transparent);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s,box-shadow .2s}
.oc-link:hover i,.oc-link.oc-cur i{color:#fff;background:var(--oc-c);
  background:linear-gradient(150deg,color-mix(in srgb,var(--oc-c),#fff 24%),var(--oc-c) 70%);
  box-shadow:0 5px 12px -3px color-mix(in srgb,var(--oc-c) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.45);transform:scale(1.07)}
.oc-link:active i{transform:scale(.92)}
.oc-link .cs-dot{margin-right:1px}
.oc-link-count{margin-left:auto;font-size:8px;color:var(--t3);background:var(--bg3);padding:1.5px 6px;border-radius:20px;font-weight:700}
.oc-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px;background:var(--bg2);border:1px solid var(--bg4);border-radius:9px}
.oc-toggle-label{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:700;color:var(--t1)}
.oc-toggle-label i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#6366f1;font-size:11.5px;background:rgba(99,102,241,.14);background:linear-gradient(150deg,color-mix(in srgb,#6366f1 22%,transparent),color-mix(in srgb,#6366f1 6%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,#6366f1 28%,transparent)}
.oc-switch{position:relative;width:34px;height:19px;background:var(--bg4);border-radius:20px;cursor:pointer;flex-shrink:0;transition:background .2s}
.oc-switch::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1.5px 4px rgba(0,0,0,.3)}
[data-theme="dark"] .oc-switch::after{transform:translateX(15px)}
[data-theme="dark"] .oc-switch{background:var(--g)}
.oc-join{display:flex;flex-direction:column;gap:7px}
.oc-join a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:9.5px;font-weight:700;color:#fff}
.oc-join-tg{background:linear-gradient(135deg,#229ED9,#1b7fb0)}
.oc-join-wa{background:linear-gradient(135deg,#25D366,#1aa851)}
.oc-social-row{display:flex;gap:5px;flex-wrap:wrap}
.oc-foot{border-top:1px solid var(--bg4);padding:12px 16px;flex-shrink:0}
.oc-foot-links{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.oc-foot-links a{font-size:8px;color:var(--t3)}
.oc-foot-links a:hover{color:var(--g)}
.oc-foot-credit{font-size:8px;color:var(--t3)}
.oc-foot-credit b{color:var(--t2);font-weight:700}
body.oc-lock{overflow:hidden}
@media(max-width:480px){.offcanvas{width:100%;max-width:100%}}

/* AMBIENT BACKGROUND BLOBS (gives the glass panels real colour to blur) */
.ambient-blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.36;animation:ambientDrift 16s ease-in-out infinite}
[data-theme="dark"] .ambient-blob{opacity:.28}
.ambient-blob1{width:460px;height:460px;top:6%;left:-9%;background:radial-gradient(circle,var(--g),transparent 70%)}
.ambient-blob2{width:420px;height:420px;top:36%;right:-11%;background:radial-gradient(circle,var(--b),transparent 70%);animation-delay:3s}
.ambient-blob3{width:380px;height:380px;bottom:3%;left:20%;background:radial-gradient(circle,#38bdf8,transparent 70%);animation-delay:6s}
.ambient-blob4{width:320px;height:320px;top:62%;left:48%;background:radial-gradient(circle,#b060ff,transparent 70%);animation-delay:1.5s;opacity:.3}
@keyframes ambientDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-24px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.ambient-blob{animation:none}}
#toastContainer{position:fixed;bottom:17px;left:50%;transform:translateX(-50%);z-index:1001;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{background:var(--bg2);border:1px solid var(--g3);border-radius:var(--rad2);padding:8px 14px;font-size:9px;color:var(--t1);display:flex;align-items:center;gap:7px;box-shadow:0 7px 27px rgba(0,0,0,.5);animation:toastIn .4s ease,toastOut .4s ease 2.6s forwards;pointer-events:auto;min-width:170px}
.toast i{color:var(--g);font-size:10px}
@keyframes toastIn{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-17px)}}
/* JOIN CHANNELS SECTION */
.join-section{padding:22px 0;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--glass-brd);border-top:1px solid var(--glass-brd)}
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.join-card{display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:var(--rad3);position:relative;overflow:hidden;transition:all .25s}
.join-card:hover{transform:translateY(-2.5px)}
.join-tg{background:linear-gradient(135deg,rgba(34,158,217,.12),rgba(34,158,217,.03));border:1px solid rgba(34,158,217,.3)}
.join-tg:hover{box-shadow:0 8px 26px rgba(34,158,217,.2);border-color:rgba(34,158,217,.55)}
.join-wa{background:linear-gradient(135deg,rgba(37,211,102,.12),rgba(37,211,102,.03));border:1px solid rgba(37,211,102,.3)}
.join-wa:hover{box-shadow:0 8px 26px rgba(37,211,102,.2);border-color:rgba(37,211,102,.55)}
.join-icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.join-tg .join-icon{background:#229ED9;color:#fff}
.join-wa .join-icon{background:#25D366;color:#fff}
.join-body{flex:1;min-width:0}
.join-title{font-family:var(--head);font-size:13px;font-weight:800;color:var(--t1)}
.join-sub{font-size:9px;color:var(--t2);margin-top:2.5px;line-height:1.5}
.join-count{display:inline-flex;align-items:center;gap:3.5px;font-size:8px;font-weight:700;letter-spacing:0.5px;margin-top:5px;padding:1.5px 7px;border-radius:2.5px;text-transform:uppercase}
.join-tg .join-count{background:rgba(34,158,217,.15);color:#229ED9}
.join-wa .join-count{background:rgba(37,211,102,.15);color:var(--g)}
.join-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:7px;font-size:9px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;border:1px solid transparent;transition:all .15s}
.join-btn-tg{background:#229ED9;color:#fff}
.join-btn-tg:hover{background:#0088cc;transform:translateY(-1.5px);box-shadow:0 7px 17px rgba(34,158,217,.35)}
.join-btn-wa{background:#25D366;color:#fff}
.join-btn-wa:hover{background:#1da851;transform:translateY(-1.5px);box-shadow:0 7px 17px rgba(37,211,102,.35)}
@media(max-width:760px){.join-grid{grid-template-columns:1fr}.join-card{flex-wrap:wrap}.join-btn{width:100%;justify-content:center}}

@media(max-width:1100px){.cat-grid{grid-template-columns:repeat(4,1fr)}.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.mast-sep,.mast-desc,.mast-right{display:none}.tb-right{display:none}.nsearch{display:none}#menuBtn{display:none}.footer-top{grid-template-columns:1fr 1fr}.footer-bot{flex-direction:column;align-items:flex-start}.cat-grid{grid-template-columns:repeat(2,1fr);gap:8px}.cat-grid-card{padding:8px 10px}.cgc-icon{width:31px;height:31px;font-size:14px}.hero{padding:22px 0 38px}.hero-search-wrap{max-width:100%}.hero-stat-n{font-size:15px}}
@media(max-width:480px){.wrap{padding:0 5px}.mast-w,.topbar-w,.nav-w,.cs-inner{padding-left:8px;padding-right:8px}.footer-top{grid-template-columns:1fr}.cat-grid{grid-template-columns:1fr 1fr;gap:7px}.hero-eyebrow{padding:4px 10px 4px 5px}.hero-eyebrow-tag{font-size:8px}.hero-search-wrap{padding:4px 4px 4px 12px}.hero-search-btn{padding:8px 12px}.hero-search-btn span{display:none}.hero-quicklinks{gap:4px}.hero-ql{padding:4px 8px;font-size:8px}.hero-stat-n{font-size:14px}.tc-actions{width:100%}.tc-actions .tc-btn{flex:1;justify-content:center}.tc-foot{flex-direction:column;align-items:stretch}.tool-card{padding:11px 11px 12px}.cat-grid-card{padding:8px 8px;gap:7px}.cgc-icon{width:27px;height:27px;font-size:13px}.cgc-name{font-size:9px}.cgc-desc{font-size:7px}.cgc-count{font-size:7px}.cgc-arrow{display:none}.tb-edition{display:none}.tb-date{font-size:8px}.topbar-w{gap:5px}.live-pill{padding:1.5px 5px;font-size:7px;letter-spacing:0.5px}.tb-left{gap:5px}.logo-box{width:27px;height:27px;font-size:12px;border-radius:8px}.logo-main{font-size:13px}.mast-icons .icon-btn:nth-child(4){display:none}.mast-icons{gap:4px}.mast-cta{padding:6px 8px}}
::-webkit-scrollbar{width:3.5px;height:3.5px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:1.5px}
::-webkit-scrollbar-thumb:hover{background:var(--g)}

/* VIEW-ALL / SECTION-LIMIT NOTE */
.view-all-wrap{display:flex;justify-content:center;margin:14px 0 6px}
.view-all-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--bg4);color:var(--g);font-weight:700;font-size:9px;letter-spacing:0.5px;padding:9px 18px;border-radius:20px;transition:all .18s}
.view-all-btn:hover{background:var(--g);color:#fff;border-color:var(--g);transform:translateY(-1.5px);box-shadow:0 7px 17px var(--g3)}
.view-all-btn i{font-size:9px}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;margin:22px 0 8px}
.pg-btn{min-width:28px;height:28px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--bg4);border-radius:7px;font-size:9px;font-weight:700;color:var(--t2);cursor:pointer;transition:all .15s}
.pg-btn:hover:not(.pg-dis):not(.act){border-color:var(--g3);color:var(--g);background:var(--g5)}
.pg-btn.act{background:var(--g);border-color:var(--g);color:#fff}
.pg-btn.pg-dis{opacity:.4;cursor:not-allowed}
.pg-ellipsis{font-size:9px;color:var(--t3);padding:0 3px}
.pg-info{text-align:center;font-size:8.5px;color:var(--t3);margin-top:6px}

/* SUB-PAGE HERO */
.subpage-hero{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border-bottom:1px solid var(--glass-brd);padding:18px 0}
.subpage-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.subpage-title{font-family:var(--head);font-size:20px;font-weight:800;color:var(--t1);letter-spacing:-0.3px}
.subpage-desc{font-size:9.5px;color:var(--t2);margin-top:3px}
.subpage-crumb{font-size:8.5px;color:var(--t3);letter-spacing:0.5px}
.subpage-crumb a{color:var(--g);font-weight:600}
.subpage-total{font-size:8px;color:var(--g);border:1px solid var(--g3);padding:3px 10px;border-radius:20px;letter-spacing:0.5px;font-weight:700;white-space:nowrap}

/* TOOLS PAGE */
.tool-card-wide{flex-direction:column;align-items:stretch;padding:15px 16px 17px}
.tc-tool-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tc-tool-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--g4);border:1px solid var(--g3)}
.tc-tool-title{font-family:var(--head);font-size:13px;font-weight:800;color:var(--t1)}
.tc-tool-sub{font-size:8.5px;color:var(--t2);margin-top:1.5px}
.tc-tool-badge{margin-left:auto;font-size:7.5px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;color:var(--g);border:1px solid var(--g3);background:var(--g5);padding:3px 9px;border-radius:20px;white-space:nowrap}

.dropzone{position:relative;border:1.5px dashed var(--bg4);border-radius:var(--rad2);padding:26px 14px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg2)}
.dropzone:hover,.dropzone.dragover{border-color:var(--g);background:var(--g5)}
.dropzone i{font-size:22px;color:var(--g);margin-bottom:8px;display:block}
.dropzone-text{font-size:10px;font-weight:700;color:var(--t1)}
.dropzone-sub{font-size:8px;color:var(--t3);margin-top:3px}
.dropzone input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.compressor-body{display:none;margin-top:14px}
.compressor-body.active{display:block}
.compress-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.compress-label{font-size:8.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
input[type="range"]{-webkit-appearance:none;appearance:none;flex:1;min-width:120px;height:4px;border-radius:3px;background:var(--bg4);outline:none;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--g);border:2px solid var(--surf);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
input[type="range"]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--g);border:2px solid var(--surf);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.compress-qty{font-family:var(--head);font-size:11px;font-weight:800;color:var(--g);min-width:32px;text-align:right}
.compress-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.compress-pane{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--rad2);padding:9px;text-align:center}
.compress-pane img{max-width:100%;max-height:130px;border-radius:7px;object-fit:contain;background:var(--bg3)}
.compress-pane-label{font-size:7.5px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;color:var(--t3);margin-top:7px}
.compress-pane-size{font-family:var(--head);font-size:13px;font-weight:800;color:var(--t1);margin-top:1.5px}
.compress-savings{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--g5);border:1px solid var(--g3);color:var(--g);font-size:9px;font-weight:800;padding:7px;border-radius:8px;margin-bottom:12px}
.compressor-actions{display:flex;gap:8px;flex-wrap:wrap}

/* TOOL GRID (mirrors the homepage category grid for visual consistency) */
.tool-grid-card.coming-soon{opacity:.72}
.tool-grid-card.coming-soon .cgc-count{color:var(--t3)!important}

/* Homepage "Browse By Category" grid — just a touch of that card's
   accent colour on the border (via --cgc, set inline per card) so
   each card reads a little more clearly against the white background,
   without tinting the whole card fill. Scoped to #homeCatGrid only. */
#homeCatGrid .cat-grid-card{
  border-color:color-mix(in srgb, var(--cgc) 40%, var(--glass-brd));
}
#homeCatGrid .cat-grid-card:hover{
  border-color:color-mix(in srgb, var(--cgc) 62%, var(--glass-brd));
  box-shadow:0 14px 30px color-mix(in srgb, var(--cgc) 18%, transparent),0 0 0 1px color-mix(in srgb, var(--cgc) 42%, transparent) inset;
}

/* Tool-card glass variant — .cat-grid-card / .tool-grid-card now use the
   exact same frosted-glass treatment as the Tool cards (.tool-card):
   the same --tc-bg gradient fill, --tc-brd border and soft inset
   --tc-shadow, so homepage category tiles, category-page section tiles,
   etc. all match the Tools grid look and feel. */
.cat-grid-card,
.tool-grid-card{
  border-radius:20px;
  background:var(--tc-bg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--tc-brd);
  box-shadow:var(--tc-shadow);
}
.cat-grid-card .cgc-icon,
.tool-grid-card .cgc-icon{border-radius:16px;backdrop-filter:blur(6px)}
.cat-grid-card:hover,
.tool-grid-card:hover{
  border-color:var(--tc-brd-hov);
  box-shadow:var(--tc-shadow-hov);
}
.cat-grid-card:active,
.tool-grid-card:active{
  box-shadow:var(--tc-shadow-active);
}
@media(max-width:480px){.cat-grid-card,.tool-grid-card{border-radius:16px}.cat-grid-card .cgc-icon,.tool-grid-card .cgc-icon{border-radius:13px}}

/* Header buttons (menu / theme / notifications) — same frosted-glass
   treatment as the Tool cards. */
.icon-btn{
  background:var(--tc-bg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--tc-brd);
  box-shadow:var(--tc-shadow);
}
.icon-btn:hover{
  color:var(--g);
  background:var(--tc-bg);
  border-color:var(--tc-brd-hov);
  box-shadow:var(--tc-shadow-hov);
}
.icon-btn:active{box-shadow:var(--tc-shadow-active)}
.mast-cta{
  background:var(--tc-bg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--tc-brd);
  box-shadow:var(--tc-shadow);
  color:var(--g);
}
.mast-cta:hover{
  color:var(--g2);
  background:var(--tc-bg);
  border-color:var(--tc-brd-hov);
  box-shadow:var(--tc-shadow-hov);
}
.mast-cta:active{box-shadow:var(--tc-shadow-active)}
@media(max-width:480px){.compress-preview{grid-template-columns:1fr}}

/* ===================================================================
   Notification bell + dropdown panel (masthead, every page)
=================================================================== */
.notif-wrap{position:relative;flex-shrink:0}
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:320px;max-width:88vw;background:var(--glass-bg-hov);backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);border:1px solid var(--glass-brd);border-radius:var(--rad3);box-shadow:var(--glass-shadow),0 20px 45px rgba(24,44,36,.18);z-index:920;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s;overflow:hidden}
[data-theme="dark"] .notif-panel{box-shadow:0 20px 45px rgba(0,0,0,.5)}
.notif-panel.show{opacity:1;visibility:visible;transform:translateY(0)}
.notif-panel::before{content:"";position:absolute;top:-5px;right:11px;width:9px;height:9px;background:var(--glass-bg-hov);backdrop-filter:blur(26px);border-left:1px solid var(--glass-brd);border-top:1px solid var(--glass-brd);transform:rotate(45deg)}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--bg4);font-size:10px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;color:var(--t1)}
.notif-count{background:var(--g5);border:1px solid var(--g3);color:var(--g);font-size:8px;font-weight:800;padding:2px 7px;border-radius:20px}
.notif-list{max-height:340px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bg4);text-decoration:none;transition:background .15s}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--bg2)}
.notif-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:1px}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:10px;font-weight:700;color:var(--t1);line-height:1.4}
.notif-msg{font-size:9px;color:var(--t3);line-height:1.6;margin-top:2px}
.notif-date{font-size:7.5px;color:var(--t3);letter-spacing:0.4px;text-transform:uppercase;font-weight:700;margin-top:5px}
.notif-empty{padding:26px 14px;text-align:center;font-size:9.5px;color:var(--t3);line-height:1.6}
.notif-empty i{display:block;font-size:18px;color:var(--bg4);margin-bottom:8px}
@media(max-width:480px){
  .notif-panel{position:fixed;top:auto;bottom:calc(58px + env(safe-area-inset-bottom));left:0;right:0;width:100%;max-width:100%;border-radius:16px 16px 0 0;transform:translateY(20px);z-index:920;max-height:min(420px,60vh)}
  .notif-panel.show{transform:translateY(0)}
  .notif-panel::before{display:none}
  .notif-list{max-height:min(340px,48vh)}
}

/* ==========================================================
   HOMEPAGE — RESULT CTA BANNER + EDITORIAL HERO + WAVE DIVIDER
   (moved out of index.html's inline <style> block so all site
   CSS lives in one place, per the site's external-stylesheet
   architecture)
   ========================================================== */
  .result-cta-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,var(--navy),var(--navy2));border:1px solid var(--g3);border-radius:var(--rad3);padding:18px 20px;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
  .result-cta-banner:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(12,169,104,.22)}
  .result-cta-banner::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 420px 200px at 90% -20%,rgba(12,169,104,.35),transparent 70%)}
  .result-cta-ico{width:48px;height:48px;flex-shrink:0;border-radius:14px;background:rgba(12,169,104,.18);border:1px solid rgba(12,169,104,.4);display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;z-index:1}
  .result-cta-body{flex:1;min-width:0;position:relative;z-index:1}
  .result-cta-title{font-family:var(--head);font-size:14.5px;font-weight:800;color:#fff;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .result-cta-live{display:inline-flex;align-items:center;gap:5px;font-size:8px;font-weight:800;letter-spacing:.8px;color:#1fc57f;background:rgba(31,197,127,.14);border:1px solid rgba(31,197,127,.35);padding:2px 8px;border-radius:20px}
  .result-cta-desc{font-size:9.5px;color:rgba(226,232,240,.75);margin-top:4px;line-height:1.55}
  .result-cta-arrow{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;position:relative;z-index:1;transition:transform .2s ease}
  .result-cta-banner:hover .result-cta-arrow{transform:translateX(3px)}
  @media(max-width:560px){.result-cta-banner{padding:14px 15px;gap:12px}.result-cta-ico{width:40px;height:40px;font-size:18px}.result-cta-title{font-size:12.5px}.result-cta-desc{font-size:8.5px}}


/* =========================================================
   VALLEYDESK — EDITORIAL HERO / MOBILE FIRST
   A cleaner, more premium direction: Kashmir editorial desk,
   strong typography, paper/ink contrast and a live bulletin panel.
   ========================================================= */
.vd-hero{position:relative;overflow:hidden;isolation:isolate;padding:54px 22px 58px;background:#f4f5ef;color:#0c1915;border-top:1px solid rgba(12,25,21,.08);border-bottom:1px solid rgba(12,25,21,.10)}
.vd-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;background-image:linear-gradient(rgba(12,25,21,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,25,21,.045) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.vd-hero::after{content:"";position:absolute;width:620px;height:620px;right:-230px;top:-280px;border:1px solid rgba(12,25,21,.09);border-radius:50%;box-shadow:0 0 0 70px rgba(12,25,21,.018),0 0 0 140px rgba(12,25,21,.014);pointer-events:none}
.vd-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.72fr);gap:70px;align-items:center;position:relative;z-index:2}
.vd-hero-copy{max-width:760px}
.vd-hero-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:21px;color:#426158;font:800 8px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase}
.vd-kicker-dot{width:8px;height:8px;border-radius:50%;background:#0ca968;box-shadow:0 0 0 5px rgba(12,169,104,.10)}
.vd-hero-kicker i{font-size:7px;color:#8a9a94}.vd-hero-kicker b{color:#0b9360}
.vd-hero-copy h1{margin:0 0 18px;max-width:800px;font-family:var(--head);font-size:clamp(48px,6.2vw,82px);line-height:.96;letter-spacing:-4.5px;font-weight:800;color:#091713}
.vd-hero-copy h1 span{color:#0a9b61}.vd-hero-copy h1 em{font-family:var(--serif);font-weight:600;font-style:italic;letter-spacing:-2.5px;color:#4d655d}
.vd-hero-lead{max-width:670px;margin:0 0 27px;color:#60736d;font:500 11px/1.75 var(--mono)}
.vd-hero-lead strong{color:#1b332b;font-weight:800}
.vd-hero-search{display:flex;align-items:center;width:min(100%,650px);height:60px;padding:5px 5px 5px 18px;border:1px solid #cbd5cf;border-radius:15px;background:#fff;box-shadow:0 14px 36px rgba(24,44,36,.10);transition:.2s ease}
.vd-hero-search:focus-within{border-color:#0ca968;box-shadow:0 0 0 4px rgba(12,169,104,.10),0 16px 40px rgba(24,44,36,.12)}
.vd-search-icon{width:30px;color:#70837c;font-size:13px;text-align:center;flex-shrink:0}.vd-hero-search .hero-search-input{font:600 10px var(--mono);color:#172821;min-width:0}.vd-hero-search .hero-search-input::placeholder{color:#91a09b}
.vd-search-action{display:flex;align-items:center;gap:9px;height:48px;padding:0 18px;border-radius:11px;background:#0b1713;color:#fff;font:800 9px var(--head);white-space:nowrap;box-shadow:0 8px 18px rgba(8,24,17,.16);transition:.2s ease}.vd-search-action:hover{background:#0ca968;transform:translateY(-1px)}.vd-search-action i{font-size:8px}
.vd-hero-links{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:13px 0 25px}.vd-link-label{font:800 7px var(--mono);color:#8a9893;text-transform:uppercase;letter-spacing:.9px;margin-right:4px}.vd-hero-link{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #d5ddd8;border-radius:8px;background:#fff;color:#52645d;font:700 7px var(--mono);transition:.18s ease}.vd-hero-link:hover{color:#0b1713;border-color:#8bb7a5;transform:translateY(-1px);box-shadow:0 5px 12px rgba(24,44,36,.07)}.vd-link-live{color:#087c50;border-color:#a8d7c2;background:#eef9f3}.vd-link-live i{color:#0ca968}
.vd-hero-proof{display:flex;align-items:center;gap:18px}.vd-proof-item{display:flex;align-items:baseline;gap:7px}.vd-proof-item strong{font:800 13px var(--head);color:#172a23;letter-spacing:-.3px}.vd-proof-item span{font:700 6.5px var(--mono);color:#82908b;text-transform:uppercase;letter-spacing:.6px}.vd-proof-line{height:18px;width:1px;background:#ccd5d0}
.vd-hero-dashboard{position:relative;padding:17px;border:1px solid #cbd5cf;border-radius:18px;background:#fff;box-shadow:0 24px 55px rgba(24,44,36,.13);overflow:hidden}
.vd-hero-dashboard::before{content:"VALLEY DESK";position:absolute;right:-15px;top:55px;font:900 55px var(--head);letter-spacing:-4px;color:rgba(12,25,21,.035);transform:rotate(-90deg);transform-origin:center;pointer-events:none}
.vd-dash-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e5e9e6}.vd-dash-overline{font:800 6.5px var(--mono);color:#7a8d86;letter-spacing:1.3px}.vd-dash-top h2{font:800 16px var(--head);color:#13251f;margin:5px 0 0;letter-spacing:-.4px}.vd-live-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border-radius:7px;background:#edf9f3;border:1px solid #c4e6d5;color:#087d51;font:800 6.5px var(--mono);letter-spacing:.6px}.vd-live-badge i{width:5px;height:5px;border-radius:50%;background:#0ca968}
.vd-dash-feature{display:flex;align-items:center;gap:11px;padding:11px;border-radius:11px;background:#f6f8f5;border:1px solid #e3e8e4;margin-bottom:8px}.vd-feature-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#eaf7f0;border:1px solid #cbe8d8;color:#0b9d62;font-size:11px}.vd-feature-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.vd-feature-copy span{font:800 6px var(--mono);letter-spacing:1px;color:#82948c}.vd-feature-copy strong{font:800 8.5px var(--head);color:#1c3029}.vd-feature-arrow{color:#94a29d;font-size:8px}
.vd-category-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.vd-mini-card{display:flex;align-items:center;gap:8px;padding:9px;border-radius:10px;border:1px solid #e3e8e4;background:#fff;transition:.18s ease}.vd-mini-card:hover{transform:translateY(-2px);border-color:#a7cdbb;box-shadow:0 8px 18px rgba(24,44,36,.07)}.vd-mini-icon{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;color:var(--mini);background:color-mix(in srgb,var(--mini) 10%,white);border:1px solid color-mix(in srgb,var(--mini) 24%,white);font:800 6px var(--mono)}.vd-mini-card div{display:flex;flex-direction:column;gap:2px;min-width:0}.vd-mini-card b{font:800 7.5px var(--head);color:#25372f}.vd-mini-card small{font:600 6px var(--mono);color:#8a9893}.vd-dash-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #e6eae7;font:700 6.5px var(--mono);color:#83928c}.vd-dash-footer span i{color:#0ca968;margin-right:4px}.vd-dash-footer a{color:#526b61;font-weight:800}.vd-dash-footer a:hover{color:#0b9d62}
@media(max-width:900px){.vd-hero{padding:48px 18px 52px}.vd-hero-inner{grid-template-columns:1fr;gap:34px;max-width:720px}.vd-hero-copy{max-width:none}.vd-hero-copy h1{font-size:clamp(44px,8vw,64px)}.vd-hero-dashboard{max-width:590px;width:100%;margin:0 auto}}
@media(max-width:560px){.vd-hero{padding:31px 14px 38px}.vd-hero-inner{gap:27px}.vd-hero-kicker{font-size:6.2px;letter-spacing:.75px;margin-bottom:13px;gap:7px}.vd-kicker-dot{width:6px;height:6px;box-shadow:0 0 0 4px rgba(12,169,104,.10)}.vd-hero-copy h1{font-size:clamp(35px,11.5vw,49px);line-height:.98;letter-spacing:-2.6px;margin-bottom:14px}.vd-hero-copy h1 em{letter-spacing:-1.4px}.vd-hero-lead{font-size:9px;line-height:1.7;margin-bottom:17px}.vd-hero-search{height:54px;width:100%;padding:5px 5px 5px 8px;border-radius:13px}.vd-search-icon{width:27px;font-size:11px}.vd-hero-search .hero-search-input{font-size:8px;padding:0 4px}.vd-hero-search .hero-search-input::placeholder{font-size:8px}.vd-search-action{height:42px;padding:0 12px;border-radius:10px;font-size:7.5px;gap:6px}.vd-search-action i{font-size:7px}.vd-hero-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:11px 0 20px}.vd-link-label{grid-column:1/-1;margin:0 0 2px;font-size:6px}.vd-hero-link{justify-content:center;min-height:33px;padding:6px 5px;border-radius:8px;font-size:6.6px}.vd-hero-link i{font-size:7.5px}.vd-hero-proof{display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;gap:6px}.vd-proof-item{min-width:0;flex-direction:column;align-items:center;gap:3px;text-align:center}.vd-proof-item strong{font-size:10.5px;line-height:1}.vd-proof-item span{font-size:5.1px;line-height:1.2}.vd-proof-line{height:25px}.vd-hero-dashboard{padding:12px;border-radius:15px}.vd-dash-top{margin-bottom:10px;padding-bottom:10px}.vd-dash-overline{font-size:5.7px}.vd-dash-top h2{font-size:12.5px}.vd-live-badge{font-size:5.7px;padding:4px 6px}.vd-dash-feature{padding:9px;gap:8px;border-radius:10px}.vd-feature-icon{width:29px;height:29px;border-radius:8px;font-size:9px}.vd-feature-copy span{font-size:5.2px}.vd-feature-copy strong{font-size:7.4px}.vd-category-mini-grid{gap:5px}.vd-mini-card{padding:7px 6px;gap:6px;border-radius:9px}.vd-mini-icon{width:23px;height:23px}.vd-mini-card b{font-size:6.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vd-mini-card small{font-size:5.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vd-dash-footer{font-size:5.5px}.vd-hero-dashboard::before{font-size:42px;right:-20px}}
@media(max-width:380px){.vd-hero{padding-left:11px;padding-right:11px}.vd-hero-copy h1{font-size:34px;letter-spacing:-2px}.vd-hero-lead{font-size:9px}.vd-hero-search{height:50px}.vd-hero-search .hero-search-input,.vd-hero-search .hero-search-input::placeholder{font-size:7.5px}.vd-search-action{padding:0 9px}.vd-search-action span{font-size:7px}.vd-hero-link{font-size:6.2px}.vd-proof-item strong{font-size:9.5px}.vd-proof-item span{font-size:4.7px}.vd-hero-dashboard{padding:10px}}

/* PREMIUM HERO VISUAL OVERRIDE */
.vd-hero{padding:72px 28px 92px;background:radial-gradient(circle at 78% 35%,rgba(20,166,105,.12),transparent 28%),linear-gradient(135deg,#f7f8f4 0%,#eef2ed 52%,#e8eee9 100%);border-bottom:none}
.vd-hero::before{opacity:.24;background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.vd-hero::after{width:720px;height:720px;right:-300px;top:-320px;border-color:rgba(13,111,73,.11);box-shadow:0 0 0 90px rgba(13,111,73,.025),0 0 0 180px rgba(13,111,73,.018)}
.vd-hero-inner{max-width:1240px;grid-template-columns:minmax(0,1fr) minmax(390px,.72fr);gap:92px}
.vd-hero-copy{max-width:670px}
.vd-hero-kicker{font-size:7px;letter-spacing:1.6px;margin-bottom:17px;color:#5d7068}
.vd-kicker-dot{width:6px;height:6px}
.vd-hero-copy h1{font-size:clamp(42px,5vw,66px);line-height:1.02;letter-spacing:-3.5px;margin-bottom:16px;font-weight:750}
.vd-hero-copy h1 span{color:#078b58}
.vd-hero-lead{max-width:570px;font-size:11px;line-height:1.8;margin-bottom:22px;color:#71817b}
.vd-hero-lead strong{color:#30463e}
.vd-hero-search{height:56px;width:min(100%,590px);border-radius:14px;padding-left:14px;background:rgba(255,255,255,.76);border-color:rgba(125,145,135,.34);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(28,57,45,.10)}
.vd-hero-search .hero-search-input{font-size:9px}
.vd-search-action{height:44px;padding:0 16px;border-radius:10px;font-size:8px}
.vd-hero-links{gap:6px;margin:11px 0 21px}
.vd-link-label{font-size:6.2px}
.vd-hero-link{padding:6px 9px;font-size:6.5px;border-radius:7px;background:rgba(255,255,255,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vd-hero-proof{gap:16px}.vd-proof-item strong{font-size:12px}.vd-proof-item span{font-size:6px}
.vd-hero-visual{position:relative;min-height:390px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.vd-glass-orbit{position:absolute;width:360px;height:360px;border:1px solid rgba(8,116,75,.13);border-radius:50%;box-shadow:0 0 0 55px rgba(8,116,75,.025),0 0 0 110px rgba(8,116,75,.018);transform:rotate(-18deg)}
.vd-glass-orbit::before,.vd-glass-orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(8,116,75,.10)}.vd-glass-orbit::before{inset:35px 80px;transform:rotate(55deg)}.vd-glass-orbit::after{inset:80px 35px;transform:rotate(-55deg)}
.vd-glass-card{position:relative;width:min(360px,82%);min-height:215px;padding:24px;border:1px solid rgba(255,255,255,.72);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(240,247,242,.40));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 30px 70px rgba(28,57,45,.16),inset 0 1px 0 rgba(255,255,255,.85);z-index:3;transform:rotate(-3deg)}
.vd-glass-brand{display:flex;align-items:center;gap:9px;font:800 7px var(--mono);letter-spacing:1.4px;color:#527066}.vd-glass-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#0b8f5b;color:#fff;font:800 8px var(--head);box-shadow:0 8px 18px rgba(11,143,91,.24)}
.vd-glass-title{margin-top:48px;max-width:270px;font:700 25px/1.05 var(--head);letter-spacing:-1.5px;color:#11231c}.vd-glass-title em{font-family:var(--serif);font-weight:600;color:#0a9360}
.vd-glass-rule{width:100%;height:1px;background:rgba(51,82,70,.13);margin:25px 0 12px}.vd-glass-meta{display:flex;gap:12px;flex-wrap:wrap;font:800 5.5px var(--mono);letter-spacing:.8px;color:#6b8178}.vd-float-card{position:absolute;display:flex;align-items:center;gap:9px;min-width:145px;padding:10px 11px;border:1px solid rgba(255,255,255,.75);border-radius:12px;background:rgba(255,255,255,.64);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 34px rgba(30,58,47,.12);z-index:4;transition:transform .22s ease,box-shadow .22s ease}.vd-float-card:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 22px 42px rgba(30,58,47,.17)}
.vd-float-one{left:0;top:48px}.vd-float-two{right:-4px;top:126px}.vd-float-three{left:36px;bottom:47px}.vd-float-num{font:800 6px var(--mono);color:#0a9560}.vd-float-card span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}.vd-float-card b{font:800 7.5px var(--head);color:#1c3329}.vd-float-card small{font:600 5.8px var(--mono);color:#80928b}.vd-float-card i{margin-left:auto;font-size:7px;color:#8ba198}.vd-visual-caption{position:absolute;right:0;bottom:5px;display:flex;align-items:center;gap:6px;font:800 5.5px var(--mono);letter-spacing:1px;color:#83938d}.vd-visual-caption span{width:22px;height:1px;background:#0a9360}
[data-theme="dark"] .vd-hero{background:radial-gradient(circle at 78% 35%,rgba(20,166,105,.13),transparent 30%),linear-gradient(135deg,#17171a,#1d1d21 55%,#1c1c20)}
[data-theme="dark"] .vd-glass-card{background:linear-gradient(145deg,rgba(46,46,50,.72),rgba(28,28,32,.48));border-color:rgba(255,255,255,.10);box-shadow:0 30px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}
[data-theme="dark"] .vd-glass-title{color:#edf5f1}.vd-glass-brand{color:#91a89f}.vd-glass-meta{color:#8ca199}.vd-float-card{background:rgba(28,28,32,.68);border-color:rgba(255,255,255,.09)}.vd-float-card b{color:#e4eee9}.vd-float-card small{color:#899c94}.vd-visual-caption{color:#71857c}
@media(max-width:900px){.vd-hero{padding:56px 22px 62px}.vd-hero-inner{grid-template-columns:1fr;gap:58px;max-width:700px}.vd-hero-copy{max-width:620px}.vd-hero-visual{min-height:360px;max-width:560px;width:100%;margin:auto}.vd-float-one{left:1%}.vd-float-two{right:0}.vd-float-three{left:8%}}
@media(max-width:560px){.vd-hero{padding:36px 15px 45px}.vd-hero-inner{gap:42px}.vd-hero-kicker{font-size:5.8px;letter-spacing:1px;margin-bottom:12px}.vd-hero-copy h1{font-size:clamp(31px,9.8vw,42px);line-height:1.02;letter-spacing:-2px;margin-bottom:12px}.vd-hero-lead{font-size:7.7px;line-height:1.75;margin-bottom:15px;max-width:100%}.vd-hero-search{height:51px;padding-left:7px;border-radius:12px}.vd-search-icon{width:24px;font-size:10px}.vd-hero-search .hero-search-input{font-size:7.5px}.vd-hero-search .hero-search-input::placeholder{font-size:7.5px}.vd-search-action{height:39px;padding:0 11px;border-radius:9px;font-size:7px}.vd-hero-links{margin:9px 0 17px;gap:5px}.vd-link-label{font-size:5.5px}.vd-hero-link{min-height:30px;padding:5px 7px;font-size:6px}.vd-hero-proof{gap:10px}.vd-proof-item strong{font-size:10px}.vd-proof-item span{font-size:5px}.vd-hero-visual{min-height:285px}.vd-glass-orbit{width:255px;height:255px}.vd-glass-card{width:260px;min-height:165px;padding:17px;border-radius:19px}.vd-glass-mark{width:23px;height:23px;border-radius:7px;font-size:7px}.vd-glass-brand{font-size:5.5px;letter-spacing:1px}.vd-glass-title{margin-top:31px;font-size:18px;letter-spacing:-.9px;max-width:205px}.vd-glass-rule{margin:18px 0 9px}.vd-glass-meta{font-size:4.4px;gap:7px}.vd-float-card{min-width:104px;padding:7px 8px;gap:6px;border-radius:9px}.vd-float-one{left:0;top:20px}.vd-float-two{right:0;top:83px}.vd-float-three{left:5px;bottom:16px}.vd-float-num{font-size:5px}.vd-float-card b{font-size:6px}.vd-float-card small{font-size:4.7px}.vd-float-card i{font-size:5.5px}.vd-visual-caption{right:3px;bottom:-1px;font-size:4.5px}}
@media(max-width:380px){.vd-hero{padding-left:12px;padding-right:12px}.vd-hero-copy h1{font-size:30px}.vd-hero-lead{font-size:9px}.vd-hero-search{height:48px}.vd-search-action{padding:0 9px}.vd-glass-card{width:235px;min-height:150px}.vd-glass-title{font-size:16px}.vd-glass-orbit{width:230px;height:230px}.vd-float-card{min-width:98px;padding:6px}.vd-float-two{right:-2px}}
@media(prefers-reduced-motion:reduce){.vd-hero *{transition:none!important;animation:none!important}}
[data-theme="dark"] .vd-hero{color:#f3f7f4;border-color:#3a3a40}.data-theme-dark .vd-hero{} [data-theme="dark"] .vd-hero::before{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)} [data-theme="dark"] .vd-hero-copy h1{color:#f2f7f4}[data-theme="dark"] .vd-hero-copy h1 em{color:#a7bdb4}[data-theme="dark"] .vd-hero-lead{color:#9eb1a9}[data-theme="dark"] .vd-hero-lead strong{color:#dbe9e3}[data-theme="dark"] .vd-hero-search,[data-theme="dark"] .vd-hero-link,[data-theme="dark"] .vd-mini-card,[data-theme="dark"] .vd-hero-dashboard{background:#222227;border-color:#5a5c63}[data-theme="dark"] .vd-hero-search .hero-search-input{color:#fff}[data-theme="dark"] .vd-dash-top h2,[data-theme="dark"] .vd-mini-card b{color:#e2ece7}[data-theme="dark"] .vd-dash-feature{background:#1c1c20;border-color:#3a3a40}[data-theme="dark"] .vd-hero-dashboard::before{color:rgba(255,255,255,.025)}

/* HERO → WAVE DIVIDER — blends the hero into the section below using the
   page's own background token, so it always matches (light + dark) */
.vd-hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;line-height:0;pointer-events:none;z-index:1}
.vd-hero-wave svg{display:block;width:100%;height:64px}
.vd-hero-wave .vd-wave-accent{fill:rgba(12,169,104,.10)}
.vd-hero-wave .vd-wave-base{fill:var(--bg0)}
[data-theme="dark"] .vd-hero-wave .vd-wave-accent{fill:rgba(31,197,127,.08)}
@media(max-width:900px){.vd-hero-wave svg{height:46px}}
@media(max-width:600px){.vd-hero-wave svg{height:32px}}

/* RESPONSIVE MOBILE LAYOUT — preserved from working mobile build */
@media(max-width:900px){
  .vd-hero{padding:34px 18px 58px}
  .vd-hero-inner{grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr);gap:30px;max-width:820px}
  .vd-hero-copy h1{font-size:clamp(34px,5.6vw,48px);letter-spacing:-2.5px}
  .vd-hero-lead{font-size:10px;line-height:1.68;margin-bottom:15px}
  .vd-hero-search{height:48px}
  .vd-search-action{height:38px;padding:0 11px;font-size:7px}
  .vd-hero-visual{min-height:260px}
  .vd-glass-orbit{width:250px;height:250px}
  .vd-glass-card{width:250px;min-height:160px;padding:16px;border-radius:17px}
  .vd-glass-title{margin-top:29px;font-size:18px}
  .vd-float-card{min-width:92px;padding:6px 7px}
  .vd-float-one{left:-3px;top:20px}.vd-float-two{right:-2px;top:78px}.vd-float-three{left:6px;bottom:18px}
}
@media(max-width:600px){
  .vd-hero{padding:15px 8px 30px}
  .vd-hero-inner{grid-template-columns:minmax(0,1.32fr) minmax(125px,.68fr);gap:12px;align-items:center}
  .vd-hero-kicker{font-size:7px;letter-spacing:.85px;margin-bottom:9px;gap:5px}.vd-kicker-dot{width:5px;height:5px;box-shadow:0 0 0 3px rgba(12,169,104,.09)}
  .vd-hero-copy h1{font-size:clamp(25px,7.2vw,30px);line-height:1.01;letter-spacing:-1.8px;margin-bottom:9px}
  .vd-hero-copy h1 em{letter-spacing:-1px}
  .vd-hero-lead{font-size:6.4px;line-height:1.65;margin-bottom:11px;max-width:100%}
  .vd-hero-search{height:40px;width:100%;padding:3px 3px 3px 5px;border-radius:10px}
  .vd-search-icon{width:19px;font-size:8px}.vd-hero-search .hero-search-input{font-size:6.2px;padding:0 3px}.vd-hero-search .hero-search-input::placeholder{font-size:6.2px}
  .vd-search-action{height:34px;width:34px;padding:0;justify-content:center;border-radius:8px;font-size:0;gap:0}.vd-search-action span{display:none}.vd-search-action i{font-size:7px}
  .vd-hero-visual{min-height:205px;overflow:visible}
  .vd-glass-orbit{width:190px;height:190px}
  .vd-glass-card{width:190px;min-height:125px;padding:12px;border-radius:14px}
  .vd-glass-mark{width:19px;height:19px;border-radius:6px;font-size:6px}.vd-glass-brand{font-size:4.6px;letter-spacing:.8px}
  .vd-glass-title{margin-top:21px;font-size:13px;letter-spacing:-.6px;max-width:155px}.vd-glass-rule{margin:12px 0 7px}.vd-glass-meta{font-size:3.5px;gap:5px}
  .vd-float-card{min-width:73px;padding:5px 6px;gap:4px;border-radius:7px}.vd-float-num{font-size:4px}.vd-float-card b{font-size:4.8px}.vd-float-card small{font-size:3.8px}.vd-float-card i{font-size:4.5px}
  .vd-float-one{left:-5px;top:8px}.vd-float-two{right:-5px;top:57px}.vd-float-three{left:-2px;bottom:8px}.vd-visual-caption{display:none}
}
@media(max-width:390px){
  .vd-hero{padding:21px 9px 34px}.vd-hero-inner{gap:8px}
  .vd-hero-copy h1{font-size:25px;letter-spacing:-1.5px}.vd-hero-lead{font-size:8px}
  .vd-hero-search{height:37px}.vd-hero-search .hero-search-input,.vd-hero-search .hero-search-input::placeholder{font-size:5.8px}.vd-search-action{height:31px;width:31px}
  .vd-hero-visual{min-height:185px}.vd-glass-orbit{width:170px;height:170px}.vd-glass-card{width:170px;min-height:112px;padding:10px}.vd-glass-title{font-size:11.5px;margin-top:18px}.vd-glass-meta{font-size:3.2px}
  .vd-float-card{min-width:65px}.vd-float-one{left:-7px}.vd-float-two{right:-7px}
}
@media(orientation:landscape) and (max-width:900px){
  .vd-hero{padding-top:22px;padding-bottom:24px}
  .vd-hero-inner{grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);gap:24px}
  .vd-hero-visual{min-height:235px}
}
@media (max-width:900px) and (orientation:landscape) and (max-height:600px){
  .vd-hero{
    padding:24px 18px 26px;
    min-height:0;
  }
  .vd-hero-inner{
    grid-template-columns:minmax(0,1.12fr) minmax(230px,.78fr);
    gap:28px;
    max-width:960px;
    align-items:center;
  }
  .vd-hero-copy{max-width:none}
  .vd-hero-kicker{
    font-size:5.5px;
    letter-spacing:1px;
    margin-bottom:9px;
    gap:6px;
  }
  .vd-kicker-dot{width:5px;height:5px;box-shadow:0 0 0 3px rgba(12,169,104,.09)}
  .vd-hero-copy h1{
    font-size:clamp(29px,5.6vw,43px);
    line-height:.98;
    letter-spacing:-2.2px;
    margin-bottom:9px;
    max-width:510px;
  }
  .vd-hero-copy h1 em{letter-spacing:-1.2px}
  .vd-hero-lead{
    font-size:7.2px;
    line-height:1.55;
    margin-bottom:11px;
    max-width:470px;
  }
  .vd-hero-search{
    height:44px;
    width:min(100%,500px);
    padding:4px 4px 4px 7px;
    border-radius:11px;
    box-shadow:0 12px 28px rgba(28,57,45,.09);
  }
  .vd-search-icon{width:22px;font-size:9px}
  .vd-hero-search .hero-search-input{
    font-size:7px;
    padding:0 3px;
  }
  .vd-hero-search .hero-search-input::placeholder{font-size:7px}
  .vd-search-action{
    height:34px;
    padding:0 10px;
    border-radius:8px;
    font-size:6.8px;
    gap:5px;
  }
  .vd-search-action i{font-size:6px}

  .vd-hero-visual{
    min-height:250px;
    width:100%;
    max-width:390px;
    margin:0 auto;
    transform:translateY(0);
  }
  .vd-glass-orbit{
    width:235px;
    height:235px;
    opacity:.65;
    box-shadow:0 0 0 34px rgba(8,116,75,.022),0 0 0 68px rgba(8,116,75,.014);
  }
  .vd-glass-orbit::before{inset:24px 53px}
  .vd-glass-orbit::after{inset:53px 24px}
  .vd-glass-card{
    width:min(270px,74%);
    min-height:158px;
    padding:17px;
    border-radius:18px;
    backdrop-filter:blur(20px) saturate(125%);
    -webkit-backdrop-filter:blur(20px) saturate(125%);
    box-shadow:0 20px 42px rgba(28,57,45,.13),inset 0 1px 0 rgba(255,255,255,.78);
  }
  .vd-glass-brand{font-size:5.8px;gap:6px;letter-spacing:1px}
  .vd-glass-mark{width:22px;height:22px;border-radius:7px;font-size:6.5px}
  .vd-glass-title{
    margin-top:30px;
    max-width:205px;
    font-size:18px;
    line-height:1.03;
    letter-spacing:-1px;
  }
  .vd-glass-rule{margin:16px 0 8px}
  .vd-glass-meta{gap:7px;font-size:4.5px;letter-spacing:.55px}
  .vd-float-card{
    min-width:100px;
    padding:7px 8px;
    gap:6px;
    border-radius:9px;
    backdrop-filter:blur(12px) saturate(120%);
    -webkit-backdrop-filter:blur(12px) saturate(120%);
    box-shadow:0 10px 22px rgba(30,58,47,.09);
  }
  .vd-float-one{left:0;top:22px}
  .vd-float-two{right:0;top:83px}
  .vd-float-three{left:5%;bottom:24px}
  .vd-float-num{font-size:4.8px}
  .vd-float-card b{font-size:6px}
  .vd-float-card small{font-size:4.5px}
  .vd-float-card i{font-size:5.5px}
  .vd-visual-caption{right:2px;bottom:0;font-size:4.4px;letter-spacing:.7px}
  .vd-visual-caption span{width:14px}
}
@media (max-width:700px) and (orientation:landscape) and (max-height:450px){
  .vd-hero{padding:18px 14px 20px}
  .vd-hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(205px,.72fr);gap:18px}
  .vd-hero-kicker{margin-bottom:7px;font-size:5px}
  .vd-hero-copy h1{font-size:clamp(25px,5.5vw,35px);letter-spacing:-1.7px;margin-bottom:7px}
  .vd-hero-lead{font-size:6.5px;line-height:1.45;margin-bottom:8px}
  .vd-hero-search{height:40px;border-radius:10px}
  .vd-search-action{height:31px;padding:0 8px;font-size:6.2px}
  .vd-hero-visual{min-height:205px}
  .vd-glass-orbit{width:190px;height:190px}
  .vd-glass-card{width:220px;min-height:132px;padding:13px;border-radius:15px}
  .vd-glass-brand{font-size:5px}
  .vd-glass-mark{width:19px;height:19px;font-size:5.5px}
  .vd-glass-title{margin-top:23px;font-size:15px;letter-spacing:-.8px}
  .vd-glass-rule{margin:11px 0 6px}
  .vd-glass-meta{font-size:4px;gap:5px}
  .vd-float-card{min-width:86px;padding:6px;border-radius:8px}
  .vd-float-one{top:14px}.vd-float-two{top:68px}.vd-float-three{bottom:12px}
  .vd-float-card b{font-size:5.5px}.vd-float-card small{font-size:4px}
  .vd-visual-caption{display:none}
}

/* ===================================================================
   TOOL CARDS — corner date, compact actions, solid (no glass)
   (notification / exam-date / admit-card / result cards + home feed)
=================================================================== */

/* — Date moves to the top-right corner, kept small — */
.tc-name-wrap{flex:1 1 240px;min-width:0}
.tc-top-right{flex-direction:column;align-items:flex-end;gap:5px;margin-left:auto}
.tc-top-right-row{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.tc-top-right .tc-dates{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.tool-card .tc-date{font-size:7px;font-weight:700;line-height:1.5;padding:2px 7px;border-radius:20px;gap:3px;letter-spacing:.3px;white-space:nowrap}
.tool-card .tc-date i{font-size:7px}
.tc-dates-foot .tc-date{border-radius:20px}

/* — Smaller Apply / Notification / Official Website buttons — */
.tool-card:not(.tool-card-wide) .tc-actions{gap:5px}
.tool-card:not(.tool-card-wide) .tc-btn{font-size:7.5px;padding:4px 9px;min-height:23px;gap:4px;border-radius:6px;letter-spacing:.2px}
.tool-card:not(.tool-card-wide) .tc-btn i{font-size:7.5px}

/* Buttons inside the cards use the plain .tc-btn-* styles above (solid, no glass). */

.ambient-blob{opacity:.5}
[data-theme="dark"] .ambient-blob{opacity:.38}
.ambient-blob4{opacity:.4}

/* keep the top-right group tidy on phones */
@media(max-width:480px){
  .tc-top-right{width:100%;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px}
  .tc-top-right .tc-dates{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center}
}

/* Home: the "Check Your Result Instantly" banner wrapper now uses the
   same 12px side padding (5px on phones) as the category grid above it. */
.result-cta-wrap{margin-top:10px;margin-bottom:0}
.tools-section:has(+ .result-cta-wrap){padding-bottom:14px}
@media(max-width:640px){.result-cta-wrap{margin-top:6px}}

.tc-top-right .tc-dates:empty{display:none}

/* ==========================================================================
   THEME — HERO PALETTE
   One background and one colour scheme for the whole site, lifted from the
   homepage hero: paper / green-black base, faint grid, soft green glow.
   The page background is painted once on a fixed layer, and the hero
   sections are transparent so they sit on it seamlessly (no seams, no wave
   cut-outs). Category pages keep their own accent colour on buttons/icons.
   ========================================================================== */
html{background:var(--bg0)}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 78% 35%,var(--page-glow),transparent 28%),
    linear-gradient(var(--page-grid) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,var(--page-grid) 1px,transparent 1px) 0 0/44px 44px,
    var(--page-base)}
.ambient-blobs{display:none}
.vd-hero,[data-theme="dark"] .vd-hero{background:transparent}
.vd-hero::before{display:none}
.vd-hero-wave,.cat-hero-wave{display:none}

/* Header icon buttons (menu, dark mode, notifications): slightly wider than tall,
   with squircle corners. Browsers without corner-shape fall back to a smooth radius. */
.icon-btn{width:32px;height:27px;border-radius:10px}
@supports (corner-shape:squircle){.icon-btn{corner-shape:squircle;border-radius:15px}}

/* Topbar clock: day, date and time each get their own colour */
.tb-day{color:#7dffc0;font-weight:800}
.tb-dt{color:#fff}
.tb-time{color:#ffd58a;font-weight:700;font-variant-numeric:tabular-nums}

/* Logo tile: light mint background */
.logo-box{background:linear-gradient(145deg,#f4fcf8,#d3efe1);border-color:rgba(12,169,104,.35)}


/* Labelled header buttons (dark mode toggle + notifications) */
.icon-btn.has-label{width:auto;padding:0 11px;gap:6px}
.ib-label{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.4px;white-space:nowrap;line-height:1}
@media(max-width:559px){.icon-btn.has-label{padding:0 8px;gap:4px}.ib-label{font-size:8px;letter-spacing:.2px}}
@media(max-width:360px){.icon-btn.has-label{padding:0 6px;gap:3px}.ib-label{font-size:7.2px;letter-spacing:0}.mast-w{gap:6px}.logo-main{font-size:12px}}

/* Icons inside the labelled buttons are inline SVG: always visible, never shrink,
   independent of the icon font loading. */
.icon-btn .ib-ico{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.has-label{flex-shrink:0}


/* Montserrat — applied to tool cards (notifications/admit cards/results/exam
   dates) and their data, plus the mobile hamburger menu + bottom mobile nav,
   per request. Scoped to the card/menu containers so it inherits down to all
   text inside without touching icon fonts (Font Awesome sets its own
   font-family directly on <i> elements, so it is unaffected). */
.tool-card{font-family:var(--card)}
.offcanvas{font-family:var(--card)}
.mobile-nav{font-family:var(--card)}

/* Tighter gap between the homepage hero and the category grid below it —
   only touches the hero's bottom padding (its own internal/top spacing is
   untouched) plus the grid section's top padding, placed last so it wins
   over the hero's earlier responsive padding overrides above. */
.vd-hero{padding-bottom:44px}
@media(max-width:900px){.vd-hero{padding-bottom:34px}}
@media(max-width:600px){.vd-hero{padding-bottom:22px}}
@media(max-width:390px){.vd-hero{padding-bottom:18px}}
@media (max-width:900px) and (orientation:landscape) and (max-height:600px){.vd-hero{padding-bottom:16px}}
@media (max-width:700px) and (orientation:landscape) and (max-height:450px){.vd-hero{padding-bottom:12px}}