/* Samir Edu World — shared styles for every page */
:root{
  --bg:#F4F4F4; --surface:#FFFFFF; --surface-2:#EDEDEF; --ink:#000000; --text:#111114; --muted:#5F5F69; --line:#E3E3E7;
  --blue:#1E6BF2; --blue-soft:#E7EFFE; --notch:#000000; --btn:#000000; --btn-text:#FFFFFF;
  --shadow:0 30px 60px -28px rgba(0,0,0,.28), 0 8px 20px -12px rgba(0,0,0,.12);
  --sans:"Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --script:"Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D0D0F; --surface:#17171A; --surface-2:#202024; --ink:#FFFFFF; --text:#F2F2F4; --muted:#A3A3AD; --line:#29292E;
    --blue:#5C94FF; --blue-soft:rgba(92,148,255,.14); --notch:#1E1E22; --btn:#FFFFFF; --btn-text:#000000;
    --shadow:0 30px 60px -28px rgba(0,0,0,.8); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D0D0F; --surface:#17171A; --surface-2:#202024; --ink:#FFFFFF; --text:#F2F2F4; --muted:#A3A3AD; --line:#29292E;
  --blue:#5C94FF; --blue-soft:rgba(92,148,255,.14); --notch:#1E1E22; --btn:#FFFFFF; --btn-text:#000000;
  --shadow:0 30px 60px -28px rgba(0,0,0,.8); color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px); overflow-x:hidden; overflow-x:clip}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; max-width:100%}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:70; background:var(--bg)}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:8px}
.wrap{width:min(1240px, 100% - 40px); margin-inline:auto}
h1,h2,h3{font-weight:700; line-height:1.04; margin:0; letter-spacing:-.035em; color:var(--ink)}
h2{font-size:clamp(2.4rem, 5.2vw, 4.2rem)}
h3{font-size:1.5rem; letter-spacing:-.02em}
p{margin:0}
.script{font-family:var(--script); font-style:normal; font-weight:400; color:var(--blue); letter-spacing:0; font-size:1.18em; line-height:.9; padding:0 .06em}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.w{display:inline-block; overflow:hidden; vertical-align:top; padding:.06em 0 .14em; margin:-.06em 0 -.14em}
.w > *{display:inline-block}

/* Badge */
.badge{display:inline-flex; align-items:center; gap:12px; color:var(--muted); font-weight:500; font-size:1rem}
.badge i{width:42px; height:42px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; box-shadow:0 8px 18px -8px var(--blue)}
.badge svg{width:20px; height:20px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:16px; padding:10px 10px 10px 30px; border-radius:999px; background:var(--btn); color:var(--btn-text); text-decoration:none; font:700 .92rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; border:0; cursor:pointer}
.btn .arr{width:40px; height:40px; border-radius:50%; background:var(--btn-text); color:var(--btn); display:grid; place-items:center; transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arr{transform:rotate(-45deg)}
.btn svg{width:18px; height:18px}
.btn.light{background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.light .arr{background:var(--ink); color:var(--surface)}
.btn.blue{background:var(--blue); color:#fff} .btn.blue .arr{background:#fff; color:var(--blue)}

/* Header */
.progress{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; height:3px; background:var(--blue); transform-origin:0 50%; transform:scaleX(0); z-index:90}
.site-head{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:60; pointer-events:none; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.site-head.hide{transform:translateY(-120%)}
.head-in{display:flex; align-items:flex-start; justify-content:space-between; padding-top:14px}
.head-in > *{pointer-events:auto}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; background:var(--surface); padding:8px 18px 8px 8px; border-radius:999px; box-shadow:0 6px 20px -12px rgba(0,0,0,.35); font-weight:700; letter-spacing:-.02em}
.brand b{width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-size:.95rem}
.notch{position:absolute; left:50%; top:0; transform:translateX(-50%); pointer-events:auto}
.notch-btn{position:relative; display:flex; align-items:center; gap:10px; background:var(--notch); color:#fff; border:0; font:500 .92rem var(--sans); padding:12px 26px 14px; border-radius:0 0 24px 24px; cursor:pointer; white-space:nowrap}
.notch-btn::before,.notch-btn::after{content:""; position:absolute; top:0; width:22px; height:22px}
.notch-btn::before{left:-22px; background:radial-gradient(circle at 0 100%, transparent 21.5px, var(--notch) 22px)}
.notch-btn::after{right:-22px; background:radial-gradient(circle at 100% 100%, transparent 21.5px, var(--notch) 22px)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0 var(--blue); animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(30,107,242,.6)}70%{box-shadow:0 0 0 8px rgba(30,107,242,0)}100%{box-shadow:0 0 0 0 rgba(30,107,242,0)}}
.notch-btn svg{width:14px; height:14px; transition:transform .3s}
.notch.open .notch-btn svg{transform:rotate(180deg)}
.notch-menu{position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%) translateY(-6px); background:var(--surface); border-radius:20px; box-shadow:var(--shadow); padding:8px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s}
.notch.open .notch-menu{opacity:1; visibility:visible; transform:translateX(-50%)}
.notch-menu a{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; text-decoration:none; font-weight:600; color:var(--ink)}
.notch-menu a:hover{background:var(--surface-2)}
.notch-menu i{width:34px; height:34px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center}
.notch-menu svg{width:16px; height:16px}
.head-right{display:flex; gap:10px; align-items:center}
.round{width:46px; height:46px; border-radius:50%; border:0; background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 20px -12px rgba(0,0,0,.35)}
.round svg{width:19px; height:19px}
.menu-pill{display:flex; align-items:center; gap:12px; background:var(--btn); color:var(--btn-text); border:0; border-radius:999px; padding:8px 8px 8px 22px; font:700 .9rem var(--sans); letter-spacing:.06em; text-transform:uppercase; cursor:pointer}
.menu-pill span.ic{width:32px; height:32px; border-radius:50%; background:var(--btn-text); color:var(--btn); display:grid; place-items:center}
.menu-pill svg{width:16px; height:16px}
@media (max-width: 760px){ .brand span{display:none} .brand{padding:8px} .notch-btn{font-size:.82rem; padding:10px 18px 12px} .notch-btn .long{display:none} .menu-pill .lbl{display:none} .menu-pill{padding:7px} }

/* Overlay menu */
.overlay{position:fixed; inset:0; z-index:80; background:var(--ink); color:var(--bg); clip-path:circle(0% at calc(100% - 60px) 40px); transition:clip-path .7s cubic-bezier(.7,0,.2,1); display:flex; flex-direction:column; justify-content:center; padding:calc(env(safe-area-inset-top,0px) + 90px) 0 calc(env(safe-area-inset-bottom,0px) + 40px)}
.overlay.open{clip-path:circle(150% at calc(100% - 60px) 40px)}
.overlay nav{display:flex; flex-direction:column; gap:2px}
.overlay nav a{font-size:clamp(2.6rem, 7vw, 5.2rem); font-weight:700; letter-spacing:-.04em; line-height:1.08; text-decoration:none; color:var(--bg); width:max-content; opacity:0; transform:translateY(30px); transition:opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1), color .2s}
.overlay nav a:hover{color:var(--blue)}
.overlay.open nav a{opacity:1; transform:none}
.overlay.open nav a:nth-child(1){transition-delay:.25s} .overlay.open nav a:nth-child(2){transition-delay:.3s} .overlay.open nav a:nth-child(3){transition-delay:.35s} .overlay.open nav a:nth-child(4){transition-delay:.4s} .overlay.open nav a:nth-child(5){transition-delay:.45s} .overlay.open nav a:nth-child(6){transition-delay:.5s} .overlay.open nav a:nth-child(7){transition-delay:.55s} .overlay.open nav a:nth-child(8){transition-delay:.6s}
.overlay .close{position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); right:20px; background:var(--bg); color:var(--ink)}
.overlay .foot{margin-top:40px; color:color-mix(in srgb, var(--bg) 65%, transparent); display:flex; gap:24px; flex-wrap:wrap}
.overlay .foot a{color:inherit}

/* Hero */
.hero{padding:clamp(120px, 12vw, 150px) 0 60px}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(30px, 5vw, 80px); align-items:center}
.hero-title{font-size:clamp(3rem, 6vw, 5.6rem); line-height:1.08; margin-top:28px; letter-spacing:-.045em; font-weight:700}
.hero-title .hl{display:block; white-space:nowrap}
.pill{display:inline-block; width:1.3em; height:.8em; border-radius:999px; vertical-align:-.06em; background:radial-gradient(120% 120% at 70% 20%, #3E86FF 0%, #1546B8 40%, #071A4D 100%); position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -10px rgba(7,26,77,.8)}
.pill svg{position:absolute; inset:0; margin:auto; width:46%; height:62%; color:#fff}
.pill::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%); transform:translateX(-120%); animation:shine 4.5s 2.5s infinite}
@keyframes shine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.hero-lede{margin-top:30px; font-size:clamp(1.1rem, 1.5vw, 1.32rem); color:var(--muted); max-width:34ch; font-weight:400; line-height:1.5}
.hero-cta{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap}
.hero-card-wrap{justify-self:end; width:min(470px, 100%)}
.hero-card{border-radius:44px; overflow:hidden; aspect-ratio:960/1300; box-shadow:var(--shadow); background:#F4F4F2; position:relative}
.hero-card img, .about-card img{width:100%; height:100%; object-fit:cover}
.reveal-img{--rv:130; -webkit-mask-image:linear-gradient(to bottom, #000 calc(var(--rv) * 1% - 25%), transparent calc(var(--rv) * 1%)); mask-image:linear-gradient(to bottom, #000 calc(var(--rv) * 1% - 25%), transparent calc(var(--rv) * 1%))}
.sig{text-align:right; margin-top:26px}
.sig strong{display:block; font-size:clamp(2rem, 3vw, 2.6rem); letter-spacing:-.04em; line-height:1; color:var(--ink)}
.sig .script{display:inline-block; font-size:clamp(1.6rem, 2.2vw, 2rem); margin-top:4px}
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-title{font-size:min(10.2vw, 5rem)}
  .hero-card-wrap{justify-self:center; width:min(420px, 100%)}
}

/* Floating chat */
.fab{position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:55; width:62px; height:62px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; box-shadow:0 16px 30px -12px var(--blue); text-decoration:none}
.fab svg{width:26px; height:26px}
.fab:hover{transform:scale(1.06)}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4, 1fr); background:var(--surface); border-radius:32px; padding:10px; box-shadow:0 1px 0 var(--line)}
.stat{padding:26px 28px; border-radius:24px}
.stat + .stat{border-left:1px solid var(--line)}
.stat b{display:block; font-size:clamp(2.2rem, 4vw, 3.2rem); font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink)}
.stat > span{display:block; margin-top:8px; color:var(--muted); font-weight:500}
@media (max-width: 760px){ .stats{grid-template-columns:1fr 1fr} .stat:nth-child(3){border-left:0} .stat:nth-child(n+3){border-top:1px solid var(--line)} }

/* Sections */
.block{padding:clamp(80px, 10vw, 140px) 0}
.sec-head{display:flex; justify-content:space-between; align-items:end; gap:24px 40px; flex-wrap:wrap; margin-bottom:50px}
.sec-head .left{display:grid; gap:20px}
.sec-head p{max-width:40ch; color:var(--muted); font-size:1.1rem}

/* About */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px, 6vw, 96px); align-items:center}
.about-card{border-radius:44px; overflow:hidden; aspect-ratio:960/1368; box-shadow:var(--shadow); background:#F4F4F2}
.about-body h2{margin-top:22px}
.about-body .copy{margin-top:26px; color:var(--muted); font-size:1.12rem; max-width:56ch; display:grid; gap:14px}
.facts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:34px 0 0}
.facts div{background:var(--surface); border-radius:20px; padding:18px 20px}
.facts dt{font-size:.9rem; color:var(--muted)}
.facts dd{margin:4px 0 0; font-weight:700; color:var(--ink)}
@media (max-width: 900px){ .about-grid{grid-template-columns:1fr} .about-card{max-width:440px} }

/* Subjects bento */
.bento{display:grid; grid-template-columns:repeat(12, 1fr); gap:16px}
.card{background:var(--surface); border-radius:32px; padding:32px; display:flex; flex-direction:column; gap:12px; min-height:220px}
.card .ico{width:52px; height:52px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:8px}
.card .ico svg{width:24px; height:24px}
.card p{color:var(--muted)}
.c7{grid-column:span 7} .c5{grid-column:span 5} .c4{grid-column:span 4}
.card.dark{background:var(--ink); color:var(--bg)} .card.dark h3{color:var(--bg)} .card.dark p{color:color-mix(in srgb, var(--bg) 70%, transparent)}
.card.dark .ico{background:rgba(127,127,127,.18); color:var(--bg)}
.card.blue{background:var(--blue); color:#fff} .card.blue h3{color:#fff} .card.blue p{color:rgba(255,255,255,.85)} .card.blue .ico{background:rgba(255,255,255,.18); color:#fff}
.topics{columns:2; column-gap:26px; list-style:none; padding:0; margin:6px 0 0}
.topics li{padding:8px 0; border-bottom:1px solid var(--line); break-inside:avoid; font-weight:500}
.chips{margin-top:auto; padding-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:.85rem; font-weight:600; padding:.42em .9em; border-radius:999px; background:var(--blue-soft); color:var(--blue)}
.steps{list-style:none; padding:0; margin:6px 0 0; display:grid; gap:14px; counter-reset:s}
.steps li{counter-increment:s; display:flex; gap:16px; align-items:baseline}
.steps li::before{content:counter(s); width:30px; height:30px; flex:none; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem; transform:translateY(4px)}
.steps b{display:block; color:var(--bg)} .steps span{color:color-mix(in srgb, var(--bg) 68%, transparent)}
@media (max-width: 960px){ .c7,.c5,.c4{grid-column:span 12} }
@media (max-width: 520px){ .topics{columns:1} }

/* Marquee */
.marquee{overflow:hidden; padding:26px 0; background:var(--ink); color:var(--bg); transform:rotate(-1.5deg); margin:10px 0; width:100%}
.marquee-track{display:flex; width:max-content}
.marquee-group{display:flex; align-items:center; gap:36px; padding-right:36px; font-size:clamp(1.8rem, 3.6vw, 3rem); font-weight:700; letter-spacing:-.03em; white-space:nowrap}
.marquee-group .script{color:var(--blue); font-size:1.2em}
.marquee-group svg{width:26px; height:26px; color:var(--blue); flex:none}

/* Notes (horizontal on wide screens) */
.notes{padding:clamp(80px, 10vw, 140px) 0; overflow:hidden}
.note-track{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; width:min(1240px, 100% - 40px); margin-inline:auto}
.note-intro{grid-column:1 / -1; display:flex; flex-direction:column; gap:22px; margin-bottom:30px}
@media (max-width: 960px){ .note-track{grid-template-columns:1fr 1fr} }
@media (max-width: 620px){ .note-track{grid-template-columns:1fr} }
.note-intro p{color:var(--muted); font-size:1.1rem; max-width:34ch}
.note{background:var(--surface); border-radius:32px; padding:16px 16px 26px; display:flex; flex-direction:column; gap:10px}
.art{width:100%; aspect-ratio:1.15; display:block; border-radius:22px; background:var(--bg); margin-bottom:10px}
.art .lns path, .art .alt path{fill:none; stroke:var(--ink); stroke-linecap:round; stroke-linejoin:round}
.art .lns path{stroke-width:2.4}
.art .alt path{stroke-width:1.2; opacity:.35}
.art .acc{fill:none; stroke:var(--blue); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.note .meta, .note h3, .note p, .note a{margin-inline:10px}
.note .meta{display:flex; gap:8px; flex-wrap:wrap}
.note h3{font-size:1.4rem}
.note p{color:var(--muted); font-size:1rem}
.note a{margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink)}
.note a i{width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--surface); display:grid; place-items:center; transition:transform .3s}
.note a:hover i{transform:rotate(-45deg)}
.note a svg{width:14px; height:14px}

/* Journey */
.tl-wrap{position:relative; padding-left:50px; max-width:880px}
.tl-rail,.tl-fill{position:absolute; left:11px; top:14px; bottom:14px; width:2px; border-radius:2px; background:var(--line)}
.tl-fill{background:var(--blue); transform-origin:50% 0}
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.timeline li{position:relative; background:var(--surface); border-radius:26px; padding:24px 28px; display:grid; grid-template-columns:120px 1fr; gap:6px 24px; align-items:baseline}
.timeline li::before{content:""; position:absolute; left:-46px; top:30px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:3px solid var(--blue)}
.year{font-size:2rem; font-weight:700; letter-spacing:-.04em; color:var(--blue)}
.timeline h3{font-size:1.25rem}
.timeline p{margin-top:4px; color:var(--muted)}
@media (max-width: 620px){ .timeline li{grid-template-columns:1fr} }

/* Voices */
.quotes{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px}
@media (max-width: 760px){ .quotes{grid-template-columns:1fr} }
.quote{margin:0; padding:32px; border-radius:32px; background:var(--surface); display:flex; flex-direction:column; gap:24px}
.quote .stars{color:var(--blue); letter-spacing:3px}
.quote blockquote{margin:0; font-size:1.2rem; line-height:1.5; font-weight:500; color:var(--ink)}
.quote figcaption{margin-top:auto; display:flex; align-items:center; gap:12px; font-weight:700; color:var(--ink)}
.quote figcaption i{width:42px; height:42px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; font-style:normal}
.quote figcaption span{display:block; font-weight:500; color:var(--muted); font-size:.9rem}

/* Contact */
.contact-card{background:var(--ink); color:var(--bg); border-radius:44px; padding:clamp(28px, 5vw, 64px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 5vw, 64px)}
.contact-card h2{color:var(--bg)}
.contact-card .lead{margin-top:20px; color:color-mix(in srgb, var(--bg) 70%, transparent); font-size:1.12rem; max-width:38ch}
.info{list-style:none; padding:0; margin:34px 0 0; display:grid; gap:14px}
.info li{display:flex; gap:14px; align-items:center}
.info i{width:46px; height:46px; border-radius:50%; background:rgba(127,127,127,.2); display:grid; place-items:center; flex:none}
.info svg{width:18px; height:18px}
.info small{display:block; color:color-mix(in srgb, var(--bg) 60%, transparent); font-size:.85rem}
.info a,.info b{font-weight:700; text-decoration:none; color:var(--bg)}
form{background:var(--surface); color:var(--text); border-radius:30px; padding:clamp(22px, 3.5vw, 34px); display:grid; gap:16px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{display:grid; gap:7px; font-weight:600; font-size:.94rem; color:var(--ink)}
input,select,textarea{font:inherit; font-weight:500; font-size:1rem; color:var(--ink); background:var(--bg); border:1.5px solid transparent; border-radius:16px; padding:.85em 1em; width:100%}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue)}
textarea{min-height:120px; resize:vertical}
.err{color:#D93025; font-size:.9rem; font-weight:600; min-height:1.2em}
@media (max-width: 900px){ .contact-card{grid-template-columns:1fr} }
@media (max-width: 520px){ .row{grid-template-columns:1fr} }
footer{padding:40px 0 calc(50px + env(safe-area-inset-bottom,0px)); color:var(--muted); font-size:.95rem}
.foot-in{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; padding-right:76px}
.foot-in .script{font-size:1.6rem}

/* Cursor */
.cursor{position:fixed; left:0; top:0; width:40px; height:40px; margin:-20px 0 0 -20px; border:1.5px solid var(--blue); border-radius:50%; pointer-events:none; z-index:100; opacity:0; transition:width .25s, height .25s, margin .25s, background .25s, opacity .3s}
.cursor.on{opacity:.7}
.cursor.big{width:76px; height:76px; margin:-38px 0 0 -38px; background:var(--blue-soft)}
.cursor-dot{position:fixed; left:0; top:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--blue); pointer-events:none; z-index:100; opacity:0}
.cursor-dot.on{opacity:1}
@media (pointer: coarse){ .cursor,.cursor-dot{display:none} }

/* School and college */
.roles{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.role{display:flex; align-items:center; gap:12px; background:var(--surface); padding:9px 20px 9px 9px; border-radius:20px; text-decoration:none; box-shadow:0 10px 24px -18px rgba(0,0,0,.4); transition:transform .25s}
.role:hover{transform:translateY(-2px)}
.role i{width:44px; height:44px; border-radius:14px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; flex:none}
.role.col i{background:var(--blue); color:#fff}
.role svg{width:22px; height:22px}
.role small{display:block; color:var(--muted); font-size:.82rem; font-weight:500; line-height:1.2}
.role b{display:block; color:var(--ink); font-size:1.05rem; line-height:1.3}
.where{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.lvl{background:var(--surface); border-radius:36px; padding:clamp(26px, 3.5vw, 40px); display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.lvl-top{display:flex; justify-content:space-between; align-items:center; width:100%}
.lvl .ico{width:58px; height:58px; border-radius:18px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center}
.lvl .ico svg{width:28px; height:28px}
.lvl .tag{font-weight:700; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; padding:.5em 1em; border-radius:999px; background:var(--bg); color:var(--ink)}
.lvl h3{font-size:clamp(2rem, 3.4vw, 2.8rem); letter-spacing:-.04em}
.lvl p{color:var(--muted); font-size:1.1rem; max-width:44ch}
.lvl-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.lvl-list li{padding:.5em 1em; border-radius:999px; background:var(--blue-soft); color:var(--blue); font-weight:600; font-size:.95rem}
.lvl .btn{margin-top:auto}
.lvl.col{background:var(--ink); color:var(--bg)}
.lvl.col h3{color:var(--bg)}
.lvl.col p{color:color-mix(in srgb, var(--bg) 70%, transparent)}
.lvl.col .ico{background:var(--blue); color:#fff}
.lvl.col .tag{background:var(--blue); color:#fff}
.lvl.col .lvl-list li{background:rgba(127,127,127,.2); color:var(--bg)}
@media (max-width: 860px){ .where{grid-template-columns:1fr} }

/* Reviews */
.rv-bar{display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; background:var(--surface); border-radius:28px; padding:16px 16px 16px 28px; margin-bottom:18px}
.rv-score{display:flex; align-items:center; gap:14px; margin-right:auto}
.rv-invite{margin:0 auto 0 0; font-weight:600; font-size:1.1rem; color:var(--ink)}
.rv-score b{font-size:2.6rem; font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink)}
.rv-score .stars-lg{font-size:1.15rem}
.rv-score span{color:var(--muted); font-weight:500; font-size:.95rem}
.quote.fresh{animation:fresh 1.8s cubic-bezier(.2,.7,.2,1)}
.quote figcaption .who{font-weight:700; color:var(--ink); font-size:1rem}
.quote .stars .off{color:var(--line)}
.quote blockquote{white-space:pre-line; overflow-wrap:anywhere}
.rv-dialog{border:0; padding:0; background:transparent; width:min(580px, calc(100% - 28px)); max-width:none; max-height:calc(100dvh - 28px); overflow:auto; color:var(--text)}
.rv-dialog::backdrop{background:rgba(0,0,0,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.rv-dialog[open]{animation:pop .35s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{from{opacity:0; transform:translateY(20px) scale(.97)}}
.rv-dialog form{position:relative; box-shadow:var(--shadow)}
.rv-x{position:absolute; top:16px; right:16px; width:40px; height:40px; background:var(--bg); box-shadow:none}
@media (max-width: 620px){ .rv-bar{padding:20px} .rv-bar .btn{width:100%; justify-content:space-between} }

[hidden]{display:none !important}
.hero-rating{margin-top:24px; display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--muted); text-decoration:none}
.hero-rating .s{color:var(--blue); letter-spacing:2px}
.hero-rating b{color:var(--ink)}
.preview-note{border:1.5px dashed var(--blue); background:var(--surface); color:var(--ink); padding:14px 20px; border-radius:18px; margin-bottom:16px; font-weight:500}
.rv-top{display:grid; grid-template-columns:.8fr 1.2fr; gap:16px; margin-bottom:16px}
.rv-summary{background:var(--surface); border-radius:32px; padding:32px; display:flex; flex-direction:column; gap:24px}
.live{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.9rem; color:var(--muted); background:var(--bg); padding:7px 14px; border-radius:999px; width:max-content}
.live.off .dot{background:var(--muted); animation:none}
.avg{display:flex; align-items:center; gap:18px}
.avg b{font-size:clamp(3.4rem, 6vw, 4.6rem); font-weight:700; letter-spacing:-.05em; line-height:1; color:var(--ink)}
.stars-lg{font-size:1.5rem; letter-spacing:2px; color:var(--blue)}
.avg span{color:var(--muted); font-weight:500}
.bars{display:grid; gap:9px}
.bar{display:grid; grid-template-columns:14px 1fr 30px; align-items:center; gap:12px; font-weight:600; font-size:.9rem; color:var(--muted)}
.bar i{height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; display:block}
.bar em{display:block; width:0; height:100%; background:var(--blue); border-radius:99px; transition:width .9s cubic-bezier(.2,.7,.2,1)}
.bar small{text-align:right}
.rv-form h3{font-size:1.5rem}
.rate{border:0; padding:0; margin:0; min-width:0}
.rate legend{font-weight:600; font-size:.94rem; color:var(--ink); padding:0; margin-bottom:6px}
.rate-stars{display:flex; gap:6px}
.rate-stars input{position:absolute; opacity:0; width:1px; height:1px}
.rate-stars label{font-size:2.3rem; line-height:1; color:var(--line); cursor:pointer; transition:transform .15s, color .15s; display:block}
.rate-stars label:hover{transform:scale(1.15)}
.rate-stars input:focus-visible + label{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
.rate-stars[data-v="1"] label:nth-of-type(-n+1) .rate-stars[data-v="2"] label:nth-of-type(-n+2) .rate-stars[data-v="3"] label:nth-of-type(-n+3) .rate-stars[data-v="4"] label:nth-of-type(-n+4) .rate-stars[data-v="5"] label:nth-of-type(-n+5){color:var(--blue)}
.count{justify-self:end; color:var(--muted); font-weight:500; font-size:.85rem; margin-top:-2px}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.rv-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.rv-actions small{color:var(--muted); font-size:.9rem}
.btn:disabled{opacity:.6; cursor:progress}
.ok{background:var(--blue-soft); color:var(--blue); font-weight:600; padding:14px 18px; border-radius:16px}
.rv-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start}
.rv-card{background:var(--surface); border-radius:28px; padding:26px; display:flex; flex-direction:column; gap:16px}
.rv-head{display:flex; align-items:center; gap:12px}
.rv-head .av{width:44px; height:44px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; font-style:normal; font-weight:700; flex:none}
.rv-head b{display:block; color:var(--ink); line-height:1.2}
.rv-head div span{font-size:.88rem; color:var(--muted)}
.rv-stars{margin-left:auto; color:var(--blue); letter-spacing:1px; white-space:nowrap; align-self:flex-start}
.rv-stars .off, .stars-lg .off, .hero-rating .off{color:var(--line)}
.rv-card p{color:var(--ink); font-size:1.05rem; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere; margin:0}
.rv-card.fresh{animation:fresh 1.8s cubic-bezier(.2,.7,.2,1)}
@keyframes fresh{0%{opacity:0; transform:translateY(24px) scale(.97); box-shadow:0 0 0 3px var(--blue)} 35%{opacity:1; transform:none; box-shadow:0 0 0 3px var(--blue)} 100%{box-shadow:0 0 0 0 transparent}}
.rv-empty{grid-column:1 / -1; background:var(--surface); border-radius:28px; padding:40px 24px; text-align:center; color:var(--muted); font-weight:500; margin:0}
.rv-skel{height:170px; border-radius:28px; background:linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size:200% 100%; animation:sk 1.3s infinite linear}
@keyframes sk{to{background-position:-200% 0}}
.rv-more{display:flex; justify-content:center; margin-top:26px}
.toast{position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom,0px)); transform:translate(-50%, 200%); background:var(--ink); color:var(--bg); padding:14px 22px; border-radius:999px; font-weight:600; z-index:85; transition:transform .45s cubic-bezier(.2,.7,.2,1); max-width:calc(100% - 120px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.toast.show{transform:translate(-50%, 0)}
@media (max-width: 960px){ .rv-top{grid-template-columns:1fr} .rv-list{grid-template-columns:1fr 1fr} }
@media (max-width: 620px){ .rv-list{grid-template-columns:1fr} .toast{left:20px; max-width:calc(100% - 112px); transform:translateY(200%)} .toast.show{transform:none} }
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* ---------- Multi-page: loading screen, page tops, explore, next page ---------- */
.loader{position:fixed; inset:0; z-index:200; background:#000; color:#fff; display:none; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; padding:24px; transform:translateY(0); transition:transform .75s cubic-bezier(.76,0,.24,1); will-change:transform}
.js .loader{display:flex}
.loader.out{transform:translateY(-100%)}
.loader.enter{transform:translateY(100%); transition:none}
.loader.gone{visibility:hidden}
.ld-mark{width:58px; height:58px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; font-weight:800; font-size:1.4rem; animation:ldPop .6s cubic-bezier(.2,.7,.2,1) both}
.ld-title{font-size:clamp(2.6rem, 8vw, 6rem); font-weight:700; letter-spacing:-.045em; line-height:1.15}
.ld-title .ld-w{display:inline-block; animation:ldUp .8s cubic-bezier(.2,.7,.2,1) both}
.ld-title .script{color:#5C94FF; font-size:1.15em; animation-delay:.12s}
.ld-sub{color:rgba(255,255,255,.55); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; margin:0}
.ld-bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.1)}
.ld-bar i{display:block; height:100%; background:#1E6BF2; transform-origin:0 50%; animation:ldBar 1.1s cubic-bezier(.4,0,.2,1) both}
@keyframes ldUp{from{opacity:0; transform:translateY(60%)}}
@keyframes ldPop{from{opacity:0; transform:scale(.6)}}
@keyframes ldBar{from{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){ .loader{display:none !important} }

.page-first{padding-top:clamp(130px, 13vw, 170px) !important}
.page-h1{font-size:clamp(2.8rem, 6.4vw, 5.4rem); letter-spacing:-.045em}
.contact-card h1{color:var(--bg)}
.overlay nav a[aria-current="page"]{color:var(--blue)}

.explore{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.xp{background:var(--surface); border-radius:28px; padding:26px; display:flex; flex-direction:column; gap:10px; text-decoration:none; min-height:240px; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.xp:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.xp .ico{width:52px; height:52px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:6px}
.xp .ico svg{width:24px; height:24px}
.xp b{font-size:1.45rem; letter-spacing:-.03em; color:var(--ink)}
.xp .t{color:var(--muted)}
.xp .go{margin-top:auto; width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; transition:transform .35s}
.xp .go svg{width:18px; height:18px}
.xp:hover .go{transform:rotate(-45deg)}
@media (max-width: 960px){ .explore{grid-template-columns:1fr 1fr} }
@media (max-width: 520px){ .explore{grid-template-columns:1fr} .xp{min-height:0} }

.next-wrap{padding:0 0 clamp(60px, 8vw, 110px)}
.next{display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--ink); color:var(--bg); border-radius:40px; padding:clamp(28px, 5vw, 56px); text-decoration:none}
.next small{display:block; text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:.8rem; color:color-mix(in srgb, var(--bg) 60%, transparent)}
.next b{display:block; font-size:clamp(2.2rem, 6vw, 4.6rem); font-weight:700; letter-spacing:-.045em; line-height:1.08; margin-top:8px}
.next .script{color:var(--blue)}
.next .go{width:clamp(58px, 8vw, 92px); height:clamp(58px, 8vw, 92px); border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; flex:none; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.next .go svg{width:40%; height:40%}
.next:hover .go{transform:rotate(-45deg) scale(1.05)}

.foot-nav{display:flex; flex-wrap:wrap; gap:6px 18px}
.foot-nav a{text-decoration:none; color:var(--muted); font-weight:600}
.foot-nav a:hover{color:var(--ink)}