/* onlyindex.io — 1rem = 10 design px (reference mockup is 2000 units wide) */
:root{
  --navy:#0b1736; --ink:#15213d; --muted:#5a6a86; --blue:#0ea5f3; --blue-d:#0a8fe0;
  --sky:#e8f4fd; --sky-2:#d9effd; --line:#d8ebf8; --bg:#fcfeff;
  --grad:linear-gradient(180deg,#19b0f8 0%,#0a9af0 100%);
  --head:"Figtree","Segoe UI",system-ui,sans-serif;
  --body:"Hind","Segoe UI",system-ui,-apple-system,sans-serif;
}
html{font-size:clamp(5.6px,.5vw,7.85px);-webkit-text-size-adjust:100%}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 1.6rem/1.4 var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input{font:inherit;color:inherit;border:0;background:none;outline:0}
button{cursor:pointer}
img{display:block;max-width:100%}
.wrap{width:165.4rem;max-width:calc(100% - 4rem);margin-inline:auto}

.btn{display:flex;align-items:center;justify-content:center;border-radius:99rem;background:var(--grad);color:#fff;font:700 1.55rem var(--head);box-shadow:0 .4rem 1rem rgba(14,165,243,.25);transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 .2rem 1.2rem rgba(30,90,150,.09)}
.nav-in{height:6.6rem;display:flex;align-items:center;justify-content:space-between;position:relative}
.logo{display:flex;align-items:center;font:900 3.5rem/1 var(--head);letter-spacing:-.035em;color:var(--navy);padding-bottom:.4rem}
.logo span{color:var(--blue)}
.logo svg{width:3.6rem;height:3.6rem;margin:.6rem 0 0 .7rem;fill:none;stroke:var(--blue);stroke-width:3.2;stroke-linecap:round}
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:3.9rem;font-size:1.72rem;font-weight:500;color:var(--navy);white-space:nowrap;margin-left:-4.1rem;padding-top:.3rem}
.nav-links a:hover,.login:hover,.foot nav a:hover{color:var(--blue)}
.login{padding-top:.3rem}
.nav-right{display:flex;align-items:center;gap:3.3rem;font-size:1.72rem;font-weight:500;color:var(--navy)}
.btn-nav{width:19.2rem;height:4.3rem;font-size:1.6rem}

/* ---------- hero ---------- */
.hero{position:relative;height:42.4rem;overflow:hidden;background:linear-gradient(100deg,#fff 0%,#fbfdff 40%,#eef7fd 75%,#f4fafe 100%)}
.hero-waves{position:absolute;inset:0;width:100%;height:100%;opacity:.62}
.hero-in{position:relative;height:100%}
.hero-copy{position:absolute;left:0;top:0;width:84rem}
h1{font:900 7.7rem/7.4rem var(--head);letter-spacing:-.045em;word-spacing:.02em;color:var(--navy);margin:5.6rem 0 0 .8rem;white-space:nowrap;text-shadow:0 .3rem 1.2rem rgba(255,255,255,.9)}
.hl{position:relative;display:inline-block;padding:0 .06em .08em 0;margin:0 -.06em -.08em 0;background:linear-gradient(180deg,#2bb9fb,#0895ec);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.hl svg{position:absolute;left:1%;bottom:-1.9rem;width:98%;height:2.2rem;overflow:visible}
.hl path{fill:none;stroke:#18a9f6;stroke-width:9;stroke-linecap:round}
.sub{margin:3.1rem 0 0 .9rem;font-size:2.05rem;color:var(--navy);white-space:nowrap}
.search{margin:2rem 0 0 .2rem;width:82.7rem;height:6.9rem;display:flex;align-items:center;background:#fff;border:.25rem solid var(--blue);border-radius:99rem;padding:0 .6rem 0 2.1rem;box-shadow:0 0 0 .5rem rgba(14,165,243,.10),0 .8rem 2.4rem rgba(14,165,243,.16)}
.search>i{font-size:3rem;color:var(--blue)}
.search input{flex:1;min-width:0;height:100%;margin-left:1.8rem;font-size:1.8rem;color:var(--navy)}
.search input::placeholder{color:#5f6f8a;opacity:1}
.search button{width:13.5rem;height:5.4rem;border-radius:99rem;background:var(--grad);color:#fff;font:700 1.8rem var(--head);box-shadow:0 .4rem 1.2rem rgba(14,165,243,.3)}
.search button:hover{filter:brightness(1.07)}
.popular{margin:1.9rem 0 0 1rem;font-size:1.6rem;color:var(--navy);white-space:nowrap}
.popular a{color:var(--blue-d);margin-left:1.3rem}
.popular a+a{margin-left:2.3rem}
.popular a:hover{text-decoration:underline}

.hero-img{position:absolute;left:93.6rem;bottom:0;width:43.6rem;max-width:none;height:auto;filter:drop-shadow(0 0 3rem rgba(255,255,255,.9))}
.hero-side{position:absolute;left:139.6rem;top:8.3rem;white-space:nowrap}
.hero-side h2{font:900 2.4rem/2.75rem var(--head);letter-spacing:-.02em;color:var(--navy)}
.hero-side ul{margin-top:2rem}
.hero-side li{display:flex;align-items:center;gap:.9rem;height:4.13rem;font-size:1.7rem;color:var(--navy)}
.hero-side li i{font-size:2.8rem;color:var(--blue);width:2.8rem}
.scribble{position:absolute;left:153.6rem;top:33.6rem;display:flex;flex-direction:column;font:500 2.05rem/2.15rem "Caveat",cursive;letter-spacing:.05em;color:var(--blue-d);transform:rotate(-14deg);white-space:nowrap}
.scribble span:nth-child(1){margin-left:3.4rem}
.scribble span:nth-child(3){margin-left:3.6rem}
.scribble i{position:absolute;right:-3.6rem;top:2.6rem;font-size:3rem;transform:rotate(24deg) scaleX(.8)}

/* ---------- filters ---------- */
.filters{margin-top:1.8rem;margin-inline:-.2rem;height:7.5rem;display:flex;align-items:center;gap:1.4rem;padding:0 1.7rem;background:var(--sky);border-radius:1.5rem}
.chip{width:var(--w);height:5rem;display:flex;align-items:center;gap:1.4rem;padding:0 1.8rem;background:#fff;border-radius:1rem;font-size:1.66rem;font-weight:500;color:var(--navy);box-shadow:0 .1rem .4rem rgba(30,90,150,.06);transition:box-shadow .15s}
.chip:hover{box-shadow:0 .3rem 1rem rgba(14,165,243,.2)}
.chip i:first-child{font-size:2.3rem;color:var(--blue)}
.chip .ph-caret-down{margin-left:auto;font-size:1.5rem;color:#4a5a78}
.chip-ico{width:4.7rem;justify-content:center;padding:0}
.chip-ico i:first-child{color:var(--navy);font-size:2rem}
.sort-label{margin-left:auto;font-size:1.55rem;color:var(--navy);margin-right:-.5rem}
.chip-sort{width:18rem;height:4.6rem;padding:0 1.5rem;font-weight:600}

/* ---------- featured ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-start;margin-top:2.4rem}
.sec-head h2{font:900 3.9rem/4.4rem var(--head);letter-spacing:-.02em;color:var(--navy)}
.sec-head p{font-size:1.7rem;color:#33425f;margin-top:-.1rem}
.sec-head a{display:flex;align-items:center;gap:1rem;margin:1.6rem .7rem 0 0;font-weight:600;font-size:1.65rem;color:var(--blue-d)}
.sec-head a:hover{text-decoration:underline}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:2.1rem;margin:1.5rem -.1rem 0 .1rem}
.card{background:#fff;border:1px solid var(--line);border-radius:1.5rem;padding:.8rem;box-shadow:0 .4rem 1.8rem rgba(40,110,170,.07);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-.4rem);box-shadow:0 1.2rem 3rem rgba(40,110,170,.16)}
.ph-wrap{position:relative;border-radius:1.1rem;overflow:hidden;aspect-ratio:380/225}
.ph-wrap img{width:100%;height:100%;object-fit:cover}
.ver{position:absolute;top:1rem;right:.8rem;height:2.8rem;display:flex;align-items:center;gap:.4rem;padding:0 1.1rem 0 .9rem;background:#fff;border-radius:.8rem;font-size:1.3rem;font-weight:500;color:var(--blue-d);padding-top:.1rem}
.ver i{font-size:1.6rem;color:var(--blue)}
.card-b{padding:1rem .5rem .5rem}
.card-b h3{display:flex;align-items:center;gap:.9rem;padding-left:.4rem;font:700 1.95rem/2.6rem var(--body);color:var(--navy)}
.card-b h3 i{font-size:2.2rem;color:var(--blue)}
.handle{padding-left:.4rem;font-size:1.58rem;line-height:1.9rem;color:var(--muted)}
.tags{display:flex;gap:.6rem;margin-top:1rem;padding-left:.3rem}
.tags span{height:2.5rem;display:flex;align-items:center;padding:0 1.6rem;border-radius:99rem;background:#e1f2fd;font-size:1.32rem;padding-top:.15rem;color:#0b6db3}
.loc{display:flex;align-items:center;gap:1.1rem;margin-top:1rem;padding-left:.4rem;font-size:1.55rem;line-height:2.2rem;color:var(--ink)}
.loc i{font-size:1.7rem;color:#47566f}
.stats{display:grid;grid-template-columns:29% 34% 37%;margin-top:1.5rem;padding-left:.4rem;height:3.2rem;align-items:center}
.stats span{display:flex;align-items:center;gap:.9rem;font-size:1.55rem;font-weight:600;color:var(--navy)}
.stats span+span{border-left:1px solid #dfe8f1;padding-left:1.4rem}
.stats i{font-size:2.5rem;color:var(--blue);font-weight:400}
.stats span:first-child i{font-size:2.8rem}
.card .btn{height:3.8rem;margin-top:.8rem}

/* ---------- categories ---------- */
.cats{display:flex;align-items:flex-start;margin-top:3.3rem;height:9.8rem}
.cats h2{font:800 2.12rem/7.6rem var(--head);letter-spacing:-.02em;color:var(--navy);width:18.3rem;flex:none}
.cat-list{display:flex;gap:2.32rem}
.cat-list a,.cat-all{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:7rem;font-size:1.5rem;color:var(--navy);white-space:nowrap}
.cat-list span{width:7rem;height:7rem;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#e4f5fe,#d2ecfc);transition:transform .15s,box-shadow .15s}
.cat-list a:hover span{transform:translateY(-.3rem);box-shadow:0 .8rem 1.8rem rgba(14,165,243,.28)}
.cat-list i{font-size:3.2rem;color:var(--blue)}
.thick{-webkit-text-stroke:.12rem currentColor}
.cat-all{margin-left:auto;margin-right:2.2rem;padding-top:1.4rem;color:var(--blue-d);gap:1.2rem}
.cat-all span{width:4.4rem;height:4.4rem;border-radius:50%;display:grid;place-items:center;background:#ecf6fd;font-size:1.8rem;color:var(--blue-d)}

/* ---------- stats + how ---------- */
.bottom{display:flex;gap:3.5rem;margin:2.1rem -.2rem 0;align-items:stretch}
.nums{width:84.2rem;flex:none;height:11rem;margin-top:.3rem;display:flex;align-items:center;padding:0 2.1rem;background:var(--sky);border-radius:1.5rem}
.nums div{display:flex;align-items:center;gap:1.3rem}
.nums div:nth-child(1){width:21rem}.nums div:nth-child(2){width:22.3rem}.nums div:nth-child(3){width:18.5rem}
.nums span{width:6.2rem;height:6.2rem;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--sky-2);font-size:3.2rem;color:var(--blue)}
.nums p{font-size:1.5rem;line-height:2rem;color:#33425f;white-space:nowrap}
.nums b{display:block;font:800 2.6rem/3.3rem var(--head);letter-spacing:-.02em;color:var(--navy)}
.nums b.blue{color:var(--blue-d)}
.how{flex:1;height:11.5rem;background:#fff;border:1px solid var(--line);border-radius:1.7rem;padding:1rem 3.5rem 0;box-shadow:0 .4rem 1.8rem rgba(40,110,170,.06)}
.how h2{font:800 2.2rem/2.6rem var(--head);letter-spacing:-.02em;color:var(--navy)}
.how ol{display:flex;margin:.6rem 0 0 -.4rem}
.how li{display:flex;align-items:center;gap:1.8rem}
.how li:nth-child(1){width:26.1rem}.how li:nth-child(2){width:27.1rem}
.how span{width:6rem;height:6rem;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--sky-2);font:800 2.9rem var(--head);color:var(--blue-d)}
.how p{font-size:1.36rem;line-height:1.6rem;color:var(--muted);max-width:17rem}
.how b{display:block;font-size:1.5rem;line-height:2.2rem;color:var(--navy)}

/* ---------- footer ---------- */
.foot{padding:1.6rem 0 1.5rem}
.foot-row{display:flex;align-items:center;justify-content:space-between;position:relative;height:3rem}
.logo-sm{font-size:2rem;padding:0 0 0 .3rem}
.logo-sm svg{width:2.3rem;height:2.3rem;margin:.2rem 0 0 .4rem}
.foot nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:1.9rem;font-size:1.3rem;color:var(--navy);margin-left:-.4rem}
.social{display:flex;align-items:center;gap:1.4rem;color:var(--navy)}
.social i{font-size:2.1rem}
.social a:hover{color:var(--blue)}
.foot small{font-size:1.2rem;color:#7a879c}
.social small{margin-left:1rem}
.foot-2{height:2.4rem;margin-top:.8rem}
.foot-2 small{font-size:1.26rem}
.foot small.dark{color:var(--navy)}

/* ---------- tablet / mobile ---------- */
@media (max-width:1100px){
  html{font-size:9px}
  .nav-links{display:none}
  .hero{height:auto;padding-bottom:0}
  .hero-in{height:auto;display:flex;flex-direction:column}
  .hero-copy,.hero-side,.hero-img,.scribble{position:static;width:auto}
  h1{font-size:clamp(3.8rem,9.2vw,7.2rem);line-height:1.02;white-space:normal;margin:4rem 0 0}
  .sub{white-space:normal;margin-left:0;font-size:1.8rem}
  .search{width:100%;margin-left:0}
  .popular{white-space:normal;margin-left:0;line-height:2.6rem}
  .hero-side{margin-top:3rem;order:2}
  .hero-img{order:3}
  .popular a:first-child{margin-left:.8rem}
  .hero-side ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));margin-top:1.2rem}
  .scribble{display:none}
  .hero-img{width:min(48rem,90%);margin:1rem auto 0}
  .filters{height:auto;flex-wrap:wrap;padding:1.4rem;margin-inline:0}
  .chip{width:auto;flex:1 1 14rem}.chip-ico{flex:0 0 4.7rem}
  .sort-label{margin-left:0}
  .cards{grid-template-columns:repeat(2,1fr);margin-inline:0}
  .cats{height:auto;flex-wrap:wrap}
  .cats h2{width:100%;line-height:4rem}
  .cat-list{flex-wrap:wrap;gap:1.8rem 2rem;flex:1}
  .cat-all{margin:0 0 0 1rem}
  .bottom{flex-direction:column;gap:2rem;margin-inline:0}
  .nums{width:100%;height:auto;flex-wrap:wrap;gap:2rem;padding:2rem}
  .nums div{width:auto!important;flex:1 1 20rem}
  .how{height:auto;padding:1.6rem 2.4rem 2rem}
  .how ol{flex-wrap:wrap;gap:1.6rem}
  .how li{width:auto!important;flex:1 1 22rem}
  .foot-row{height:auto;flex-wrap:wrap;gap:1.4rem;justify-content:center}
  .foot nav{position:static;transform:none;flex-wrap:wrap;justify-content:center}
  .social{flex-wrap:wrap;justify-content:center}
}
@media (max-width:620px){
  html{font-size:8.6px}
  .login{display:none}
  .btn-nav{width:16rem;height:4rem;font-size:1.45rem}
  .logo{font-size:2.8rem}.logo svg{width:3rem;height:3rem}
  .search{height:6rem;padding-left:1.5rem}
  .search input{margin-left:1rem;font-size:1.6rem}
  .search button{width:10.5rem;height:4.6rem;font-size:1.6rem}
  .cards{grid-template-columns:1fr}
  .sec-head{flex-direction:column}
  .sec-head a{margin-top:.8rem}
  .sec-head h2{font-size:3rem}
}