@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root{--ink:#14233c;--muted:#64748b;--blue:#2563eb;--line:#e5eaf1;--bg:#f8fafc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font:15px/1.6 'DM Sans',system-ui,sans-serif}button,input{font:inherit}a{text-decoration:none;color:inherit}.container{max-width:1180px;margin:auto;padding:0 24px}.topbar{height:78px;background:white;border-bottom:1px solid #edf0f5;position:sticky;top:0;z-index:20}.navinner{height:100%;display:flex;align-items:center;gap:35px}.brand{display:flex;align-items:center;gap:15px;min-width:230px}.brand img{width:143px;max-height:48px;object-fit:contain}.brand-sep{height:26px;width:1px;background:#d9e1ec}.brand-label{font:800 19px 'Plus Jakarta Sans',sans-serif;color:#1e40af}.topbar nav{display:flex;gap:32px;margin-left:auto}.topbar nav a{font-weight:700;font-size:13px;color:#506078}.topbar nav a:hover{color:var(--blue)}.navcta{background:#1e4fd5;color:white;border-radius:10px;padding:10px 17px;font-weight:700;font-size:13px;white-space:nowrap}.navcta span{margin-left:6px}.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f5f9ff 0%,#fff 50%,#f0f5ff 100%);border-bottom:1px solid #eef2f8}.hero-inner{text-align:center;position:relative;z-index:1;padding-top:86px;padding-bottom:86px}.eyebrow,.section-kicker{font-size:11px;font-weight:800;letter-spacing:2px;color:#3266d7}.eyebrow{background:#e9f0ff;padding:9px 15px;border-radius:50px}.spark{color:#3869df}.hero h1{font:800 clamp(36px,5vw,60px)/1.18 'Plus Jakarta Sans',sans-serif;letter-spacing:-2.8px;margin:27px 0 16px}.hero h1 span{color:#2861e8}.hero-sub{max-width:620px;margin:0 auto;color:#61718b;font-size:17px;line-height:1.8}.searchbox{margin:32px auto 18px;max-width:600px;display:flex;align-items:center;gap:13px;background:white;border:1px solid #dce5f4;border-radius:14px;box-shadow:0 12px 35px #2448a514;padding:15px 18px}.searchbox:focus-within{border-color:#8fb0ff;box-shadow:0 0 0 4px #dce9ff}.searchbox svg{width:21px;height:21px;color:#7890b0;flex-shrink:0}.searchbox input{border:0;outline:0;width:100%;font-size:15px;color:#1f2937;background:transparent}.searchbox kbd{border:1px solid #e0e6ef;border-radius:5px;padding:1px 7px;color:#94a3b8}.hero-notes{display:flex;justify-content:center;gap:27px;flex-wrap:wrap;color:#657891;font-size:12px;font-weight:700}.hero-notes span::first-letter{color:#20a879}.hero-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:#cbdfff55;filter:blur(75px);right:-260px;top:-200px}.tools-section{background:var(--bg);padding:35px 0 40px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:27px}.section-head h2,.benefit-heading h2,.faq-inner h2{font:800 clamp(25px,3vw,34px)/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:-1px;margin:0}.section-head p,.benefit-heading p,.faq-inner>div>p{color:var(--muted);margin:0}.tool-count{font-size:13px;color:#718096;background:white;border:1px solid var(--line);border-radius:9px;padding:8px 12px;white-space:nowrap}.tool-count strong{color:var(--ink)}.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}.filter{border:1px solid #dfe6f0;background:white;border-radius:9px;padding:9px 17px;color:#5d6c83;cursor:pointer;font-size:13px;font-weight:700}.filter:hover{border-color:#9bb7ed}.filter.active{background:#245bde;border-color:#245bde;color:white}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.tool-card{background:white;border:1px solid #e6ebf2;border-radius:15px;padding:25px;display:flex;flex-direction:column;min-height:240px;transition:transform .2s,box-shadow .2s,border-color .2s}.tool-card:hover{transform:translateY(-4px);box-shadow:0 14px 35px #1b366112;border-color:#cbdcf8}.tool-card[hidden]{display:none}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}.tool-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:13px;background:#eaf1ff;color:#3268dc;font-size:25px;font-weight:800;letter-spacing:-2px}.tool-card:nth-child(4n+2) .tool-icon{background:#f0eafe;color:#7856d8}.tool-card:nth-child(4n+3) .tool-icon{background:#e5f8f2;color:#12996f}.tool-card:nth-child(4n+4) .tool-icon{background:#fff2e8;color:#e18b34}.status{border-radius:30px;padding:4px 9px;font-size:10px;font-weight:800;white-space:nowrap}.status.ready{background:#e4f8ee;color:#148451}.status.soon{background:#f1f4f8;color:#8794a7}.tool-card h3{font:800 17px 'Plus Jakarta Sans',sans-serif;margin:21px 0 7px}.tool-card p{color:#728198;font-size:13px;line-height:1.8;margin:0 0 25px;flex:1}.card-bottom{border-top:1px solid #eff2f6;padding-top:16px}.category-tag{font-size:11px;font-weight:700;color:#8b97a9}.card-link,.disabled-link{font-size:12px;font-weight:800;color:#245bde}.card-link span{margin-left:5px}.disabled-link{color:#a1acbb}.empty-state{text-align:center;padding:65px 10px}.empty-state[hidden]{display:none}.empty-state div{font-size:45px;color:#9eb1ce}.empty-state h3{margin:0}.empty-state p{color:var(--muted)}.empty-state button{background:#245bde;color:white;border:0;padding:10px 20px;border-radius:8px;cursor:pointer}.benefits{padding:40px 0;background:white}.benefit-heading{text-align:center;margin-bottom:20px}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.benefit-grid>div{text-align:center;padding:18px 24px}.benefit-icon{display:inline-grid;place-items:center;background:#eef4ff;width:58px;height:58px;border-radius:17px;font-size:26px}.benefit-grid h3{font:800 17px 'Plus Jakarta Sans',sans-serif;margin:17px 0 8px}.benefit-grid p{color:var(--muted);font-size:13px;line-height:120%;margin:0}.faq-section{background:#f7f9fc;padding:77px 0}.faq-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:70px}.faq-list details{background:white;border:1px solid #e5eaf1;border-radius:11px;margin-bottom:10px;padding:17px 20px}.faq-list summary{font-weight:800;font-size:14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:15px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';font-size:21px;line-height:1;color:#4871d3}.faq-list details[open] summary:after{content:'−'}.faq-list details p{font-size:13px;color:var(--muted);margin:12px 0 0}.footer{background:#15243c;color:#e2e8f0;padding:33px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.footer strong{font:800 19px 'Plus Jakarta Sans',sans-serif}.footer strong span{color:#8db4ff}.footer p,.footer small{font-size:12px;color:#9cabc0;margin:4px 0}.footer-inner>div:nth-child(2){display:flex;gap:20px;font-size:13px}.footer a:hover{color:white}@media(max-width:950px){.topbar nav{display:none}.navcta{margin-left:auto}.tool-grid{grid-template-columns:repeat(2,1fr)}.faq-inner{gap:30px}}@media(max-width:620px){.container{padding:0 17px}.topbar{height:68px}.brand{min-width:0;gap:9px}.brand img{width:112px}.brand-label{font-size:16px}.navcta{padding:9px 12px;font-size:11px}.hero-inner{padding:67px 0}.hero h1{letter-spacing:-1.7px}.hero-sub{font-size:14px}.hero-notes{gap:10px;font-size:11px}.tools-section,.benefits,.faq-section{padding:55px 0}.tool-grid,.benefit-grid,.faq-inner{grid-template-columns:1fr}.section-head{align-items:start}.tool-card{min-height:215px}.footer-inner{flex-direction:column;align-items:flex-start}.filter-row{gap:7px}.filter{padding:8px 12px;font-size:12px}}

/* Compact, illustrated tools hero */
.hero{background:linear-gradient(112deg,#f2f7ff 0%,#f8fbff 52%,#e8f1ff 100%)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:30px;text-align:left;padding-top:42px;padding-bottom:42px;min-height:340px}
.hero-copy{min-width:0}.hero h1{font-size:clamp(34px,4.1vw,52px);line-height:1.1;margin:17px 0 13px;letter-spacing:-2px}
.hero-sub{font-size:15px;line-height:1.65;max-width:510px;margin:0}.eyebrow{font-size:10px;padding:7px 12px;letter-spacing:1.5px}
.hero .searchbox{margin:21px 0 13px;max-width:490px;padding:12px 15px;box-shadow:0 10px 26px #2448a510}
.hero-notes{justify-content:flex-start;gap:17px;font-size:11px}.hero-art{display:flex;align-items:center;justify-content:center;min-width:0}.hero-art img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;filter:drop-shadow(0 16px 20px #2854a017)}
@media(max-width:760px){.hero-inner{grid-template-columns:1fr;gap:8px;padding-top:38px;padding-bottom:28px;min-height:0;text-align:center}.hero h1{margin:16px 0 12px}.hero-sub{margin:auto}.hero .searchbox{margin:20px auto 12px}.hero-notes{justify-content:center}.hero-art img{max-height:220px}}
@media(max-width:420px){.hero-art img{max-height:175px}.hero-inner{padding-top:31px}.hero h1{font-size:35px}}

/* Hero refinement: compact height and editorial left column */
.hero{background:radial-gradient(ellipse at 82% 20%,#dceaff 0%,transparent 48%),linear-gradient(110deg,#f9fbff,#eff5ff);}
.hero-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;min-height:0;padding-top:19px;padding-bottom:19px;}
.hero-copy{padding:3px 0 4px;}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:1.15px;color:#315fc3;background:#fff;border:1px solid #dfeaff;padding:6px 11px;border-radius:100px;box-shadow:0 3px 12px #315fc30a;}
.hero-kicker-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #dcfce7;}
.hero h1{font-size:clamp(30px,3.35vw,44px);letter-spacing:-1.7px;line-height:1.13;margin:12px 0 9px;}
.hero h1 span{color:#245bde;}
.hero-sub{font-size:13.5px;line-height:1.55;max-width:420px;color:#60718b;}
.hero .searchbox{margin:15px 0 11px;padding:10px 12px;max-width:450px;border-radius:11px;}
.hero .searchbox input{font-size:13px;}
.hero-notes{gap:13px;font-size:10px;color:#64748b;}
.hero-art img{max-height:255px;width:100%;object-fit:contain;filter:drop-shadow(0 8px 12px #1f3f7410);}
@media(max-width:760px){.hero-inner{grid-template-columns:1fr;gap:4px;padding-top:24px;padding-bottom:16px;text-align:center}.hero-copy{padding:0}.hero h1{font-size:clamp(30px,7vw,39px)}.hero-sub{margin:auto}.hero .searchbox{margin:15px auto 10px}.hero-notes{justify-content:center}.hero-art img{max-height:185px}.hero-kicker{font-size:9px}}
@media(max-width:420px){.hero-inner{padding-top:20px;padding-bottom:12px}.hero-art img{max-height:150px}.hero h1{font-size:30px}.hero-notes{gap:9px}}


/* 2026 homepage component styles matching the actual PHP markup */
:root{--blue:#2563eb}
.topbar{height:auto;min-height:78px;background:#fff}
.navinner{min-height:78px;gap:24px;flex-wrap:nowrap}
.brand{min-width:0;flex-shrink:0}
.topbar nav{align-items:center;gap:23px;min-width:0}
.topbar nav>a{white-space:nowrap}
.navcta{flex-shrink:0}
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{border:0;background:transparent;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font:700 13px 'DM Sans',sans-serif;color:#506078;padding:10px 0;white-space:nowrap}
.nav-dropdown-toggle:hover{color:#245bde}
.nav-chevron{transition:transform .2s}
.nav-dropdown.is-open .nav-chevron{transform:rotate(180deg)}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 9px);right:-100px;width:345px;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;background:white;border:1px solid #e1e9f3;border-radius:14px;padding:12px;box-shadow:0 22px 55px #142a4b30;z-index:1000;color:#24344b}
.nav-dropdown.is-open .nav-dropdown-menu{display:block}
.dropdown-title{padding:8px 9px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:800;font-size:13px}
.dropdown-title span{font-size:11px;color:#8a98ac}
.dropdown-items{display:grid;gap:2px}
.dropdown-item a,.dropdown-unavailable{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;color:#41516a}
.dropdown-item a:hover{background:#edf4ff;color:#245bde}
.dropdown-dot{display:block;width:7px;height:7px;border-radius:50%;background:#24b47e;flex:none}
.dropdown-unavailable .dropdown-dot{background:#a7b3c5}
.dropdown-arrow,.dropdown-unavailable small{margin-left:auto}
.dropdown-unavailable small{color:#94a3b8}
.dropdown-footer{display:block;padding:11px 9px 3px;border-top:1px solid #e6edf7;margin-top:9px;color:#245bde;font-size:12px;font-weight:800}
.hero{background:linear-gradient(120deg,#eff6ff 0%,#f8fbff 46%,#edf3ff 100%);overflow:hidden;position:relative}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:center;text-align:left;padding-top:55px;padding-bottom:55px;min-height:390px}
.hero-copy{min-width:0}
.hero-kicker{display:inline-flex;align-items:center;gap:9px;border-radius:40px;padding:7px 13px;background:#e0ecff;color:#245bde;font-size:11px;font-weight:800;letter-spacing:1px}
.hero-kicker-dot{height:8px;width:8px;border-radius:50%;background:#21b780}
.hero h1{margin:20px 0 16px;font-size:clamp(35px,4.2vw,54px);letter-spacing:-2px}
.hero-sub{margin:0;max-width:600px}
.hero .searchbox{margin:25px 0 17px;max-width:590px}
.hero-notes{justify-content:flex-start}
.hero-art{display:flex;justify-content:center;align-items:center;min-width:0}
.hero-art img{display:block;max-width:100%;max-height:310px;object-fit:contain;filter:drop-shadow(0 12px 16px #1f4a9b16)}
.collection-intro{background:linear-gradient(115deg,#eaf2ff,#f5f7ff 65%,#f0ebff);border:1px solid #dce6ff;border-radius:20px;position:relative;overflow:hidden;margin-bottom:25px;padding:25px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.collection-intro>*{position:relative;z-index:1}
.collection-intro h2{font:800 clamp(22px,3vw,30px)/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:-1px;margin:6px 0}
.collection-intro p{color:#61718b;margin:0 0 16px}
.collection-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#245bde}
.collection-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.orb-one{width:230px;height:230px;background:#d4e4ff80;right:-45px;top:-125px}
.orb-two{width:160px;height:160px;background:#e7ddff85;right:130px;bottom:-115px}
.collection-chips{display:flex;gap:8px;flex-wrap:wrap}
.collection-chip{background:#fff;border:1px solid #d7e2f5;border-radius:999px;padding:8px 13px;color:#536780;font-size:12px;font-weight:700;cursor:pointer}
.collection-chip.active,.collection-chip:hover{background:#245bde;color:#fff;border-color:#245bde}
.collection-aside{text-align:center;min-width:150px}
.collection-count{display:flex;flex-direction:column;gap:0}
.collection-count strong{font:800 46px/1 'Plus Jakarta Sans',sans-serif;color:#245bde}
.collection-count span{font-size:10px;letter-spacing:1.5px;color:#687b98;font-weight:800}
.collection-mini{display:block;font-size:11px;color:#7c8da5;margin-top:13px}
.hoi-footer{background:#102039;color:#d3dfef;margin:0}
.hoi-footer-main{display:grid;grid-template-columns:minmax(0,1.55fr) repeat(3,minmax(0,1fr));gap:35px;padding-top:55px;padding-bottom:48px}
.hoi-footer-about{min-width:0}
.hoi-footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:17px;margin-bottom:17px}
.hoi-footer-brand img{width:120px;max-height:48px;object-fit:contain}
.hoi-footer-brand em{font-style:normal;color:#83acff}
.hoi-footer-about p{max-width:320px;color:#a8bbd2;line-height:1.8;margin:0 0 17px;font-size:13px}
.hoi-footer-site{color:#9dc0ff;font-size:13px;font-weight:700}
.hoi-footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.hoi-footer-column h3{font-size:14px;color:white;margin:0 0 8px}
.hoi-footer-column a{font-size:13px;color:#b1c2d8;line-height:1.4}
.hoi-footer-column a:hover,.hoi-footer-site:hover{color:#fff}
.hoi-footer-bottom{border-top:1px solid #ffffff20}
.hoi-footer-bottom-inner{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;color:#9fb3ca;font-size:12px}
.tool-card{min-width:0;overflow-wrap:anywhere}
@media(max-width:1050px){.navinner{gap:14px}.brand img{width:115px}.topbar nav{gap:15px}.hoi-footer-main{gap:22px}}
@media(max-width:820px){.topbar nav>a{display:none}.topbar nav{margin-left:auto}.nav-dropdown-menu{right:0}.hero-inner{grid-template-columns:minmax(0,1fr);text-align:center;gap:18px;padding-top:45px;padding-bottom:38px}.hero .searchbox{margin-left:auto;margin-right:auto}.hero-notes{justify-content:center}.hero-art img{max-height:210px}.hoi-footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-intro{align-items:flex-start}}
@media(max-width:600px){.container{padding-left:16px;padding-right:16px}.navinner{min-height:68px}.brand{gap:8px}.brand img{width:104px}.brand-label{font-size:15px}.brand-sep{height:21px}.navcta{display:none}.nav-dropdown-menu{position:fixed;top:65px;left:12px;right:12px;width:auto;max-width:none}.hero-inner{padding-top:35px;padding-bottom:32px}.hero h1{letter-spacing:-1.4px}.hero-art img{max-height:160px}.collection-intro{padding:21px 17px;display:block}.collection-aside{display:none}.hoi-footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;padding-top:38px}.hoi-footer-about{grid-column:1/-1}.hoi-footer-bottom-inner{flex-direction:column;gap:6px}.tool-grid{grid-template-columns:minmax(0,1fr)}}

/* Screenshot-matched "Find the right tool for the job" section */
.tools-section{background:#f4f7fc;padding:48px 0 44px}
.tools-section>.container{max-width:1180px}
.collection-intro{display:block;position:relative;isolation:isolate;overflow:hidden;margin:0 0 27px;padding:32px 35px;border-radius:24px;border:1px solid #d5e4ff;background:linear-gradient(110deg,#e7f1ff 0%,#f3eefe 57%,#ffedf0 100%);box-shadow:none}
.collection-intro .section-head{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:0;position:relative;z-index:1}
.collection-intro .section-head>div:first-child{min-width:0;flex:1}
.collection-eyebrow{display:inline-flex;align-items:center;gap:7px;background:#ffffffd9;border-radius:100px;padding:8px 14px;color:#365be4;font-size:10px;font-weight:800;letter-spacing:1.6px}
.collection-intro .section-head h2{font:800 clamp(28px,3.3vw,40px)/1.18 'Plus Jakarta Sans',sans-serif;letter-spacing:-1.8px;color:#092453;margin:19px 0 8px}
.collection-intro .section-head h2 span:not(.title-spark){color:#5947e9}
.collection-intro .title-spark{color:#654ae9;font-size:.58em;vertical-align:top;margin-left:4px}
.collection-intro .section-head p{font-size:13px;line-height:1.65;color:#607391;margin:0 0 19px}
.collection-chips{display:flex;flex-wrap:wrap;gap:8px}
.collection-chip{border:1px solid #e2e9fc;border-radius:999px;background:#ffffffd9;color:#284a84;padding:9px 16px;font-size:11px;font-weight:800;line-height:1.2;cursor:pointer;transition:background .15s,color .15s}
.collection-chip.active,.collection-chip:hover{background:#2454dd;border-color:#2454dd;color:#fff;box-shadow:0 4px 11px #3155dd24}
.collection-aside{flex:0 0 170px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center}
.collection-count{width:142px;height:142px;border-radius:25px;background:#fffffff2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;transform:rotate(3deg)}
.collection-count strong{font:800 60px/1 'Plus Jakarta Sans',sans-serif;color:#3856df;letter-spacing:-2px}
.collection-count span{font-size:9px;letter-spacing:1.25px;font-weight:800;color:#58709d}
.collection-mini{font-size:10px;font-weight:700;color:#5874a9;margin:0;white-space:nowrap}
.collection-orb{position:absolute;z-index:0;pointer-events:none;border-radius:50%}
.orb-one{width:330px;height:330px;right:-100px;top:-175px;background:radial-gradient(circle,#d3ddff99,transparent 70%)}
.orb-two{width:280px;height:280px;right:100px;bottom:-180px;background:radial-gradient(circle,#ffbfe18c,transparent 70%)}
@media(max-width:760px){.collection-intro{padding:26px 23px}.collection-intro .section-head{gap:15px}.collection-aside{flex-basis:125px}.collection-count{width:110px;height:110px;border-radius:20px}.collection-count strong{font-size:47px}.collection-count span{font-size:8px}.collection-mini{font-size:9px;white-space:normal}}
@media(max-width:580px){.tools-section{padding-top:25px}.collection-intro{padding:24px 18px;border-radius:19px}.collection-intro .section-head{display:block;text-align:left}.collection-intro .section-head h2{font-size:29px;letter-spacing:-1.2px}.collection-intro .section-head p{font-size:12px}.collection-aside{display:none}.collection-chip{padding:9px 12px;font-size:10px}}

/* Full-width header banner: replaces the split card layout */
.hero{isolation:isolate;background:linear-gradient(100deg,#071c43 0%,#0e326b 44%,#184d9b 100%);border-bottom:0;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 20%,#6f8bff55,transparent 43%);pointer-events:none;z-index:-1}
.hero-inner{max-width:1180px;min-height:310px;padding-top:34px;padding-bottom:34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;text-align:left}
.hero-copy{position:relative;z-index:2}
.hero-kicker{color:#dbeafe;background:#ffffff18;border-color:#ffffff30;box-shadow:none}
.hero h1{color:#fff;font-size:clamp(32px,3.4vw,46px);margin:13px 0 11px}
.hero h1 span{color:#a9d6ff}
.hero-sub{color:#d1def4;font-size:14px;max-width:460px}
.hero .searchbox{margin:19px 0 12px;background:#fff;border-color:#fff;box-shadow:0 12px 28px #061b3c44;max-width:470px}
.hero-notes{color:#e2e8f0}
.hero-art{position:relative;overflow:hidden;border-radius:18px;box-shadow:0 16px 45px #06163460;border:1px solid #ffffff35}
.hero-art img{display:block;width:100%;height:265px;max-height:none;object-fit:fill;filter:none}
@media(max-width:760px){.hero-inner{grid-template-columns:1fr;gap:18px;min-height:0;padding-top:27px;padding-bottom:25px;text-align:center}.hero-copy{order:1}.hero-art{order:2;max-width:560px;margin:0 auto;width:100%}.hero-art img{height:auto;max-height:240px;object-fit:contain}.hero-sub{margin:auto}.hero .searchbox{margin:17px auto 11px}.hero-notes{justify-content:center}}
@media(max-width:420px){.hero-art img{max-height:210px}.hero h1{font-size:33px}.hero-inner{padding-top:23px;padding-bottom:21px}}

/* Screenshot exact desktop hero: dark gradient and icon grid, no framed artwork */
.hero{background:linear-gradient(105deg,#081c42 0%,#0e316b 51%,#2c5db5 100%);isolation:isolate}
.hero::before{background:radial-gradient(circle at 95% 20%,#7ca4ff24,transparent 50%)}
.hero-inner{max-width:1180px;min-height:373px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;padding-top:38px;padding-bottom:38px}
.hero h1{font-size:clamp(36px,3.6vw,49px);line-height:1.08;letter-spacing:-2px}
.hero-art{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.hero-art img{width:100%;height:auto;max-height:275px;object-fit:contain;filter:none}
.hero-kicker{background:#ffffff19;border:1px solid #ffffff30;color:#f1f6ff}
.hero-kicker-dot{box-shadow:0 0 0 3px #ffffff18}
.hero-notes span{color:#eaf2ff}
.topbar{background:#fff}
.navinner{max-width:1180px;min-height:78px;display:flex;align-items:center;justify-content:space-between}
.topbar nav{display:flex;align-items:center;justify-content:flex-end;margin-left:auto}
.brand{display:inline-flex;align-items:center}
@media(max-width:820px){.hero-inner{grid-template-columns:1fr;gap:20px;text-align:center;min-height:0;padding:32px 16px}.hero-art{margin:0 auto;max-width:560px}.hero-art img{max-height:240px}.hero .searchbox{margin-left:auto;margin-right:auto}.hero-notes{justify-content:center}}
@media(max-width:600px){.hero-inner{padding:28px 16px}.hero h1{font-size:35px}.hero-art img{max-height:190px}}


/* Colorful tool cards — scoped to grid; header, hero and footer untouched */
.tool-grid{gap:20px;align-items:stretch}
.tool-grid .tool-card{--accent:#0b9f85;--tint:#e3fbf2;--wash:#f5fffb;position:relative;isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 30%,#ffffff);border-radius:19px;background:linear-gradient(135deg,var(--tint) 0%,var(--wash) 100%);box-shadow:0 5px 17px #19365d0b;padding:22px;min-height:236px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tool-grid .tool-card:nth-child(8n+1){--accent:#069e7b;--tint:#d8f9ec;--wash:#f2fff9}
.tool-grid .tool-card:nth-child(8n+2){--accent:#306ae9;--tint:#deebff;--wash:#f4f8ff}
.tool-grid .tool-card:nth-child(8n+3){--accent:#ec4772;--tint:#ffe1ea;--wash:#fff6f9}
.tool-grid .tool-card:nth-child(8n+4){--accent:#8a4fe3;--tint:#eee0ff;--wash:#fbf6ff}
.tool-grid .tool-card:nth-child(8n+5){--accent:#dd8a0c;--tint:#fff0d0;--wash:#fffaf0}
.tool-grid .tool-card:nth-child(8n+6){--accent:#008eb8;--tint:#d7f5ff;--wash:#f3fcff}
.tool-grid .tool-card:nth-child(8n+7){--accent:#dc5a35;--tint:#ffe6dc;--wash:#fff8f3}
.tool-grid .tool-card:nth-child(8n+8){--accent:#5260df;--tint:#e5e8ff;--wash:#f7f8ff}
.tool-grid .tool-card:before{content:'';position:absolute;width:160px;height:160px;right:-75px;top:-88px;border-radius:50%;background:color-mix(in srgb,var(--accent) 11%,transparent);pointer-events:none;z-index:-1}
.tool-grid .tool-card:after{content:'';position:absolute;left:22px;right:22px;top:0;height:3px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.65;border-radius:0 0 8px 8px;pointer-events:none}
.tool-grid .tool-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 55%,white);box-shadow:0 17px 35px color-mix(in srgb,var(--accent) 15%,transparent)}
.tool-grid .tool-icon{background:#ffffffd9!important;color:var(--accent)!important;border:1px solid color-mix(in srgb,var(--accent) 16%,white);border-radius:14px;box-shadow:0 5px 15px #1732580a;width:49px;height:49px}
.tool-grid .tool-card h3{color:#112746;margin:20px 0 6px;line-height:1.4}
.tool-grid .tool-card p{color:#526781;line-height:1.7;margin-bottom:22px}
.tool-grid .card-bottom{border-top:1px solid color-mix(in srgb,var(--accent) 18%,white);padding-top:15px}
.tool-grid .category-tag{color:color-mix(in srgb,var(--accent) 72%,#253755);font-weight:800}
.tool-grid .card-link{display:inline-flex;align-items:center;gap:4px;padding:9px 12px;border-radius:10px;background:var(--accent);color:#fff;font-weight:800;transition:filter .18s,transform .18s}
.tool-grid .card-link:hover{filter:brightness(.91);transform:translateX(2px)}
.tool-grid .card-link span{margin-left:0}
.tool-grid .status.ready{background:#e0f9e9;color:#067847;border:1px solid #bdf0d1}
.tool-grid .status.soon{background:#ffffffbd;color:#6c7e98;border:1px solid #dfe5ef}
.tool-grid .tool-card:focus-within{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tool-grid .tool-card,.tool-grid .card-link{transition:none}.tool-grid .tool-card:hover{transform:none}}
@media(max-width:620px){.tool-grid .tool-card{padding:20px;min-height:215px}.tool-grid{gap:15px}}

/* Compact cards: remove divider and excess space above CTA */
.tool-grid .tool-card{min-height:0;padding:17px 19px 16px}
.tool-grid .tool-icon{width:43px;height:43px;border-radius:11px}
.tool-grid .tool-card h3{margin:12px 0 4px;line-height:1.3;font-size:16px}
.tool-grid .tool-card p{flex:0 1 auto;margin:0 0 11px;line-height:1.5;font-size:12px}
.tool-grid .card-bottom{border-top:0;padding-top:0;margin-top:auto;gap:8px}
.tool-grid .card-link{padding:8px 11px}
.tool-grid .tool-card:after{display:none}
@media(max-width:620px){.tool-grid .tool-card{min-height:0;padding:16px}.tool-grid .tool-card h3{margin-top:10px}.tool-grid .tool-card p{margin-bottom:9px}}

/* HomeofIndia homepage hero — matches supplied 2048×682 artwork. */
.hoi-banner-hero{position:relative!important;display:block!important;aspect-ratio:2048 / 682;min-height:0!important;background:#e4f3ff!important;overflow:hidden!important;border:0!important}
.hoi-banner-hero::before,.hoi-banner-hero::after{display:none!important}
.hoi-banner-image{position:absolute;inset:0;background-image:url('./homeofindia-tools-hero.png');background-repeat:no-repeat;background-position:center;background-size:100% 100%;pointer-events:none}
.hoi-banner-search{position:absolute;left:6.6%;top:68.5%;width:39.7%;height:10.5%;display:flex;align-items:center;background:#fff;border-radius:999px;padding:4px 4px 4px 3.4%;box-shadow:0 3px 12px #184d9b18;z-index:2}
.hoi-search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hoi-search-icon{position:absolute;left:3%;font-size:clamp(14px,2.3vw,36px);color:#092b70;line-height:1}
.hoi-banner-search input{border:0;outline:0;min-width:0;flex:1;background:#fff;color:#17326a;font:inherit;font-size:clamp(10px,1.05vw,19px);height:100%;padding:0 10px;box-shadow:none}
.hoi-banner-search input::placeholder{color:#74809a}
.hoi-banner-search button{align-self:stretch;border:0;border-radius:15px 999px 999px 15px;padding:0 clamp(12px,2.5vw,42px);background:#0875fa;color:white;font:700 clamp(12px,1.2vw,23px) inherit;cursor:pointer}
.hoi-banner-search button:hover,.hoi-banner-search button:focus-visible{background:#005cce}
.hoi-mobile-banner-copy{display:none}
/* The banner includes its own HomeofIndia wordmark and Tools label. */
@media(min-width:801px){body:has(.hoi-banner-hero)>.topbar{display:none}}
@media(max-width:800px){
 .hoi-banner-hero{aspect-ratio:auto;min-height:0!important;padding:0 18px 26px;background:linear-gradient(135deg,#e8f5ff,#e9efff 60%,#e2ceff)!important;display:flex!important;flex-direction:column;gap:16px}
 .hoi-banner-image{position:relative;inset:auto;order:2;width:100%;height:auto;aspect-ratio:2048 / 682;background-size:contain;background-position:center;border-radius:12px}
 .hoi-mobile-banner-copy{display:block;order:0;padding:24px 0 0;text-align:center}
 .hoi-mobile-pill{display:inline-block;border-radius:100px;background:#cce5ff;padding:7px 12px;color:#0067df;font-size:12px;font-weight:700}
 .hoi-mobile-banner-copy h1{font-size:clamp(29px,6.4vw,47px)!important;line-height:1.12;letter-spacing:-1.4px;margin:13px 0;color:#061b51}
 .hoi-mobile-banner-copy h1 span{color:#7410e8}
 .hoi-mobile-banner-copy p{color:#4b6286;font-size:14px;line-height:1.55;max-width:500px;margin:0 auto}
 .hoi-mobile-benefits{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:15px auto;color:#123878;font-size:11px}
 .hoi-banner-search{position:relative;left:auto;top:auto;width:100%;height:54px;order:1;padding:5px 5px 5px 36px;border:1px solid #d3e3ff}
 .hoi-search-icon{font-size:24px;left:11px}
 .hoi-banner-search input{font-size:12px;padding:0 6px}
 .hoi-banner-search button{font-size:13px;padding:0 18px;border-radius:11px 30px 30px 11px}
}

/* Live, selectable, accessible hero content. Only the right illustration is an image. */
.hoi-live-hero{background:radial-gradient(ellipse at 87% 18%,#90caff 0%,transparent 39%),radial-gradient(ellipse at 98% 92%,#b87aff 0%,transparent 40%),linear-gradient(110deg,#eaf4ff 0%,#f3f8ff 47%,#dceeff 100%)!important;isolation:isolate}
.hoi-live-hero::before{content:"";position:absolute;inset:auto auto -38% -8%;width:45%;height:65%;border-radius:50%;background:#b68aff66;filter:blur(38px);z-index:-1;pointer-events:none}
.hoi-live-inner{width:min(100%,2048px);margin:0 auto;min-height:clamp(400px,33.3vw,682px);padding:32px clamp(28px,6.6vw,144px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(10px,2vw,45px);align-items:center}
.hoi-live-content{min-width:0;position:relative;z-index:2}
.hoi-live-pill{display:inline-flex;border-radius:50px;background:#cfe7ff;color:#0069e9;font-weight:800;padding:5px 16px;font-size:clamp(12px,1.12vw,22px)}
.hoi-live-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(35px,4.05vw,82px)!important;line-height:1.09;letter-spacing:-.055em;margin:20px 0 12px;color:#051b50!important;white-space:nowrap}
.hoi-live-hero h1 .hoi-blue{color:#0877f7!important}.hoi-live-hero h1 .hoi-purple{color:#7800eb!important}
.hoi-live-sub{font-size:clamp(14px,1.25vw,26px);color:#546c91;line-height:1.48;max-width:850px;margin:0 0 28px}
.hoi-live-search{width:100%;max-width:900px;min-height:clamp(56px,4vw,82px);display:flex;align-items:center;gap:14px;border:1px solid #d4e2fb;background:#fff;padding:5px 5px 5px 23px;border-radius:28px;box-shadow:0 8px 18px #3762c81f}
.hoi-live-search svg{flex:none;color:#102f70}.hoi-live-search input{flex:1;min-width:0;outline:0;border:0;background:transparent;font-size:clamp(12px,1vw,20px);color:#163567}
.hoi-live-search input::placeholder{color:#8190a8}.hoi-live-search button{align-self:stretch;min-width:22%;padding:0 22px;border:0;border-radius:19px;background:#0875f7;color:white;font-size:clamp(13px,1.05vw,21px);font-weight:800;cursor:pointer}.hoi-live-search button:hover{background:#0056c7}
.hoi-search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hoi-live-benefits{display:flex;align-items:center;gap:clamp(10px,1.4vw,30px);margin-top:30px;flex-wrap:wrap}.hoi-live-benefits span{display:inline-flex;align-items:center;gap:8px;font-size:clamp(10px,.85vw,17px);font-weight:650;color:#142e64;white-space:nowrap}.hoi-live-benefits span::before{content:'✓';background:#00b96c;color:white;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;font-weight:900;font-size:15px}
.hoi-live-art{min-width:0;align-self:stretch;display:flex;align-items:center;justify-content:center}.hoi-live-art img{width:115%;max-width:none;height:auto;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:1050px){.hoi-live-inner{padding:35px 28px;min-height:420px}.hoi-live-hero h1{font-size:clamp(32px,4.1vw,50px)!important}.hoi-live-benefits{gap:11px;margin-top:20px}.hoi-live-art img{width:115%}}
@media(max-width:760px){.hoi-live-inner{grid-template-columns:1fr;gap:5px;text-align:center;padding:34px 18px 22px}.hoi-live-hero h1{white-space:normal;font-size:clamp(31px,7.3vw,50px)!important;margin:16px 0 12px}.hoi-live-sub{margin:0 auto 19px}.hoi-live-search{margin:auto;max-width:600px;min-height:56px;border-radius:16px;padding-left:14px}.hoi-live-search button{border-radius:12px;padding:0 15px}.hoi-live-benefits{justify-content:center;gap:11px 17px}.hoi-live-art img{width:min(100%,560px);max-height:340px;mix-blend-mode:multiply}}
@media(max-width:400px){.hoi-live-search{gap:7px}.hoi-live-search input{font-size:11px}.hoi-live-search button{padding:0 11px}.hoi-live-benefits span{font-size:10px}}

/* 2026-10-19: unified hero palette, seamless art transition and tighter spacing */
.hoi-live-hero{overflow:hidden;position:relative;background:linear-gradient(105deg,#f8fcff 0%,#eaf5ff 34%,#d6edff 62%,#b5dfff 79%,#bb94ff 100%)!important}
.hoi-live-hero::before{inset:auto auto -40% -18%;width:75%;height:66%;background:radial-gradient(ellipse,#caa6ffb8 0%,#d7c9ff50 48%,transparent 75%);filter:blur(12px);z-index:0}
.hoi-live-hero::after{content:"";position:absolute;right:-9%;bottom:-35%;width:64%;height:65%;border-radius:50%;background:radial-gradient(ellipse,#ad80ff75 0%,transparent 70%);pointer-events:none;z-index:0}
.hoi-live-inner{position:relative;z-index:1;max-width:1530px;min-height:420px;padding:42px clamp(22px,5vw,88px);grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);gap:clamp(12px,2vw,35px)}
.hoi-live-content{z-index:2}
.hoi-live-hero h1{font-size:clamp(36px,3.65vw,66px)!important;line-height:1.12;margin:15px 0 12px;letter-spacing:-.045em}
.hoi-live-sub{font-size:clamp(14px,1.15vw,20px);line-height:1.5;max-width:590px;margin-bottom:22px;color:#4c668c}
.hoi-live-search{min-height:58px;max-width:610px;border-radius:24px;box-shadow:0 9px 26px #3967bc1b}
.hoi-live-search button{border-radius:19px;background:linear-gradient(135deg,#087eff,#0560ec)}
.hoi-live-pill{background:#d6eaff;color:#0069e7;font-size:clamp(12px,1vw,17px)}
.hoi-live-benefits{gap:clamp(8px,1.15vw,20px);margin-top:25px;flex-wrap:nowrap}
.hoi-live-benefits span{font-size:clamp(9px,.77vw,13px);gap:6px}
.hoi-live-benefits span::before{width:21px;height:21px;flex:none}
.hoi-live-art{position:relative;z-index:1;overflow:visible;min-height:340px}
.hoi-live-art img{width:120%;height:auto;max-width:none;mix-blend-mode:normal;object-fit:contain;filter:drop-shadow(0 15px 22px #3062b026);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 94%,transparent 100%)}
@media(max-width:1120px){.hoi-live-inner{padding:34px 32px;grid-template-columns:1.05fr 1fr}.hoi-live-benefits{flex-wrap:wrap}.hoi-live-art img{width:118%}}
@media(max-width:760px){.hoi-live-inner{grid-template-columns:1fr;min-height:0;padding:32px 18px 22px;gap:10px}.hoi-live-hero h1{font-size:clamp(33px,7.4vw,50px)!important;white-space:normal}.hoi-live-sub{max-width:570px;margin:0 auto 20px}.hoi-live-benefits{flex-wrap:wrap;justify-content:center;margin-top:18px;gap:12px 18px}.hoi-live-benefits span{font-size:11px}.hoi-live-art{min-height:0;justify-content:center}.hoi-live-art img{width:min(112%,600px);max-height:360px;mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 90%,transparent 100%)}}

/* Compact seamless hero – final overrides */
.hoi-live-hero{background:linear-gradient(108deg,#edf6ff 0%,#e3f2ff 40%,#b9e5ff 72%,#a6d7ff 85%,#c39aff 100%)!important;overflow:hidden}
.hoi-live-inner{max-width:1480px;min-height:0;padding:20px clamp(20px,4.5vw,70px);grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);gap:clamp(8px,1.6vw,24px)}
.hoi-live-pill{padding:4px 12px;font-size:12px}
.hoi-live-hero h1{font-size:clamp(33px,3.35vw,53px)!important;line-height:1.08;margin:10px 0 9px}
.hoi-live-sub{font-size:clamp(13px,1.04vw,16px);line-height:1.43;margin-bottom:16px;max-width:550px}
.hoi-live-search{min-height:49px;max-width:570px;border-radius:19px;padding:4px 4px 4px 16px}
.hoi-live-search button{border-radius:15px;padding:0 17px}
.hoi-live-benefits{margin-top:15px;gap:9px 16px;flex-wrap:wrap}
.hoi-live-benefits span{font-size:11px}
.hoi-live-benefits span::before{width:18px;height:18px;font-size:12px}
.hoi-live-art{min-height:0;align-self:center;justify-content:center}
.hoi-live-art img{display:block;width:100%;max-width:530px;max-height:295px;height:auto;object-fit:contain;mix-blend-mode:normal;filter:none;mask-image:none!important;-webkit-mask-image:none!important}
@media(max-width:1050px){.hoi-live-inner{padding:20px 24px;grid-template-columns:1.1fr .9fr}.hoi-live-art img{max-height:260px}}
@media(max-width:760px){.hoi-live-inner{grid-template-columns:1fr;padding:22px 17px 15px;gap:5px}.hoi-live-hero h1{font-size:clamp(31px,7vw,44px)!important}.hoi-live-sub{margin:0 auto 14px}.hoi-live-benefits{margin-top:12px;justify-content:center}.hoi-live-art img{width:min(100%,460px);max-height:230px}}
@media(max-width:420px){.hoi-live-inner{padding:19px 14px 12px}.hoi-live-art img{max-height:195px}.hoi-live-hero h1{font-size:31px!important}}