:root{
  --primary:#0F766E;--teal-light:#14B8A6;--accent:#F59E0B;--coral:#F43F5E;
  --ink:#0B1324;--surface:#FFFBF5;--muted:#64748B;--tint:#E6F4F1;--white:#fff;
  --grad:linear-gradient(135deg,#0F766E 0%,#14B8A6 45%,#F59E0B 100%);
  --radius:20px;--shadow:0 10px 30px -12px rgba(11,19,36,.18);--shadow-lg:0 24px 50px -18px rgba(15,118,110,.35);
  --on-accent:#0B1324;--btn-bg:#0F766E;--btn-bg-h:#0c5f59;
  --card:#fff;--tint-soft:#E6F4F1;--tint-warm:#fff1d1;--tint-rose:#ffe3e8;
  --line-card:#eef3f1;--line:#e8f0ee;--line-chip:#e2ece9;--line-field:#d6e4e1;--btn-line:rgba(15,118,110,.25);
  --text-soft:#334155;--text-soft2:#475569;--tag-bg:#fff4dc;--tag-fg:#7a4a00;
  --header-bg:rgba(255,251,245,.85);--hdr-line:rgba(15,118,110,.1);--bnav-bg:rgba(255,255,255,.92);--bnav-line:rgba(15,118,110,.12);
  --glass:rgba(255,255,255,.65);--glass-line:rgba(255,255,255,.9);--field-bg:#fff;--seg-on:#fff;--seg-shadow:0 2px 8px rgba(11,19,36,.12);
  --hero-glow:var(--tint);--blob-op:.55;--blob-op2:.55;--blob-op3:.25;
  --stats-bg:#0B1324;--footer-bg:#0B1324;--chip-shadow:0 4px 12px -6px rgba(11,19,36,.15);--tile-shadow:0 6px 16px -10px rgba(11,19,36,.2);--det-shadow:0 4px 14px -10px rgba(11,19,36,.2);
  --drawer-shadow:-20px 0 40px -20px rgba(0,0,0,.3);--backdrop:rgba(11,19,36,.5);--toggle-ic:#B45309;--bubble-bg:#fff;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230F766E' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  color-scheme:light;
  --font-head:"Baloo Da 2",system-ui,sans-serif;--font-body:"Hind Siliguri",system-ui,sans-serif;
  --header-h:56px;--bnav-h:64px;
}
:root[data-theme="dark"]{
  --primary:#2DD4BF;--teal-light:#2DD4BF;--accent:#FBBF24;--coral:#FB7185;
  --ink:#E8EEF5;--surface:#0B1220;--muted:#94A3B8;--tint:#14323A;--white:#121B2E;
  --shadow:0 12px 28px -14px rgba(0,0,0,.65);--shadow-lg:0 24px 48px -20px rgba(0,0,0,.75),0 0 40px -22px rgba(45,212,191,.5);
  --on-accent:#0B1324;--btn-bg:#0F766E;--btn-bg-h:#14877d;
  --card:#121B2E;--tint-soft:#0F1D2E;--tint-warm:#2B2416;--tint-rose:#2E1B26;
  --line-card:rgba(94,234,212,.14);--line:rgba(94,234,212,.14);--line-chip:rgba(94,234,212,.18);--line-field:rgba(148,163,184,.28);--btn-line:rgba(94,234,212,.3);
  --text-soft:#C3CEDB;--text-soft2:#B6C2D2;--tag-bg:#2B2416;--tag-fg:#FCD34D;
  --header-bg:rgba(11,18,32,.82);--hdr-line:rgba(94,234,212,.14);--bnav-bg:rgba(14,22,38,.92);--bnav-line:rgba(94,234,212,.16);
  --glass:rgba(18,27,46,.72);--glass-line:rgba(94,234,212,.2);--field-bg:#0E1626;--seg-on:#1F2D49;--seg-shadow:0 2px 10px rgba(0,0,0,.45);
  --hero-glow:rgba(20,184,166,.16);--blob-op:.2;--blob-op2:.14;--blob-op3:.12;
  --stats-bg:linear-gradient(135deg,#0F2B3A 0%,#12233F 100%);--footer-bg:#070C17;--chip-shadow:0 4px 14px -8px rgba(0,0,0,.7);--tile-shadow:0 6px 16px -10px rgba(0,0,0,.7);--det-shadow:0 4px 14px -10px rgba(0,0,0,.7);
  --drawer-shadow:-20px 0 40px -20px rgba(0,0,0,.8);--backdrop:rgba(3,7,15,.7);--toggle-ic:#FCD34D;--bubble-bg:#121B2E;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%232DD4BF' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.75;color:var(--ink);background:var(--surface);padding-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));overflow-x:hidden;min-width:320px}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.3;margin:0;color:var(--ink)}
h1{font-size:clamp(1.75rem,1.1rem + 3.4vw,3.6rem);overflow-wrap:break-word;font-weight:800}
h2{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
svg{display:block}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:8px}
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:max(14px,env(safe-area-inset-left,0px),min(16px,4vw))}
.section{padding-block:clamp(48px,7vw,96px)}
.section-head{text-align:center;max-width:640px;margin:0 auto 36px}
.section-head p{color:var(--muted);margin-top:8px}
.eyebrow{display:inline-block;font-weight:600;font-size:.85rem;letter-spacing:.04em;color:var(--primary);background:var(--tint);padding:2px 14px;border-radius:99px;margin-bottom:10px}
.skip{position:absolute;left:8px;top:-60px;background:var(--btn-bg);color:#fff;padding:10px 16px;border-radius:10px;z-index:200}
.skip:focus{top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:99px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--btn-bg);color:#fff;box-shadow:0 8px 20px -8px rgba(15,118,110,.7)}
.btn-primary:hover{background:var(--btn-bg-h);box-shadow:0 12px 24px -8px rgba(15,118,110,.8)}
.btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px -8px rgba(245,158,11,.7)}
.btn-accent:hover{background:#fbab24}
:root[data-theme="dark"] .btn-accent{box-shadow:0 8px 24px -8px rgba(251,191,36,.45)}
:root[data-theme="dark"] .btn-primary{box-shadow:0 8px 24px -8px rgba(20,184,166,.5)}
.btn-ghost{background:var(--glass);border:1px solid var(--btn-line);color:var(--primary)}

/* Header */
html{scroll-padding-top:72px;scrollbar-gutter:stable}
.header{--hh:58px;position:sticky;top:0;z-index:100;height:var(--hh);background:var(--header-bg);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--hdr-line);transition:height .25s ease,box-shadow .25s ease,background .25s}
.header.scrolled{box-shadow:0 10px 28px -16px rgba(11,19,36,.4)}
.header .container{height:100%;display:flex;align-items:center;gap:8px}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:800;font-size:1.3rem;min-height:44px;flex:none;white-space:nowrap}
.logo span{line-height:1;position:relative;top:.03em}
.logo svg{transition:transform .3s}
.logo:hover svg{transform:rotate(-8deg) scale(1.06)}
.logo span b{color:#D97706}
:root[data-theme="dark"] .logo span b{color:var(--accent)}
.nav{display:none;margin-left:auto;gap:2px;align-items:center}
.nav a{position:relative;padding:10px 14px;border-radius:12px;font-weight:500;min-height:44px;display:inline-flex;align-items:center;transition:color .2s}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nav a:hover,.nav a.active{color:var(--primary)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.header-prefs{display:none;align-items:center;gap:8px}
.lang-toggle{display:inline-flex;min-height:44px;min-width:44px;align-items:center;justify-content:center;gap:2px;padding:0 12px;border:1px solid var(--btn-line);border-radius:99px;background:var(--card);cursor:pointer;font-weight:600;font-size:.9rem}
.lang-toggle .on{color:var(--primary)}
.hamburger{width:44px;height:44px;border:0;background:var(--tint);border-radius:14px;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.hamburger:active{transform:scale(.94)}
.hamburger span{display:block;width:20px;height:2px;background:var(--primary);border-radius:2px;position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--primary);border-radius:2px}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}

/* Tutor CTA button (marigold, shimmer, pulse) */
.btn-tutor{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,#FBBF24 0%,#F59E0B 55%,#F97316 100%);color:#2A1700;font-weight:700;box-shadow:0 8px 20px -8px rgba(245,158,11,.85);animation:tpulse 2.8s ease-out infinite}
.btn-tutor::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);transform:translateX(-130%);animation:shimmer 3.6s ease-in-out infinite}
.btn-tutor:hover{background:linear-gradient(120deg,#FCD34D 0%,#FBA824 55%,#FB7A2A 100%);transform:translateY(-2px)}
.btn-tutor:active{transform:scale(.97)}
.btn-tutor .bt-ic{width:18px;height:18px;flex:none;animation:sparkle 2.2s ease-in-out infinite}
.btn-tutor .bt-ar{width:20px;height:20px;flex:none;transition:transform .25s}
.btn-tutor:hover .bt-ar{transform:translateX(4px)}
.btn-tutor.lg{min-height:52px;font-size:1.05rem}
.btn-tutor.xl{min-height:60px;font-size:1.12rem;padding:0 22px;width:100%;line-height:1.3;text-align:center}
@keyframes shimmer{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes tpulse{0%{box-shadow:0 8px 20px -8px rgba(245,158,11,.85),0 0 0 0 rgba(245,158,11,.5)}70%,100%{box-shadow:0 8px 20px -8px rgba(245,158,11,.85),0 0 0 12px rgba(245,158,11,0)}}
@keyframes sparkle{50%{transform:scale(.72) rotate(25deg)}}
.become{padding:0 14px;min-height:44px;font-size:.9rem;gap:6px;white-space:nowrap}
.become .bt-full{display:none}
.drawer-backdrop{position:fixed;inset:0;background:var(--backdrop);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:150}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,90vw);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);z-index:160;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;box-shadow:var(--drawer-shadow)}
.drawer.open{transform:none;visibility:visible}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer-top{display:flex;align-items:center;justify-content:space-between;flex:none}
.drawer-brand{font-family:var(--font-head);font-weight:800;font-size:1.25rem}
.drawer-brand b{color:#D97706}
:root[data-theme="dark"] .drawer-brand b{color:var(--accent)}
.drawer-close{width:44px;height:44px;border:0;background:var(--tint);border-radius:14px;font-size:1.5rem;cursor:pointer;color:var(--primary);line-height:1}
.drawer-cta{position:relative;overflow:hidden;flex:none;display:flex;align-items:center;gap:12px;padding:16px 14px;border-radius:22px;color:#fff;background:radial-gradient(120% 120% at 100% 0%,rgba(251,191,36,.45),transparent 55%),linear-gradient(135deg,#0B5F59,#0F766E 55%,#0E7490);box-shadow:0 14px 28px -14px rgba(15,118,110,.8)}
.drawer-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);transform:translateX(-130%);animation:shimmer 4s ease-in-out infinite;pointer-events:none}
.dc-ic{flex:none;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#2A1700;display:grid;place-items:center}
.dc-ic svg{width:24px;height:24px;animation:sparkle 2.2s ease-in-out infinite}
.dc-tx{min-width:0;flex:1}
.dc-tx b{display:block;font-family:var(--font-head);font-size:1.2rem;line-height:1.25}
.dc-tx small{display:block;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.92)}
.dc-go{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:#0F766E;display:grid;place-items:center}
.dc-go svg{width:18px;height:18px}
.drawer-links{display:grid;gap:2px;flex:none}
.drawer-links a{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 10px;border-radius:16px;font-weight:600;font-size:1.1rem;transition:background .2s}
.drawer-links a:hover,.drawer-links a:active{background:var(--tint)}
.drawer-links i{flex:none;width:40px;height:40px;border-radius:13px;background:var(--tint);color:var(--primary);display:grid;place-items:center}
.drawer-links i svg{width:22px;height:22px}
.drawer-prefs{flex:none;display:grid;gap:14px;margin:4px 0 0;padding:14px 12px;border-radius:18px;background:var(--tint-soft);border:1px solid var(--line)}
.pref-row{display:grid;gap:6px}
.pref-label{font-size:.82rem;font-weight:600;color:var(--primary);padding:0 2px}
.pref-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--card);border:1px solid var(--line-field)}
.pref-seg button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 8px;border:0;border-radius:11px;background:transparent;color:var(--text-soft);font-weight:600;font-size:1rem;cursor:pointer;transition:background .2s,color .2s}
.pref-seg button svg{width:20px;height:20px;flex:none;color:var(--toggle-ic)}
.pref-seg button[aria-pressed="true"]{background:var(--btn-bg);color:#fff;box-shadow:var(--seg-shadow)}
.pref-seg button[aria-pressed="true"] svg{color:#fff}
:root[data-theme="dark"] .pref-seg button[aria-pressed="true"]{color:#04201c}
:root[data-theme="dark"] .pref-seg button[aria-pressed="true"] svg{color:#04201c}

/* Bottom nav */
.bnav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));z-index:90;display:grid;grid-template-columns:repeat(5,1fr);background:var(--bnav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--bnav-line);padding-bottom:env(safe-area-inset-bottom)}
.bnav a{min-width:0;padding-inline:2px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:clamp(.66rem,.5rem + .9vw,.76rem);line-height:1.3;color:var(--muted);min-height:44px}
.bnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bnav a[aria-current]{color:var(--primary);font-weight:600}
.bnav .post{color:var(--ink);font-weight:700}
.bnav .post i{width:52px;height:52px;margin-top:-26px;border-radius:50%;background:linear-gradient(135deg,#FBBF24,#F59E0B 60%,#F97316);color:#2A1700;display:grid;place-items:center;border:4px solid var(--surface);box-shadow:0 8px 18px -4px rgba(245,158,11,.9);animation:glow 2.6s ease-out infinite}
.bnav .post i svg{animation:sparkle 2.2s ease-in-out infinite}
@keyframes glow{0%{box-shadow:0 8px 18px -4px rgba(245,158,11,.9),0 0 0 0 rgba(245,158,11,.5)}70%,100%{box-shadow:0 8px 18px -4px rgba(245,158,11,.9),0 0 0 14px rgba(245,158,11,0)}}

/* Hero */
.hero{position:relative;padding-block:clamp(24px,6vw,40px) 48px;overflow:hidden;background:radial-gradient(120% 80% at 80% 0%,var(--hero-glow),transparent 60%)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:var(--blob-op);will-change:transform;pointer-events:none}
.blob.b1{width:280px;height:280px;background:var(--teal-light);top:-60px;left:-80px;animation:float1 14s ease-in-out infinite}
.blob.b2{width:240px;height:240px;background:var(--accent);opacity:var(--blob-op2);top:120px;right:-90px;animation:float2 17s ease-in-out infinite}
.blob.b3{width:200px;height:200px;background:var(--coral);opacity:var(--blob-op3);bottom:-60px;left:35%;animation:float3 20s ease-in-out infinite}
@keyframes float1{50%{transform:translate(60px,40px) scale(1.15)}}
@keyframes float2{50%{transform:translate(-50px,60px) scale(1.1)}}
@keyframes float3{50%{transform:translate(40px,-50px) scale(1.2)}}
.hero-inner{position:relative;text-align:center}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:560px;margin:14px auto 20px;color:var(--text-soft);font-size:clamp(1.02rem,1rem + .4vw,1.2rem)}
.search{position:relative;text-align:left;display:grid;gap:12px;padding:clamp(14px,4.5vw,18px);background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-line);border-radius:28px;box-shadow:var(--shadow-lg)}
.field{display:grid;gap:2px}
.field label,.seg legend{font-size:.8rem;font-weight:600;color:var(--primary);padding:0 4px}
.field select,.field input{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line-field);border-radius:14px;background:var(--field-bg);appearance:none;-webkit-appearance:none}
.field input::placeholder{color:var(--muted);opacity:1}
.field select{background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.seg{border:0;margin:0;padding:0;display:grid;gap:2px}
.seg div{display:grid;grid-template-columns:1fr 1fr;background:var(--tint);border-radius:14px;padding:4px;min-height:48px}
.seg label{position:relative;display:grid;place-items:center;border-radius:11px;cursor:pointer;font-weight:600;min-height:44px}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg label:has(input:checked){background:var(--seg-on);color:var(--primary);box-shadow:var(--seg-shadow)}
.seg label:has(input:focus-visible){outline:3px solid var(--primary)}
.search .btn{min-height:52px;font-size:1.05rem}
.trust{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-top:20px;color:var(--text-soft);font-size:.92rem}
.trust span{display:inline-flex;align-items:center;gap:6px}

/* Hero scene */
.hero-scene{position:relative;width:100%;max-width:420px;margin:24px auto 0;aspect-ratio:480/420;-webkit-tap-highlight-color:transparent}
.scene-svg{width:100%;height:100%;overflow:visible}
.scene-svg text{font-family:var(--font-head);font-weight:800}
.scene-svg .lyr{will-change:transform}
.ch,.jmp,.bob,.eyes,.wave,.pump,.wing,.bdg,.orb,.spk{transform-box:fill-box}
.ch,.jmp,.bob{transform-origin:50% 100%}
.ch{animation:popIn .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--dl,0s)}
@keyframes popIn{from{opacity:0;transform:translateY(30px) scale(.5)}}
.bob{animation:bob 3.4s ease-in-out infinite var(--b,0s)}
@keyframes bob{50%{transform:scale(1.012,1.025)}}
.eyes{transform-origin:center;animation:blink 4.8s infinite var(--e,0s)}
@keyframes blink{0%,93%,100%{transform:none}96%{transform:scaleY(.1)}}
.wave{transform-origin:10% 92%;animation:wave 2.6s ease-in-out infinite}
@keyframes wave{0%,62%,100%{transform:none}10%,30%,50%{transform:rotate(-16deg)}20%,40%{transform:rotate(8deg)}}
.pump{transform-origin:0 100%;animation:pump 3s ease-in-out infinite}
@keyframes pump{50%{transform:rotate(-9deg)}}
.wing{transform-origin:50% 8%;animation:flap 1.8s ease-in-out infinite}
.wing.r{animation-name:flapR}
@keyframes flap{50%{transform:rotate(16deg)}}
@keyframes flapR{50%{transform:rotate(-16deg)}}
.bdg{transform-origin:center;animation:drift 5.2s ease-in-out infinite var(--dl,0s)}
@keyframes drift{50%{transform:translateY(-10px) rotate(5deg)}}
.orb{transform-origin:center;animation:spin 2.8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.spk{transform-origin:center;animation:twinkle 2.6s ease-in-out infinite var(--dl,0s)}
@keyframes twinkle{50%{transform:scale(.35);opacity:.35}}
.jmp.go{animation:jump .7s cubic-bezier(.3,.7,.4,1)}
@keyframes jump{15%{transform:scale(1.08,.9)}45%{transform:translateY(-34px) scale(.95,1.06)}75%{transform:scale(1.05,.95)}}
.hero-scene.off *{animation-play-state:paused!important}
.bubble{position:absolute;left:0;top:0;width:max-content;max-width:min(58%,190px);padding:4px 12px;background:var(--bubble-bg);border:2px solid var(--primary);border-radius:16px;font-family:var(--font-head);font-weight:700;font-size:clamp(.74rem,.68rem + .4vw,1rem);line-height:1.3;text-align:center;box-shadow:var(--shadow);pointer-events:none;opacity:0;transform:scale(.5);transform-origin:var(--ax,50%) 100%;transition:opacity .2s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.bubble.on{opacity:1;transform:none}
.bubble::after{content:"";position:absolute;bottom:-8px;left:var(--ax,50%);width:12px;height:12px;margin-left:-6px;background:var(--bubble-bg);border:2px solid var(--primary);border-width:0 2px 2px 0;transform:rotate(45deg)}
.hit{position:absolute;padding:0;border:0;background:none;border-radius:24px;cursor:pointer}
.hit:focus-visible{outline:3px dashed var(--primary);outline-offset:2px}

/* Chips */
.chips{display:flex;gap:10px;overflow-x:auto;padding:6px 16px 14px;scrollbar-width:none;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px 0 14px;border-radius:99px;background:var(--card);border:1px solid var(--line-chip);font-weight:500;box-shadow:var(--chip-shadow);transition:transform .15s,background .2s,color .2s;scroll-snap-align:start}
.chip svg{width:22px;height:22px;color:var(--primary)}
.chip:hover{background:var(--tint)}
.chip:active{transform:scale(.94)}
.chips .chip{animation:chipIn .6s both;animation-delay:calc(var(--i)*60ms)}
@keyframes chipIn{from{opacity:0;transform:translateY(12px)}}
/* phones and tablets: a sideways row. Snap keeps the 16px gutter (scroll-padding), and the right edge fades so a cut-off chip reads as "more this way" */
@media(max-width:999px){.chips{scroll-padding-inline:16px;padding-top:10px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}}
/* js/chips-carousel.js adds .chips-run under 700px: no snapping (it would fight the script), both edges fade, the row loops */
@media(max-width:699px){.chips.chips-run{scroll-snap-type:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}}
@media(min-width:1000px){.chips{flex-wrap:wrap;justify-content:center;overflow:visible;-webkit-mask-image:none;mask-image:none}}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0)*90ms)}
[data-reveal].is-visible{opacity:1;transform:none}

/* Tutors */
.tutors{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 16px 24px;margin-inline:-16px;scrollbar-width:none}
.tutors::-webkit-scrollbar{display:none}
.card{flex:none;width:min(70%,240px);scroll-snap-align:center;background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--line-card);transition:box-shadow .3s,transform .2s ease-out;transform-style:preserve-3d;display:flex;flex-direction:column;gap:10px}
.card:hover{box-shadow:var(--shadow-lg)}
.card-top{display:flex;gap:12px;align-items:center}
.avatar{width:60px;height:60px;border-radius:50%;flex:none;overflow:hidden;background:var(--tint)}
.card h3{font-size:1.1rem}
.uni{font-size:.88rem;color:var(--muted);line-height:1.5}
.verified{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:600;color:var(--primary);background:var(--tint);padding:0 10px;border-radius:99px;width:fit-content}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:.8rem;background:var(--tag-bg);color:var(--tag-fg);padding:0 10px;border-radius:99px;line-height:1.7}
.meta{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;color:var(--muted)}
.stars{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:600}
.stars svg{width:16px;height:16px;color:var(--accent)}
.fee{font-weight:600;color:var(--primary);border-top:1px dashed var(--line-field);padding-top:10px}
.card .btn{min-height:44px;font-size:.92rem;background:var(--tint);color:var(--primary)}
.card .btn:hover{background:var(--btn-bg);color:#fff}

/* Steps */
.steps{display:grid;gap:28px;position:relative}
.step{text-align:center;padding:24px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;z-index:1;border:1px solid var(--line-card)}
.step .ic{width:72px;height:72px;margin:-52px auto 12px;border-radius:22px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-lg)}
.step .ic svg{width:34px;height:34px}
.step .n{font-family:var(--font-head);font-weight:800;color:var(--accent);font-size:.95rem}
.step p{color:var(--muted);margin-top:4px}
.connector{display:none}
.steps-wrap{padding-top:36px}

/* Stats */
.stats{background:var(--stats-bg);color:#fff;border-radius:clamp(24px,7vw,32px);padding:32px clamp(12px,4vw,20px);display:grid;grid-template-columns:1fr 1fr;gap:28px 12px;text-align:center;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--teal-light);opacity:.25;filter:blur(70px);top:-120px;right:-80px}
.stat{position:relative}
.stat b{display:block;font-family:var(--font-head);font-size:clamp(2rem,1.5rem + 2.5vw,3.2rem);line-height:1.2;color:var(--accent)}
.stat span{color:#cbd5e1;font-size:.95rem}

/* Tiles */
.tiles-title{font-size:1.25rem;margin:0 0 14px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:36px}
.tile{display:flex;flex-direction:column;justify-content:flex-end;min-height:104px;padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--tile-shadow);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.tile::after{content:"";position:absolute;right:-24px;top:-24px;width:84px;height:84px;border-radius:50%;background:var(--tint);transition:transform .4s}
.tile:nth-child(3n+2)::after{background:var(--tint-warm)}
.tile:nth-child(3n)::after{background:var(--tint-rose)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tile:hover::after{transform:scale(1.5)}
.tile{min-width:0;overflow-wrap:anywhere}
.tile b{font-family:var(--font-head);font-size:1.1rem;position:relative;z-index:1}
.tile small{color:var(--muted);position:relative;z-index:1}

/* Marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:16px;width:max-content;animation:scroll 50s linear infinite;padding:8px 0 20px}
.track:hover,.marquee:focus-within .track{animation-play-state:paused}
.track ul{display:flex;gap:16px}
@keyframes scroll{to{transform:translateX(-50%)}}
.quote{width:min(290px,78vw);flex:none;background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--line-card);display:flex;flex-direction:column;gap:10px}
.quote p{font-size:.95rem}
.quote footer{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted)}
.quote footer b{display:block;color:var(--ink)}
.quote .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--font-head)}
.marquee a{display:block}

/* FAQ */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
details{background:var(--card);border-radius:18px;border:1px solid var(--line);box-shadow:var(--det-shadow);transition:box-shadow .2s}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer;min-height:56px;padding:12px clamp(14px,4vw,20px);overflow-wrap:anywhere;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;list-style:none;font-family:var(--font-head);font-size:1.05rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--primary);display:grid;place-items:center;font-size:1.3rem;line-height:1;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg);background:var(--accent);color:var(--on-accent)}
details p{padding:0 clamp(14px,4vw,20px) 18px;color:var(--text-soft2)}

/* Footer */
.footer{background:var(--footer-bg);color:#cbd5e1;padding:40px 0 24px;margin-top:clamp(20px,3vw,40px)}
.footer .logo{color:#fff}
.footer .logo span b{color:var(--teal-light)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 16px}
.fgrid .brand{grid-column:1/-1}
.footer h4{color:#fff;font-size:1rem;margin-bottom:8px}
.footer li a{display:inline-flex;align-items:center;min-height:36px;max-width:100%;color:#cbd5e1;overflow-wrap:anywhere;word-break:break-word}
.footer li{min-width:0;overflow-wrap:anywhere}
.fgrid>[data-ft="contact"]{grid-column:1/-1}
.footer li a:hover{color:var(--accent)}
.footer .about{margin-top:10px;max-width:340px;font-size:.95rem}
.social{display:flex;gap:10px;margin-top:14px}
.social a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:background .2s,color .2s}
.social a:hover{background:var(--accent);color:var(--on-accent)}
.social svg{width:20px;height:20px}
.fbottom{display:flex;flex-direction:column;gap:12px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;font-size:.9rem}
.fbottom .lang-toggle{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.fbottom .lang-toggle .on{color:var(--accent)}

/* Theme toggle */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:44px;padding:0;border:1px solid var(--btn-line);border-radius:99px;background:var(--card);color:var(--toggle-ic);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.theme-toggle:hover{border-color:var(--primary)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:24px;height:24px;overflow:visible;transition:transform .6s cubic-bezier(.34,1.3,.5,1)}
.tt-core{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.34,1.3,.5,1)}
.tt-cut{transition:transform .5s cubic-bezier(.34,1.3,.5,1)}
.tt-rays{transform-box:view-box;transform-origin:12px 12px;transition:transform .6s cubic-bezier(.34,1.3,.5,1),opacity .35s}
:root[data-theme="dark"] .theme-toggle svg{transform:rotate(-40deg)}
:root[data-theme="dark"] .tt-core{transform:scale(1.7)}
:root[data-theme="dark"] .tt-cut{transform:translate(-7px,8px)}
:root[data-theme="dark"] .tt-rays{transform:rotate(90deg) scale(.3);opacity:0}
.drawer .drawer-theme{width:100%;justify-content:flex-start;padding:0 16px;min-height:48px;border-radius:14px;border:0;background:transparent;color:var(--ink);font-weight:500;font-size:1.1rem}
.drawer .drawer-theme:hover{background:var(--tint)}
.drawer .drawer-theme svg{color:var(--toggle-ic)}
:root[data-theme="dark"] .stats{border:1px solid var(--line)}
:root[data-theme="dark"] .stats::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--accent);opacity:.12;filter:blur(70px);bottom:-120px;left:-80px}
:root[data-theme="dark"] .footer{border-top:1px solid var(--line)}
:root[data-theme="dark"] .hero h1 .hl{filter:drop-shadow(0 0 18px rgba(45,212,191,.25))}
:root[data-theme="dark"] .card:hover,:root[data-theme="dark"] .tile:hover{border-color:rgba(94,234,212,.35)}
:root[data-theme="dark"] .stars svg{filter:drop-shadow(0 0 4px rgba(251,191,36,.55))}
:root[data-theme="dark"] .skip{color:#fff}

/* Hero scene theming */
.sc-bg{fill:url(#hs-bg)}
.night{opacity:0;transition:opacity .7s;pointer-events:none}
:root[data-theme="dark"] .sc-bg{fill:url(#hs-bg-d)}
:root[data-theme="dark"] .night{opacity:1}
:root[data-theme="dark"] .sc-ring{stroke:#5EEAD4;stroke-opacity:.28}
:root[data-theme="dark"] .sc-ground{fill:#000;opacity:.35}
:root[data-theme="dark"] .shd{fill:#000;opacity:.4}
:root[data-theme="dark"] .spk-t{fill:#5EEAD4}
:root[data-theme="dark"] .bdg-bg{fill:#1A2742;stroke:#5EEAD4;stroke-opacity:.4;stroke-width:1.2}
:root[data-theme="dark"] .bdg-d{stroke:#5EEAD4;stroke-opacity:.5;stroke-width:1.2}
:root[data-theme="dark"] .bdg-t1{fill:#5EEAD4}
:root[data-theme="dark"] .bdg-t2{fill:#FB7185}
:root[data-theme="dark"] .bdg-r{stroke:#FB7185}
:root[data-theme="dark"] .bdg-teal{fill:#2DD4BF}
:root[data-theme="dark"] .scene-svg .jmp{filter:drop-shadow(0 0 1.2px rgba(226,240,255,.7))}
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease,fill .4s ease,stroke .4s ease!important}
.theme-anim .tt-core,.theme-anim .tt-cut,.theme-anim .tt-rays,.theme-anim .theme-toggle svg{transition:transform .6s cubic-bezier(.34,1.3,.5,1),opacity .35s!important}
.theme-anim .night{transition:opacity .7s!important}
.theme-anim .bdg-bg,.theme-anim .sc-bg{transition:none!important}

/* Desktop */
@media(min-width:768px){
  body{padding-bottom:0;min-width:0}
  .bnav,.hamburger{display:none}
  .container{padding-inline:32px}
  .nav{display:flex}
  .header-actions{margin-left:12px;gap:12px}
  .header-prefs{display:flex}
  .nav{margin-left:auto}
    .hero{padding-block:72px 88px}
  .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"copy scene" "near near" "search search" "trust trust";column-gap:32px;align-items:center;text-align:left}
  .hero-copy{grid-area:copy}
  .hero .sub{margin:14px 0 0}
  .hero-scene{grid-area:scene;margin:0;max-width:none}
  .search{grid-area:search;margin-top:32px}
  .trust{grid-area:trust}
  .search{margin-top:14px}
  .search{grid-template-columns:1.1fr 1.1fr 1.1fr .9fr auto;align-items:end;border-radius:99px;padding:14px 14px 14px 24px;gap:10px}
  .search .btn{min-height:48px}
  .tutors{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding-inline:0;margin-inline:0}
  .card{width:auto;max-width:none}
  .steps{grid-template-columns:repeat(3,1fr);gap:32px}
  .connector{display:block;position:absolute;top:-16px;left:16%;width:68%;height:20px;z-index:0}
  .connector path{stroke:var(--primary);stroke-width:2.5;stroke-dasharray:8 8;fill:none;stroke-linecap:round}
  .stats{grid-template-columns:repeat(4,1fr);padding:56px 32px}
  .tiles{grid-template-columns:repeat(4,1fr);gap:16px}
  .fgrid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr}
  .fgrid .brand{grid-column:auto}
  .fgrid>[data-ft="contact"]{grid-column:auto}
  .fbottom{flex-direction:row;justify-content:space-between;align-items:center}
}
@media(min-width:768px) and (max-width:1000px){.search{border-radius:32px;grid-template-columns:1fr 1fr;padding:18px}.search .btn{grid-column:1/-1}}
@media(min-width:1100px){.tutors{grid-template-columns:repeat(4,minmax(0,245px));gap:20px}}
@media(min-width:768px){.tutors{justify-content:center}}
/* connector draw */
@media(min-width:768px){
  .connector path{stroke-dashoffset:0}
  .steps:not(.is-visible) .connector path{opacity:0}
  .steps.is-visible .connector path{animation:draw 1.4s ease-out both}
}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .blob{animation:none;will-change:auto}
  .theme-anim,.theme-anim *{transition:none!important}
  .hero-scene *{animation:none!important}
  .bubble{transform:none}
  .track{animation:none;width:auto;flex-wrap:wrap;overflow-x:auto}
  .track ul[aria-hidden]{display:none}
  .marquee{overflow-x:auto}
  .card{transform:none!important}
  [data-reveal],.chips .chip{opacity:1;transform:none;transition:none;animation:none}
  .steps.is-visible .connector path{animation:none}
  *{transition-duration:.01ms!important}
}

/* Small phones */
@media(max-width:400px){
  .eyebrow{font-size:.78rem;padding:2px 12px}
  .hero .sub{margin:12px auto 22px}
  .trust{gap:6px 14px;font-size:.86rem}
  .hero-scene{max-width:min(100%,340px)}
  .section-head{margin-bottom:28px}
  .tiles{gap:10px}
  .tile{padding:12px}
  .step{padding:20px 16px}
  .quote{padding:16px}
  .card{padding:16px}
  .footer{padding-top:32px}
  .fbottom{font-size:.85rem}
}
@media(max-width:340px){
  .logo{font-size:1.15rem}
  .chip{padding:0 16px 0 12px}
  .stat span{font-size:.85rem}
  .bnav a{font-size:.64rem}
}

/* Hero tutor CTA */
.hero-cta{display:grid;justify-items:center;gap:12px;margin:0 auto 24px;max-width:560px}
.hero-cta .btn{width:100%;max-width:420px;text-align:center;line-height:1.3;padding-block:8px}
.hero-proof{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:var(--text-soft)}
.stack{display:inline-flex}
.stack i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 .78rem var(--font-head);font-style:normal;border:2px solid var(--surface);margin-left:-8px}
.stack i:first-child{margin-left:0}

/* Tutor section */
.tutor-sec{padding-top:clamp(40px,6vw,80px)}
.tut-wrap{position:relative;overflow:hidden;border-radius:clamp(24px,6vw,36px);padding:clamp(22px,5vw,56px) clamp(14px,4vw,48px);color:#fff;background:radial-gradient(90% 60% at 100% 0%,rgba(251,191,36,.32),transparent 60%),radial-gradient(70% 50% at 0% 100%,rgba(244,63,94,.22),transparent 60%),linear-gradient(140deg,#0B5F59 0%,#0F766E 42%,#155E75 100%);box-shadow:0 30px 60px -30px rgba(15,118,110,.7)}
:root[data-theme="dark"] .tut-wrap{background:radial-gradient(90% 60% at 100% 0%,rgba(251,191,36,.2),transparent 60%),radial-gradient(70% 50% at 0% 100%,rgba(244,63,94,.16),transparent 60%),linear-gradient(140deg,#052E2B 0%,#0A3D43 45%,#172554 100%);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(20,184,166,.45)}
.tut-wrap h2,.tut-wrap h3{color:#fff}
.tb{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;opacity:.35}
.tb1{width:220px;height:220px;background:#FBBF24;top:-80px;right:-60px;animation:float2 16s ease-in-out infinite}
.tb2{width:200px;height:200px;background:#14B8A6;bottom:-80px;left:-60px;animation:float1 18s ease-in-out infinite}
.tut-top{position:relative;display:grid;gap:28px}
.tut-copy{display:grid;gap:14px;justify-items:start}
.tut-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:2px 12px;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#FDE68A;font-weight:600;font-size:.85rem}
.tut-eyebrow svg{width:14px;height:14px}
.tut-copy h2{font-size:clamp(1.8rem,1.2rem + 3vw,3.2rem);line-height:1.15;font-weight:800;overflow-wrap:break-word;text-shadow:0 2px 14px rgba(0,0,0,.2)}
.tut-sub{color:rgba(255,255,255,.9)}
.tut-micro{display:flex;align-items:center;gap:6px;font-size:.9rem;color:rgba(255,255,255,.88)}
.tut-micro svg{width:18px;height:18px;flex:none;color:#86EFAC}
.pv{position:relative;width:100%;max-width:340px;margin:6px auto 0;padding:16px 0 60px}
.pv-card{background:var(--card);color:var(--ink);border-radius:22px;padding:18px;display:grid;gap:12px;box-shadow:0 26px 50px -22px rgba(0,0,0,.6);transform:rotate(-2deg);animation:pvfloat 6s ease-in-out infinite}
@keyframes pvfloat{50%{transform:rotate(-2deg) translateY(-8px)}}
.pv-head{display:flex;gap:12px;align-items:center}
.pv-av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none}
.pv-av svg{width:100%;height:100%}
.pv-head b{display:block;font-family:var(--font-head);font-size:1.05rem;line-height:1.3}
.pv-head small{display:block;color:var(--muted);font-size:.85rem;line-height:1.4}
.pv-tags{display:flex;flex-wrap:wrap;gap:6px}
.pv-tags span{font-size:.8rem;background:var(--tag-bg);color:var(--tag-fg);padding:0 10px;border-radius:99px;line-height:1.7}
.pv-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;font-size:.88rem;color:var(--muted)}
.pv-meta>span:first-child{display:inline-flex;align-items:center;gap:4px}
.pv-meta svg{width:14px;height:14px;flex:none}
.pv-fee{color:var(--primary);font-weight:700}
.pv-btn{min-height:44px;display:grid;place-items:center;border-radius:99px;background:var(--btn-bg);color:#fff;font-weight:600}
.pv-b{position:absolute;display:inline-flex;align-items:center;gap:5px;padding:4px 12px 4px 8px;border-radius:99px;font-weight:700;font-size:.85rem;line-height:1.5;box-shadow:0 10px 20px -8px rgba(0,0,0,.5);animation:drift 5s ease-in-out infinite}
.pv-b svg{width:16px;height:16px;flex:none}
.pv-b.b1{top:0;right:-4px;background:#ECFDF5;color:#0F766E}
.pv-b.b2{left:-4px;top:2px;background:#FEF3C7;color:#92400E;animation-delay:-1.5s}
.pv-b.b2 svg{color:#F59E0B}
.pv-b.b3{right:-6px;bottom:50px;background:#FFE4E6;color:#BE123C;animation-delay:-3s}
.pv-toast{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max-content;max-width:100%;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:16px;background:#0B1324;color:#fff;border:1px solid rgba(255,255,255,.2);font-size:.88rem;font-weight:600;line-height:1.35;box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.pv-toast i{flex:none;width:30px;height:30px;border-radius:10px;background:var(--accent);color:#2A1700;display:grid;place-items:center}
.pv-toast svg{width:16px;height:16px}
.pv-toast span{transition:opacity .25s,transform .25s}
.pv-toast.swap span{opacity:0;transform:translateY(6px)}
.tut-ben{position:relative;display:grid;gap:12px;margin-top:32px}
.tut-ben li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;align-items:start;padding:16px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tut-ben li:hover{background:rgba(255,255,255,.16)}
.tut-ben i{grid-row:span 2;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#2A1700;display:grid;place-items:center}
.tut-ben i svg{width:24px;height:24px}
.tut-ben h3{font-size:1.08rem;line-height:1.3}
.tut-ben p{font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.86)}
.tut-join{position:relative;margin-top:36px}
.tut-h3{font-size:1.3rem;margin-bottom:18px}
.tut-steps{position:relative;display:grid;gap:20px;margin:0;padding:0;list-style:none}
.tut-steps::before,.tut-steps::after{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:3px;border-radius:3px}
.tut-steps::before{background:rgba(255,255,255,.22)}
.tut-steps::after{background:linear-gradient(#FDE68A,#F59E0B);transform:scaleY(0);transform-origin:top;transition:transform 1.5s ease .3s}
.tut-steps.is-visible::after{transform:scaleY(1)}
.tut-steps li{position:relative;z-index:1;display:flex;gap:14px;align-items:flex-start}
.ts-n{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;color:#0F766E;font:800 1.1rem var(--font-head);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(255,255,255,.18);transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(.3s + var(--k,0)*.55s)}
.tut-steps li:nth-child(2){--k:1}.tut-steps li:nth-child(3){--k:2}.tut-steps li:nth-child(4){--k:3}
.tut-steps.is-visible .ts-n{transform:scale(1)}
.tut-steps b{display:block;font-family:var(--font-head);font-size:1.1rem;line-height:1.4}
.tut-steps small{display:block;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.85)}
.tut-low{position:relative;display:grid;gap:16px;margin-top:36px}
.calc{background:var(--card);color:var(--ink);border-radius:24px;padding:clamp(16px,4vw,24px);display:grid;gap:6px;box-shadow:0 20px 40px -22px rgba(0,0,0,.55)}
.tut-wrap .calc h3{color:var(--ink);font-size:1.2rem;margin-bottom:6px}
.cl-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:6px}
.cl-row label{font-weight:600;font-size:.95rem;line-height:1.4}
.cl-row output{flex:none;font:800 1.15rem var(--font-head);color:var(--primary)}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;--p:0%}
.calc input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--primary) var(--p),var(--line-field) var(--p))}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;border:4px solid var(--primary);box-shadow:0 3px 10px rgba(0,0,0,.35);transition:transform .15s}
.calc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.calc input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--line-field)}
.calc input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--primary)}
.calc input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--primary)}
.calc input[type=range]:focus-visible{outline:3px solid var(--primary);outline-offset:0;border-radius:12px}
.cl-res{margin-top:8px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,var(--tint-warm),var(--tint));display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px}
.cl-res span{font-weight:600;color:var(--text-soft)}
.cl-res b{font:800 clamp(1.8rem,1.4rem + 2vw,2.4rem)/1.1 var(--font-head);color:var(--primary);font-variant-numeric:tabular-nums}
.cl-note{font-size:.82rem;line-height:1.5;color:var(--muted);margin-top:4px}
.tut-quote{margin:0;position:relative;display:grid;gap:14px;align-content:center;padding:22px;border-radius:24px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tq-mark{width:34px;height:34px;color:#FBBF24}
.tut-quote blockquote{margin:0;font:600 1.12rem/1.6 var(--font-head)}
.tut-quote figcaption{display:flex;align-items:center;gap:10px}
.tut-quote .av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 1rem var(--font-head)}
.tut-quote figcaption b{display:block;line-height:1.4}
.tut-quote small{display:block;font-size:.88rem;color:rgba(255,255,255,.82);line-height:1.4}
.tut-final{position:relative;display:grid;justify-items:center;margin-top:32px}
.tut-final .btn{max-width:520px}
.plan{width:100%;max-width:520px;margin-bottom:20px;background:var(--card);color:var(--ink);border-radius:24px;padding:clamp(14px,4vw,22px);display:grid;gap:14px;box-shadow:0 20px 40px -22px rgba(0,0,0,.55);border:1px solid var(--line-card)}
.plan-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px}
.pl-col{display:grid;gap:2px;align-content:center;padding:12px;border-radius:16px;background:var(--tint-soft);border:1px solid var(--line-chip);min-width:0}
.pl-live{background:linear-gradient(135deg,#FDE68A,#FBBF24);border-color:transparent;color:#2A1700}
.pl-k{font-size:.82rem;line-height:1.35;color:var(--muted)}
.pl-live .pl-k{color:#5B3A00}
.pl-v{font:800 1.35rem/1.25 var(--font-head);color:var(--primary)}
.pl-live .pl-v{color:#2A1700}
.pl-v small{font:600 .9rem var(--font-body)}
.pl-checks{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.pl-checks li{display:flex;gap:8px;align-items:flex-start;font-size:.95rem;line-height:1.45}
.pl-checks svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--primary)}
.pl-note{margin:0;font-size:.82rem;line-height:1.5;color:var(--muted)}

/* FAQ tutor block */
.faq-sub{margin-top:14px;font-size:1.2rem;color:var(--primary)}
.faq-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px 18px;border-radius:20px;background:var(--tint-warm);border:1px dashed var(--accent);font:700 1.05rem/1.4 var(--font-head)}
.faq-cta .btn{min-height:44px;font-size:.95rem}

/* Mobile sticky tutor strip */
.cta-strip{position:fixed;left:12px;right:12px;bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px) + 24px);z-index:85;display:flex;align-items:stretch;border-radius:18px;color:#fff;background:linear-gradient(120deg,#0B5F59,#0F766E);border:1px solid rgba(255,255,255,.2);box-shadow:0 16px 32px -12px rgba(0,0,0,.55);transform:translateY(24px);opacity:0;visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility .3s}
.cta-strip.show{transform:none;opacity:1;visibility:visible}
.cs-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 4px 8px 10px;min-height:52px;font-weight:600;font-size:.95rem;line-height:1.3}
.cs-ic{flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#2A1700;display:grid;place-items:center}
.cs-ic svg{width:18px;height:18px;animation:sparkle 2.2s ease-in-out infinite}
.cs-tx{flex:1;min-width:0}
.cs-go svg{width:20px;height:20px;color:#FBBF24}
.cs-x{flex:none;width:44px;border:0;background:transparent;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;border-radius:0 18px 18px 0}
.cs-x:focus-visible,.cs-main:focus-visible{outline-color:#FBBF24}

@media(min-width:480px){
  .tut-ben{grid-template-columns:1fr 1fr}
}
@media(min-width:768px){
  .header{--hh:74px}
  .header .container{gap:16px}
  .become{padding:0 20px;font-size:.95rem}
  .become .bt-full{display:inline}
  .become .bt-short{display:none}
  .cta-strip{display:none}
  .hero-cta{justify-items:start;margin:20px 0 0}
  .hero-cta .btn{width:auto}
  .tut-top{grid-template-columns:1.1fr .9fr;align-items:center;gap:40px}
  .btn-tutor.xl{width:auto;min-width:320px}
  .tut-steps{grid-template-columns:repeat(4,1fr);gap:20px}
  .tut-steps::before,.tut-steps::after{left:calc(100%/8);right:calc(100%/8);top:18px;bottom:auto;width:auto;height:3px}
  .tut-steps::after{transform:scaleX(0);transform-origin:left}
  .tut-steps.is-visible::after{transform:scaleX(1)}
  .tut-steps li{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .tut-low{grid-template-columns:1.15fr .85fr;align-items:stretch;gap:24px}
}
@media(min-width:1000px){
  .tut-ben{grid-template-columns:repeat(4,1fr)}
  .tut-ben li{grid-template-columns:1fr;row-gap:8px}
  .tut-ben i{grid-row:auto}
}
@media(max-width:380px){
  .header .container{gap:6px}
  .header-actions{gap:6px}
  .become{padding:0 12px;font-size:.85rem}
  .logo{gap:6px;font-size:1.05rem}
  .logo svg{width:30px;height:30px}
}
@media(max-width:350px){
  .become .bt-ic{display:none}
  .become{padding:0 10px}
  .logo{font-size:.9rem}
  .logo svg{width:28px;height:28px}
  .become{font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){
  .btn-tutor,.btn-tutor::before,.bt-ic,.pv-card,.pv-b,.tb,.bnav .post i,.bnav .post i svg,.dc-ic svg,.drawer-cta::after,.cs-ic svg{animation:none!important}
  .btn-tutor::before,.drawer-cta::after{display:none}
  .ts-n,.tut-steps::after{transition:none!important;transform:none!important}
  .cta-strip,.header{transition:none}
  .nav a::after{transition:none}
}

/* Business model: guardian (free) vs tutor (paid listing) */
.free-chip{font-style:normal;font-weight:700;font-size:.72rem;line-height:1.6;letter-spacing:.02em;padding:0 8px;margin-left:6px;border-radius:99px;background:var(--tint);color:var(--primary);border:1px solid var(--btn-line);white-space:nowrap}
.nav-post{gap:0}
.trust .trust-free{padding:3px 12px 3px 8px;border-radius:99px;background:var(--tint);color:var(--primary);border:1px solid var(--btn-line);font-weight:600}
.trust .trust-free svg{color:var(--primary);flex:none}
.live-note{display:inline-flex;align-items:flex-start;justify-content:center;gap:6px;margin-top:10px!important;padding:4px 12px;border-radius:14px;background:var(--tag-bg);color:var(--tag-fg)!important;font-size:.88rem;line-height:1.5;text-align:left}
.live-note svg{flex:none;width:16px;height:16px;margin-top:4px}
.pl-v.pl-v-sm{font-size:1rem;line-height:1.35}

.paths-sec{padding-block:clamp(8px,3vw,24px) clamp(24px,5vw,48px)}
.paths{display:grid;gap:18px;max-width:980px;margin-inline:auto}
.path{position:relative;overflow:hidden;display:grid;gap:10px;align-content:start;padding:22px clamp(16px,4vw,26px) 24px;border-radius:26px;background:var(--card);border:1px solid var(--line-card);box-shadow:var(--shadow);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .25s;transition-delay:calc(var(--d,0)*90ms)}
.path:hover{transition-duration:.7s,.25s,.25s;transition-delay:0s}
.path.is-visible:hover{transform:translateY(-6px)}
.path h3{font-size:clamp(1.35rem,1.2rem + .8vw,1.7rem);line-height:1.25;padding-right:84px}
.path-sub{color:var(--text-soft2);font-size:.98rem;line-height:1.6}
.path-art{position:absolute;top:14px;right:14px;width:76px;height:76px}
.path-badge{justify-self:start;display:inline-block;padding:2px 14px;border-radius:99px;font-weight:700;font-size:.9rem;line-height:1.6;max-width:100%}
.path-badge svg{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.path-list{display:grid;gap:8px;margin:6px 0 10px;padding:0}
.path-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.path-list svg{flex:none;width:20px;height:20px;margin-top:2px;padding:3px;border-radius:50%}
.path-btn{width:100%;margin-top:auto}
.path-guardian{order:2;border-color:rgba(20,184,166,.35);color:var(--primary)}
.path-guardian>*{color:var(--ink)}
.path-guardian .path-sub{color:var(--text-soft2)}
.path-guardian:hover{box-shadow:0 24px 50px -20px rgba(15,118,110,.5)}
.pb-teal{background:var(--btn-bg);color:#fff}
.path-guardian .path-list svg{background:var(--tint);color:var(--primary)}
.path-guardian .path-art{color:var(--teal-light)}
.path-tutor{order:1;background:radial-gradient(90% 70% at 100% 0%,rgba(251,191,36,.35),transparent 60%),linear-gradient(150deg,#FFF6DD,#FFE7AE);border:2px solid var(--accent);color:#2A1700;box-shadow:0 26px 50px -24px rgba(245,158,11,.75)}
.path-tutor h3,.path-tutor .path-list li{color:#2A1700}
.path-tutor .path-sub{color:#5B3A00}
.path-tutor .path-art{color:#F59E0B}
.path-tutor:hover{box-shadow:0 30px 56px -22px rgba(245,158,11,.9)}
.pb-gold{background:#2A1700;color:#FDE68A}
.path-tutor .path-list svg{background:#2A1700;color:#FBBF24}
:root[data-theme="dark"] .path-tutor{background:radial-gradient(90% 70% at 100% 0%,rgba(251,191,36,.22),transparent 60%),linear-gradient(150deg,#2B2416,#1E1A12);border-color:rgba(251,191,36,.7);color:var(--ink);box-shadow:0 26px 50px -26px rgba(251,191,36,.35)}
:root[data-theme="dark"] .path-tutor h3,:root[data-theme="dark"] .path-tutor .path-list li{color:var(--ink)}
:root[data-theme="dark"] .path-tutor .path-sub{color:var(--text-soft)}
:root[data-theme="dark"] .pb-gold{background:var(--accent);color:#2A1700}
:root[data-theme="dark"] .path-tutor .path-list svg{background:var(--accent);color:#2A1700}
:root[data-theme="dark"] .pb-teal{background:#0F766E;color:#fff}
.path-art .spk{transform-box:fill-box;transform-origin:center}

/* Drawer groups */
.dl-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;margin:10px 10px 4px;font:700 .8rem/1.4 var(--font-head);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dl-h:first-child{margin-top:0}
.dl-free{color:var(--primary)}
.dl-tutor{color:#B45309}
:root[data-theme="dark"] .dl-tutor{color:var(--accent)}

@media(min-width:768px){
  .paths{grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
  .path-guardian{order:1}.path-tutor{order:2}
  .path{padding:28px 28px 30px}
}
@media(min-width:768px) and (max-width:1000px){
  .nav a{padding-inline:8px}
  .nav a::after{left:8px;right:8px}
  .nav a[data-spy="how"],.nav a[data-spy="faq"]{display:none}
}
@media(max-width:360px){
  .path h3{padding-right:72px}
  .path-art{width:64px;height:64px;top:12px;right:10px}
}
@media(prefers-reduced-motion:reduce){
  .path,.path:hover{transition:none}
  .path-art .spk{animation:none}
}
.nav a{white-space:nowrap}
@media(min-width:768px) and (max-width:1180px){.nav a[data-spy="how"],.nav a[data-spy="faq"]{display:none}}

/* Header v2: Login / Register first, quiet prefs */
.hdr-login{min-height:44px;padding:0 18px;font-size:.95rem;white-space:nowrap}
.hdr-reg{min-height:44px;padding:0 14px 0 18px;font-size:.95rem;white-space:nowrap;gap:8px}
.reg-car{width:11px;height:7px;transition:transform .2s}
.hdr-reg[aria-expanded="true"] .reg-car{transform:rotate(180deg)}
.reg-menu{position:relative;display:none}
.reg-list{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;padding:6px;border-radius:16px;background:var(--card);border:1px solid var(--line-card);box-shadow:var(--shadow-lg);z-index:120}
.reg-list[hidden]{display:none}
.reg-list a{display:flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:12px;font-weight:600;white-space:nowrap}
.reg-list a:hover,.reg-list a:focus-visible{background:var(--tint);color:var(--primary)}
.header .become{display:none}
.header-prefs{gap:0}
.header-prefs .lang-toggle,.header-prefs .theme-toggle{min-height:44px;min-width:44px;padding:0 4px;border:0;background:transparent;color:var(--muted);box-shadow:none;border-radius:12px}
.header-prefs .lang-toggle{font-size:.76rem;gap:3px;letter-spacing:.02em}
.header-prefs .lang-toggle .on{color:var(--primary)}
.header-prefs .theme-toggle{color:var(--muted)}
.header-prefs .theme-toggle svg{width:20px;height:20px}
.header-prefs .lang-toggle:hover,.header-prefs .theme-toggle:hover{color:var(--primary);background:var(--tint)}
.drawer-auth{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drawer-auth .btn{min-height:48px;padding:0 12px}
@media(max-width:380px){.hdr-login{padding:0 14px;font-size:.9rem}}
@media(max-width:350px){.hdr-login{padding:0 12px;font-size:.85rem}}
@media(min-width:768px){
  .header .become{display:inline-flex}
  .reg-menu{display:block}
  .header-actions{margin-left:auto;gap:8px}
  .header-prefs{display:none}
  .hamburger{display:grid}
  .nav{display:none}
}
@media(min-width:1100px){
  .hamburger{display:none}
  .nav{display:flex}
  .header-prefs{display:flex}
  .header-actions{margin-left:8px;gap:10px}
  .nav a[data-spy="tutors"]{display:none}
}
@media(min-width:1180px){.nav a[data-spy="tutors"]{display:inline-flex}}
.nav a[data-spy="how"],.nav a[data-spy="faq"]{display:none!important}

.drawer-auth{grid-template-columns:1fr}

@media(min-width:1100px){.hdr-login{margin-left:6px;padding:0 24px}.header-prefs{padding-right:12px;margin-right:4px;border-right:1px solid color-mix(in srgb,var(--muted) 30%,transparent)}}

/* Freelance page */
.fl-hero .hero-inner{display:block;text-align:center;max-width:760px;margin-inline:auto}
.fl-hero .eyebrow{display:inline-block;margin-bottom:10px;padding:2px 12px;border-radius:99px;background:var(--tag-bg);color:var(--tag-fg);font:700 .8rem/1.7 var(--font-head);letter-spacing:.05em;text-transform:uppercase}
.fl-lead{color:var(--text-soft);margin:14px auto 0;max-width:620px}
.fl-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.fl-grid,.fl-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.fl-cat,.fl-steps li,.fl-box{background:var(--card);border:1px solid var(--line-card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.fl-cat i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--tint-soft);color:var(--primary);margin-bottom:10px}
.fl-cat i svg{width:24px;height:24px}
.fl-cat h3,.fl-steps h3{font-size:1.1rem}
.fl-cat p,.fl-steps p,.fl-box p{color:var(--muted);margin:6px 0 0}
.fl-alt{background:var(--tint-soft)}
.fl-steps li b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;font:800 1rem var(--font-head);margin-bottom:10px}
.fl-two{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.fl-box h2{font-size:clamp(1.25rem,1rem + 1.2vw,1.75rem)}
.fl-box .btn{margin-top:16px}

/* Bangla typography: Anek Bangla for headings, Noto Sans Bengali for body. Latin glyphs fall back to the English fonts. */
:root:lang(bn){--font-head:"Anek Bangla","Baloo Da 2",system-ui,sans-serif;--font-body:"Noto Sans Bengali","Hind Siliguri",system-ui,sans-serif}
:root:lang(bn) body{line-height:1.95;letter-spacing:0}
:root:lang(bn) h1,:root:lang(bn) h2,:root:lang(bn) h3,:root:lang(bn) h4{line-height:1.5;letter-spacing:0;font-weight:700}
:root:lang(bn) h1{line-height:1.4}
:root:lang(bn) .btn,:root:lang(bn) .nav a,:root:lang(bn) .drawer-links a{line-height:1.6}
.logo,.drawer-brand{font-family:"Baloo Da 2",system-ui,sans-serif}

/* Modern scrolling: slim themed scrollbars and a reading progress line */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 60%,transparent) transparent;overscroll-behavior-y:none}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 50%,transparent) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 50%,transparent);border:3px solid transparent;border-radius:99px;background-clip:content-box;min-height:48px;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:var(--primary);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
@supports (animation-timeline:scroll()){
  body::before{content:"";position:fixed;inset:0 0 auto 0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;z-index:300;pointer-events:none;animation:scrollProgress linear both;animation-timeline:scroll(root)}
  @keyframes scrollProgress{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){body::before{display:none}}

/* Feature flags (js/flags.js) */
.ff-off-freelance [data-feature="freelance"]{display:none!important}
/* Selected page in the top menu: same colour and underline as hover and scroll-spy */
.nav a[aria-current="page"]{color:var(--primary)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* Signed in: avatar menu replaces Login and Become a Tutor (js/session.js) */
.tb-in .hdr-login,.tb-in .become,.tb-in .drawer-cta{display:none!important}
.acct{position:relative}
.acct-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:3px 10px 3px 3px;border:1.5px solid var(--line-field);border-radius:99px;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--tile-shadow);transition:border-color .15s,box-shadow .15s}
.acct-btn:hover,.acct-btn[aria-expanded=true]{border-color:var(--primary)}
.acct-btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.acct-face{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--tint);color:var(--primary);font-family:var(--font-head);font-weight:800;font-size:1rem;border:2px solid var(--card);box-shadow:0 0 0 1.5px var(--primary)}
.acct-face img{display:block;width:100%;height:100%;object-fit:cover}
.acct-face.lg{width:48px;height:48px;font-size:1.2rem}
.acct-chev{width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);margin-right:2px;transition:transform .15s}
.acct-btn[aria-expanded=true] .acct-chev{transform:rotate(-135deg) translateY(-2px)}
@media(max-width:899px){.acct-chev{display:none}.acct-btn{padding:3px}}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:250px;padding:8px;border-radius:18px;border:1px solid var(--line-card);background:var(--card);box-shadow:var(--shadow-lg);animation:acctIn .18s cubic-bezier(.2,.8,.2,1) both}
.acct-menu[hidden]{display:none}
@keyframes acctIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.acct-head{display:flex;align-items:center;gap:12px;padding:10px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.acct-who{display:grid;min-width:0;line-height:1.35}
.acct-who b{font-family:var(--font-head);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-who small{color:var(--muted);font-size:.82rem}
.acct-item{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;font-weight:600;font-size:.95rem;text-align:left;text-decoration:none;cursor:pointer}
.acct-item svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;color:var(--primary)}
.acct-item:hover,.acct-item:focus-visible{background:var(--tint-soft);outline:none}
.acct-out{color:var(--coral)}
.acct-out svg{color:var(--coral)}
.drawer-acct{display:grid;gap:10px}
.drawer-acct .acct-head{border:0;margin:0;padding:0 0 6px}
.drawer-acct .acct-group{display:grid;border:1px solid var(--line-card);border-radius:16px;background:var(--card);overflow:hidden}
.drawer-acct .acct-group .acct-item{border-radius:0;min-height:50px;padding:0 16px;font-size:1rem}
.drawer-acct .acct-group .acct-item+.acct-item{border-top:1px solid var(--line)}
.drawer-acct .acct-group .acct-item:hover,.drawer-acct .acct-group .acct-item:focus-visible{background:var(--tint-soft)}
@media(prefers-reduced-motion:reduce){.acct-menu{animation:none}}
/* Home tutors: balanced rows on tablets and small laptops (2x2, then 4 across) */
@media(min-width:768px) and (max-width:899px){.tutors{grid-template-columns:repeat(2,minmax(0,260px));gap:18px}}
@media(min-width:900px) and (max-width:1099px){.tutors{grid-template-columns:repeat(4,minmax(0,245px));gap:14px}}

/* short pages: keep the footer at the bottom of the window */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body>main{flex:1 0 auto}

/* home: tutors and jobs near me (one compact design for every width) */
.near{display:grid;gap:8px;margin:0 0 12px}
.near-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.near-b{display:flex;align-items:center;gap:8px;min-height:52px;min-width:0;padding:4px 14px 4px 5px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;text-align:left;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.near-b:hover{transform:translateY(-1px)}
.near-b:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:3px}
.near-b[disabled]{opacity:.8;cursor:progress;transform:none}
.near-i{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.near-t{display:grid;line-height:1.2;min-width:0}
.near-t b{font-size:.92rem;font-weight:700}
.near-t small{font-size:.74rem;font-weight:500;opacity:.85}
.near-b1{border:0;background:var(--grad);color:#fff;box-shadow:0 8px 22px -12px color-mix(in srgb,var(--primary) 70%,transparent)}
.near-b1 .near-i{background:rgba(255,255,255,.22)}
.near-b2{border:1.5px solid var(--primary);background:var(--card);color:var(--primary)}
.near-b2:hover{background:var(--tint-soft)}
.near-b2 .near-i{background:var(--tint)}
.near-b.busy .near-i svg{animation:nearSp 1.1s linear infinite}
@keyframes nearSp{to{transform:rotate(360deg)}}
.near-st{margin:0;padding:8px 12px;border-radius:12px;background:var(--tint-soft);color:var(--text-soft2);font-size:.9rem;line-height:1.4}
.near-st.near-ok{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--ink)}
.near-st.near-err{background:color-mix(in srgb,#d64545 12%,transparent);color:var(--ink)}
@media (max-width:420px){.near-t small{display:none}.near-b{gap:6px;padding-right:10px}.near-t b{font-size:.84rem}.near-i{width:36px;height:36px}}
@media (min-width:768px){.near{grid-area:near;margin:24px 0 0}.near-b{min-height:56px;padding-right:22px}.near-t b{font-size:1rem}.near-t small{font-size:.78rem}.near-i{width:44px;height:44px}.search{margin-top:14px}}
@media (prefers-reduced-motion:reduce){.near-b,.near-b.busy .near-i svg{transition:none;animation:none}}

/* arrow sits on the right edge of each near-me button */
.near-ar{margin-left:auto;flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.22)}
.near-b2 .near-ar{background:var(--tint)}
@media (min-width:768px){.near-ar{width:34px;height:34px}}

/* phones: the two near-me buttons stack in two rows, full width */
@media (max-width:767px){.near-btns{grid-template-columns:1fr;gap:8px}.near-t small{display:block}.near-b{min-height:52px}}

/* Header bell and messages icons: kept here (render-blocking) so they are styled and reserved at the very first paint. Moved from notify.css. */
/* header icon buttons */
.hi-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;background:transparent;color:var(--muted);cursor:pointer;flex:none;transition:background .2s,color .2s}
.hi-btn svg{width:24px;height:24px}
.hi-btn:hover,.hi-btn[aria-expanded=true],.hi-btn[aria-current]{color:var(--primary);background:var(--tint)}
.hi-btn:focus-visible,.nt-all:focus-visible,.nt-mark:focus-visible,.nt-item:focus-visible,.msgfab:focus-visible,.nt-retry:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.nb{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--coral);color:#fff;font-size:.7rem;font-weight:700;line-height:18px;text-align:center;font-family:var(--font-body);box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.nb[hidden]{display:none}
/* phones keep both icons in the bar: 40px wide, tight gaps */
@media(max-width:767px){.hi-btn{width:40px}.header-actions{gap:2px}}
/* space is held from the first paint (the tb-in class is set in the head), so mounting the icons moves nothing */
.tb-in .header-actions:not(:has(#ntWrap))::before{content:"";flex:none;height:44px;width:136px}
@media(min-width:768px){.tb-in .header-actions:not(:has(#ntWrap))::before{width:148px}}
@media(min-width:900px){.tb-in .header-actions:not(:has(#ntWrap))::before{width:171px}}
@media(min-width:1100px){.tb-in .header-actions:not(:has(#ntWrap))::before{width:175px}}
@media(min-width:768px){.nt{position:relative}}

/* Header is static: no looping or on-load animation (the Become a Tutor shimmer, pulse and sparkle restarted on every page change and read as flicker) */
.header .btn-tutor,.header .btn-tutor::before,.header .bt-ic{animation:none!important}

/* header: no motion at all (also in notify.css) */
.header,.header *,.header *::before,.header *::after,.hi-btn,.hi-btn *,.nb{animation:none!important;transition:none!important}

/* Home: real numbers (js/home-stats.js). Any number of stats, none animated. */
#statsBand{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.stat[hidden],#heroProof[hidden],#statsSec[hidden]{display:none}
#heroProof svg{color:var(--teal,#0F766E);flex:none}
.tile small{display:block;line-height:1.5;min-height:1.5em}
.stat-star{display:inline-block;width:.7em;height:.7em;margin-inline-end:.15em;vertical-align:-.02em;color:var(--accent)}
.stat b span{color:inherit;font-size:inherit}

.hp-faces{display:inline-flex;flex:none}
.hp-faces i{display:grid;place-items:center;width:30px;height:30px;margin-inline-start:-8px;border-radius:50%;border:2px solid var(--bg,#fff);background:var(--tint,#CFEDE8);color:var(--primary,#0F766E);font:700 .8rem/1 var(--font-head);font-style:normal}
.hp-faces i:first-child{margin-inline-start:0}
.hp-faces i:nth-child(2){background:var(--tint-warm,#FDE68A)}
.hp-faces i:nth-child(3){background:var(--tint-rose,#FECDD3)}
#heroProof svg[hidden]{display:none}

.hero-cta{gap:6px}
.hero-cta .hero-proof{margin-top:-2px}

/* Mobile optimization: ~8% size reduction for better fit on phones */
@media(max-width:767px){
  html{font-size:110%}
  /* phones: a clean system-style type face (Hind Siliguri still draws the Bangla letters) */
  :root{--font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Hind Siliguri",sans-serif;--font-head:system-ui,-apple-system,"Segoe UI",Roboto,"Hind Siliguri",sans-serif}
  h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em}
  h1{font-size:clamp(1.6rem,1rem + 2.8vw,3.6rem)}
  h2{font-size:clamp(1.35rem,1.05rem + 1.4vw,2.4rem)}
  h3{font-size:1.05rem}
  .section{padding-block:clamp(40px,5.5vw,96px)}
  .section-head{margin-bottom:28px}
  .card{padding:18px}
  .step{padding:20px 14px}
  .tile{min-height:96px;padding:12px 14px}
  .quote{padding:18px}
  .stats{padding:28px clamp(10px,3vw,20px);gap:20px 10px}
  .stat b{font-size:clamp(1.8rem,1.4rem + 2vw,3.2rem)}
  .stat span{font-size:.88rem}
  .btn{min-height:44px;padding:0 20px;font-size:.92rem}
  .field input,.field select{min-height:44px}
  /* the base is smaller now, but inputs stay 16px so iPhones do not zoom into them */
  input[type=text],input[type=search],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{font-size:16px!important}
  .hero{padding-block:clamp(22px,5vw,40px) 40px}
  .hero .sub{font-size:clamp(.95rem,1rem + .3vw,1.2rem);margin:12px auto 18px}
  .hero-scene{max-width:min(100%,360px)}
  .search{padding:clamp(12px,3.5vw,18px)}
  .eyebrow{font-size:.8rem;padding:2px 12px}
  .chip{min-height:44px;padding:0 18px 0 12px;font-size:.88rem}
  .trust{gap:6px 16px;font-size:.88rem}
  .drawer-links a{font-size:1rem;min-height:52px}
  .tut-wrap h2{font-size:clamp(1.6rem,1.1rem + 2.5vw,3.2rem)}
  .pv-head b{font-size:1rem}
  .pv-head small{font-size:.8rem}
  .pv-btn{min-height:40px;font-size:.88rem}
  .tut-h3{font-size:1.15rem;margin-bottom:16px}
  .tut-steps li{gap:12px}
  .calc{padding:clamp(14px,3.5vw,24px)}
  .pl-v{font-size:1.2rem}
  .plan{padding:clamp(12px,3vw,22px)}
  .path h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.7rem);padding-right:68px}
  .hdr-login{font-size:.88rem}
  .hdr-reg{font-size:.88rem}
}

/* phones: a smaller logo so it takes less of the header */
@media(max-width:767px){
  .header .logo{gap:6px;font-size:.95rem;min-height:40px}
  .header .logo svg{width:29px;height:29px}
}
/* mobile: smaller menu button and drawer boxes, text size unchanged */
@media(max-width:767px){
  .hamburger{width:38px;height:38px;border-radius:12px}
  .hamburger span,.hamburger span::before,.hamburger span::after{width:17px}
  .hamburger span::before{top:-5px}.hamburger span::after{top:5px}
  .drawer{width:min(290px,84vw);padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px));gap:10px}
  .drawer-close{width:36px;height:36px;border-radius:12px}
  .drawer-cta{padding:11px 11px;border-radius:18px;gap:9px}
  .drawer-links a{min-height:42px;padding:5px 8px;gap:10px;border-radius:13px}
  .drawer-links i{width:32px;height:32px;border-radius:11px}
  .drawer-links i svg{width:18px;height:18px}
  .drawer-prefs{padding:10px 9px;gap:10px;border-radius:15px}
  .drawer .drawer-theme{min-height:40px;padding:0 12px}
  .drawer-auth .btn{min-height:42px}
}
/* mobile: compact menu button and drawer, smaller text too */
@media(max-width:767px){
  .hamburger{width:34px;height:34px;border-radius:11px}
  .hamburger span,.hamburger span::before,.hamburger span::after{width:15px}
  .hamburger span::before{top:-4px}.hamburger span::after{top:4px}
  .drawer{width:min(250px,78vw);padding:10px 10px calc(12px + env(safe-area-inset-bottom,0px));gap:8px}
  .drawer-brand{font-size:1.05rem}
  .drawer-close{width:32px;height:32px;border-radius:10px;font-size:1.25rem}
  .drawer-cta{padding:9px;border-radius:15px;gap:8px}
  .dc-ic{width:34px;height:34px;border-radius:11px}
  .dc-ic svg{width:18px;height:18px}
  .dc-tx b{font-size:.95rem}
  .dc-tx small{font-size:.74rem;line-height:1.35}
  .dc-go{width:28px;height:28px}
  .dc-go svg{width:14px;height:14px}
  .drawer-links a{min-height:36px;padding:4px 6px;gap:8px;border-radius:11px;font-size:.88rem}
  .drawer-links i{width:28px;height:28px;border-radius:9px}
  .drawer-links i svg{width:16px;height:16px}
  .dl-h{font-size:.7rem;margin:8px 6px 3px}
  .drawer-prefs{padding:8px;gap:8px;border-radius:13px}
  .pref-label{font-size:.72rem}
  .pref-seg button{min-height:34px;font-size:.85rem;gap:6px}
  .pref-seg button svg{width:16px;height:16px}
  .drawer .drawer-theme{min-height:34px;font-size:.88rem;padding:0 10px}
  .drawer-auth .btn{min-height:36px;font-size:.85rem}
}
/* mobile header: logo, messages, bell, avatar and menu button fit one row with even gaps */
@media(max-width:767px){
  .header .container{gap:6px;padding-inline:12px}
  .header .logo{min-width:0;flex:0 1 auto;gap:5px;font-size:.88rem;min-height:36px}
  .header .logo svg{width:26px;height:26px;flex:none}
  .header-actions{flex:none;gap:4px}
  .hi-btn{width:36px;height:36px;border-radius:12px}
  .hi-btn svg{width:21px;height:21px}
  .nb{top:0;right:-1px;min-width:16px;height:16px;padding:0 4px;font-size:.62rem;line-height:16px}
  .acct-btn{min-height:0;padding:2px}
  .acct-face{width:32px;height:32px;font-size:.9rem}
  .hdr-login{min-height:36px;padding:0 14px;font-size:.85rem}
  .hamburger{margin-left:2px}
}
@media(max-width:340px){
  .header .logo span{font-size:.82rem}
  .header-actions{gap:2px}
}
/* footer social icons without a real address (admin settings) stay hidden */
.footer .social[hidden],.footer .social a[hidden]{display:none}

/* Star ratings (TBUI.stars in js/ui.js): five gray stars with a gold row on top, clipped to the rating */
.tb-stars{position:relative;display:inline-flex;flex:none;vertical-align:middle;line-height:0}
.tb-st{display:flex;flex:none}
.tb-stars .tb-st svg{display:block;flex:none;width:var(--sz,16px);height:var(--sz,16px)}
.tb-stars .tb-st-bg svg{color:var(--line-field)}
.tb-stars .tb-st-fg svg{color:var(--accent)}
.tb-st-fg{position:absolute;left:0;top:0;overflow:hidden}

/* Home, desktop navbar only (>=1100px, where the full nav shows): at the very top the header is transparent so the hero artwork shows behind it; js/main.js adds body.hdr-blend on the home page and .scrolled after 8px. The hero is pulled up under the header by exactly its height, so nothing shifts. Skipped while the site banner is showing. */
@media(min-width:1100px){
  body.hdr-blend:not(:has(#siteBanner:not([hidden]))) .hero{margin-top:-74px;padding-top:146px}
  body.hdr-blend:not(:has(#siteBanner:not([hidden]))) .header{transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease,-webkit-backdrop-filter .25s ease!important}
  body.hdr-blend:not(:has(#siteBanner:not([hidden]))) .header:not(.scrolled){background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(min-width:1100px) and (prefers-reduced-motion:reduce){
  body.hdr-blend .header{transition:none!important}
}
@media(min-width:1100px){
  :root:not([data-theme="dark"]) body.hdr-blend:not(:has(#siteBanner:not([hidden]))) .header:not(.scrolled) .logo span b{color:#B45309}
  :root:not([data-theme="dark"]) body.hdr-blend:not(:has(#siteBanner:not([hidden]))) .header:not(.scrolled) .header-prefs .lang-toggle,
  :root:not([data-theme="dark"]) body.hdr-blend:not(:has(#siteBanner:not([hidden]))) .header:not(.scrolled) .header-prefs .theme-toggle{color:var(--text-soft2)}
  :root:not([data-theme="dark"]) body.hdr-blend:not(:has(#siteBanner:not([hidden]))) .header:not(.scrolled) .header-prefs .lang-toggle .on{color:var(--primary)}
}