:root{--navy:#0B1B3A;--blue:#2563EB;--vio:#7C3AED;--teal:#14B8A6;--soft:#F3F5FB;--ink:#16213a;--r:12px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font:16px/1.65 Inter,'Noto Sans Tamil',system-ui,sans-serif;color:var(--ink);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:Fraunces,'Noto Sans Tamil',Georgia,serif;color:var(--navy);line-height:1.2}
h1{font-size:clamp(2.1rem,5vw,3.7rem);font-weight:800;color:#fff}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);text-align:center;margin-bottom:.6rem}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}

.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:6px 5vw;background:rgba(11,27,58,.92);backdrop-filter:blur(10px)}
.brand img{height:52px;width:auto;background:#fff;border-radius:8px;padding:2px 6px}
nav{display:flex;align-items:center;gap:1.4rem;color:#fff;font-weight:500}
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--teal);transition:width .3s}
nav a:hover::after{width:100%}
.lang{background:transparent;border:1.5px solid #fff;color:#fff;border-radius:99px;padding:.3rem 1rem;cursor:pointer}
.lang:hover{background:#fff;color:var(--navy)}
.burger{display:none;background:0;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:26px;height:3px;margin:5px 0;background:#fff;border-radius:2px}

.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:var(--r);background:var(--blue);color:#fff;font-weight:600;border:2px solid var(--blue);cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(37,99,235,.4);background:var(--vio);border-color:var(--vio)}
.btn.ghost{background:transparent;color:#fff;border-color:#fff}
.sec:not(.dark) .btn.ghost,dialog .btn.ghost{color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:#fff;color:var(--navy)}
.cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}

.hero{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding:110px 5vw 60px;background:radial-gradient(circle at 80% 20%,rgba(124,58,237,.45),transparent 45%),var(--navy);color:#fff}
.tag{color:var(--teal);font-weight:600;margin-bottom:.6rem}
.lead{margin-top:1.1rem;max-width:34rem;opacity:.9;font-size:1.1rem}
.hero-i img{border-radius:20px;box-shadow:0 30px 70px rgba(0,0,0,.5);max-width:440px;margin:auto}
.tilt{transition:transform .15s ease-out,box-shadow .3s}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:center;padding:2rem 5vw;background:#fff;box-shadow:0 8px 30px rgba(11,27,58,.1);position:relative}
.trust b{display:block;font:800 clamp(2rem,4.5vw,3rem)/1 Fraunces,serif;color:var(--blue)}
.trust span{color:#51607f}

.sec{padding:76px 5vw}
.soft{background:var(--soft)}
.dark{background:var(--navy);color:#fff}.dark h2{color:#fff}
.sub{text-align:center;margin-bottom:1.5rem;color:#51607f}
.note{font-size:.85rem;color:#6a7694;margin-top:.9rem}
.dark .note{color:#a9b5d3}

.bar{display:flex;gap:1rem;justify-content:space-between;align-items:center;flex-wrap:wrap;max-width:1150px;margin:0 auto 1.4rem}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.tabs button{padding:.45rem 1.1rem;border-radius:99px;border:1.5px solid #cfd7ee;background:#fff;cursor:pointer;transition:.2s}
.tabs button[aria-selected=true],.tabs button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
input[type=search],label input,label select{padding:.7rem .9rem;border:1.5px solid #cfd7ee;border-radius:10px;width:100%;background:#fff;color:var(--ink)}
.bar input,.ks{max-width:280px}
.ks{display:block;margin:0 auto 1.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem;max-width:1150px;margin:0 auto}
.card{text-align:left;background:#fff;border:1px solid #e1e7f6;border-left:4px solid var(--vio);border-radius:var(--r);padding:1.3rem;cursor:pointer;display:flex;flex-direction:column;gap:.4rem;transition:box-shadow .3s,border-color .3s,transform .15s}
.card:hover{box-shadow:0 18px 40px rgba(11,27,58,.18);border-left-color:var(--teal)}
.card h3{font-size:1.1rem}.card span{color:#6a7694;font-size:.88rem}
.card em{font-style:normal;font-size:.75rem;font-weight:600;color:#fff;background:var(--vio);padding:.15rem .6rem;border-radius:99px;align-self:flex-start}

.panel{background:#fff;color:var(--ink);border-radius:16px;padding:1.8rem;max-width:620px;margin:1.4rem auto 0;display:grid;gap:.9rem;box-shadow:0 20px 50px rgba(0,0,0,.15)}
.panel h3{font-size:1.3rem}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:1150px;margin:1.4rem auto 0}
.two .panel{margin:0;max-width:none;align-content:start}
label span{display:block;font-size:.88rem;font-weight:600;margin-bottom:.25rem}
.out{background:var(--soft);border-radius:10px;padding:1rem}
.out svg{width:100%;height:auto;margin-bottom:.5rem}.pl{fill:none;stroke:var(--blue);stroke-width:2.5}.tl{stroke:var(--vio);stroke-dasharray:4}
.opts{display:grid;gap:.6rem}
.opt{padding:.85rem 1rem;text-align:left;border:1.5px solid #cfd7ee;border-radius:10px;background:#fff;cursor:pointer;transition:.2s}
.opt:hover{border-color:var(--teal);background:#effcfa;transform:translateX(4px)}
.res{padding-left:1.2rem}.lnk{background:0;border:0;color:var(--blue);font-weight:600;cursor:pointer;text-decoration:underline}

.about{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;max-width:1150px;margin:auto}
.about p{margin:.8rem 0}.about h3{margin-top:1.2rem}
.about img,figure img{border-radius:var(--r);box-shadow:0 20px 45px rgba(11,27,58,.25)}
figcaption{font-size:.85rem;color:#6a7694;margin-top:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;max-width:1000px;margin:1.4rem auto 0}
.chip{background:var(--soft);border-radius:var(--r);padding:.8rem 1.2rem;display:grid;border-left:4px solid var(--blue)}.chip span{font-size:.85rem;color:#6a7694}
.steps{max-width:700px;margin:1.4rem auto 0;display:grid;gap:.8rem;counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;background:#fff;padding:1rem 1rem 1rem 3.6rem;border-radius:var(--r);position:relative;box-shadow:0 6px 18px rgba(11,27,58,.08)}
.steps li::before{content:counter(s);position:absolute;left:1rem;top:50%;translate:0 -50%;width:2rem;height:2rem;border-radius:50%;background:var(--vio);color:#fff;display:grid;place-items:center;font-weight:600}
.klist{max-width:760px;margin:auto;display:grid;gap:.6rem}
details{background:var(--soft);border-radius:10px;padding:.9rem 1.1rem}summary{cursor:pointer;font-weight:600}details p{margin-top:.5rem}
.info a{font-weight:600}.social{display:flex;gap:.6rem;flex-wrap:wrap}.social a{padding:.4rem 1rem;border:1.5px solid var(--navy);border-radius:99px;font-size:.9rem;transition:.2s}.social a:hover{background:var(--navy);color:#fff}
footer{background:#071127;color:#fff;text-align:center;padding:2rem 5vw}.fine{opacity:.65;font-size:.8rem;margin-top:.5rem}

.wa{position:fixed;right:16px;bottom:16px;z-index:60;background:#25d366;color:#fff;font-weight:600;border:0;padding:.75rem 1.2rem;border-radius:99px;box-shadow:0 8px 20px rgba(0,0,0,.3);cursor:pointer;transition:transform .25s}.wa:hover{transform:scale(1.07)}
.wam{position:fixed;right:16px;bottom:70px;z-index:60;display:grid;gap:.4rem;background:#fff;padding:.7rem;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.wam[hidden]{display:none}.wam button{border:0;background:var(--soft);padding:.55rem 1rem;border-radius:8px;cursor:pointer;text-align:left}.wam button:hover{background:#dcfce7}
dialog{border:0;border-radius:18px;padding:2rem;max-width:520px;width:92%;box-shadow:0 30px 80px rgba(0,0,0,.4)}dialog::backdrop{background:rgba(11,27,58,.65)}
dialog p{margin:.7rem 0}.x{position:absolute;right:12px;top:8px;border:0;background:0;font-size:2rem;cursor:pointer}

@media(max-width:820px){
 .burger{display:block}
 nav{position:fixed;inset:64px 0 auto;flex-direction:column;background:var(--navy);padding:1.2rem;gap:1.1rem;transform:translateY(-130%);transition:transform .3s;align-items:flex-start}
 nav.open{transform:none}
 .hero,.about{grid-template-columns:1fr}.hero{min-height:auto;padding-top:96px;gap:2rem}
 .trust{grid-template-columns:1fr}.sec{padding:56px 5vw}
 .tilt{transform:none!important}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.pg{max-width:820px;margin:0 auto;padding:110px 5vw 60px}.pg h1{color:var(--navy);margin:.6rem 0}.pg h2{text-align:left;font-size:1.4rem;margin:1.6rem 0 .5rem}.pg ul{padding-left:1.2rem}.pg a:not(.btn){color:var(--blue)}.crumb{font-size:.88rem;color:#6a7694;display:block}
/* moving blurred video background */
.bgv{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:blur(5px) saturate(1.1);transform:scale(1.08);background:var(--navy)}
.bgo{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,27,58,.55),rgba(11,27,58,.35))}
body{background:transparent}
.hero{background:transparent}
.trust{background:rgba(255,255,255,.9);backdrop-filter:blur(8px)}
.sec{background:rgba(255,255,255,.9);backdrop-filter:blur(8px)}
.sec.soft{background:rgba(243,245,251,.9)}
.sec.dark{background:rgba(11,27,58,.86)}
/* photo bubble */
.avatar{position:fixed;left:16px;bottom:16px;z-index:60;width:72px;height:72px;padding:0;border:3px solid #fff;border-radius:50%;overflow:hidden;cursor:pointer;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s,box-shadow .25s;animation:pulse 2.6s infinite}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar:hover{transform:scale(1.1)}
@keyframes pulse{0%{box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 0 rgba(37,99,235,.55)}70%{box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 16px rgba(37,99,235,0)}100%{box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 0 rgba(37,99,235,0)}}
#cdlg form{display:grid;gap:.9rem;margin-top:1rem}
#cdlg h3{text-align:center;font-size:1.6rem}.cf-sub{text-align:center;color:#51607f}
#cdlg textarea{padding:.7rem .9rem;border:1.5px solid #cfd7ee;border-radius:10px;width:100%;font:inherit;resize:vertical}
#cdlg .btn{width:100%;text-align:center}
.req{color:#e11d48}.err{color:#b91c1c;font-size:.9rem;font-weight:600}
@media(prefers-reduced-motion:reduce){.avatar{animation:none}}
@media(max-width:820px){.bgv{filter:blur(4px)}.avatar{width:64px;height:64px}}
label span span{display:inline}
/* header tagline, hero headline and plan search */
.brand-tag{flex:1;margin:0 1rem;color:#dbe4ff;font-size:.82rem;line-height:1.3;max-width:230px}
.hero{align-content:center;row-gap:2.5rem}
.hero-top{grid-column:1/-1;text-align:center;max-width:900px;margin:0 auto}
.hero-top h1{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.brandline{margin-top:1rem;color:#fff;font:600 clamp(1rem,2.2vw,1.25rem)/1.4 Fraunces,serif;letter-spacing:.04em}
.hsearch{position:relative;display:flex;gap:.5rem;background:#fff;border-radius:14px;padding:.5rem;margin:1.6rem auto 0;max-width:680px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.hsearch input{flex:1;border:0!important;padding:.8rem 1rem;max-width:none!important;background:transparent!important;border-radius:10px}
.hsearch input:focus{outline:2px solid var(--blue)}
.hsearch .btn{padding:.7rem 1.6rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hsl{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;list-style:none;margin:0;padding:.4rem;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.3);text-align:left}
.hsl[hidden]{display:none}
.hsl button{width:100%;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.65rem .9rem;border:0;border-radius:8px;background:transparent;cursor:pointer;color:var(--ink);text-align:left}
.hsl button:hover,.hsl button:focus-visible{background:var(--soft)}
.hsl small{color:#6a7694;white-space:nowrap}.hsl .none{padding:.7rem .9rem;color:#6a7694}
.hero h2{color:#fff;text-align:left;font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0}
@media(max-width:820px){.brand-tag{font-size:.68rem;max-width:150px;margin:0 .5rem}.hero{padding-top:110px}.hsearch{flex-direction:column}.hsearch .btn{width:100%}.hsl small{display:none}}
@media(max-width:400px){.brand-tag{display:none}}
/* v: one-line header tagline, two-line hero text */
.brand-tag{flex:1;margin:0 1rem;max-width:none;white-space:nowrap;font-weight:700;color:#fdfdfd;font-size:clamp(.72rem,1.15vw,1rem);letter-spacing:.01em;line-height:1.2}
.brandline{white-space:nowrap;font-size:clamp(.7rem,2.8vw,1.25rem);letter-spacing:.02em}
@media(min-width:821px){
 .hero-top{max-width:none}
 .hero-top h1{white-space:nowrap;font-size:clamp(1rem,2.2vw,2.2rem)}
 html[lang="ta-IN"] .hero-top h1{white-space:normal;font-size:clamp(1.1rem,2vw,2rem)}
}
@media(max-width:820px){
 .nav{flex-wrap:wrap;row-gap:0;padding-bottom:4px}
 .brand-tag{order:3;flex-basis:100%;margin:0;max-width:none;text-align:center;font-size:2.75vw}
 nav{inset:92px 0 auto}
 .hero{padding-top:132px}
}
@media(max-width:400px){.brand-tag{display:block}}
/* bigger photo bubble and hero portrait */
.avatar{width:112px;height:112px;border-width:4px}
.hero-i img{max-width:540px}
@media(max-width:820px){.avatar{width:88px;height:88px}.hero-i img{max-width:100%}}
/* language button always visible, Tamil-safe header */
.lang{order:1;margin-left:.8rem;flex:none;white-space:nowrap;font-weight:600}
.brand,.burger{flex:none}.brand-tag{min-width:0}
html[lang="ta-IN"] nav{gap:1rem;font-size:.9rem}
@media(min-width:821px) and (max-width:1100px){
 .nav{flex-wrap:wrap;row-gap:0;padding-bottom:4px}
 .brand-tag{order:3;flex-basis:100%;margin:0;text-align:center;font-size:.8rem}
 nav{margin-left:auto}
 .hero{padding-top:130px}
}
@media(max-width:820px){.lang{margin-left:auto}.burger{order:2}nav .lang{display:none}}
/* English only: smaller round photo */
.avatar{width:84px;height:84px;border-width:3px}
@media(max-width:820px){.avatar{width:68px;height:68px}}
.chip p{margin-top:.5rem;font-style:italic;max-width:320px}
@media(min-width:1101px) and (max-width:1320px){
 .nav{flex-wrap:wrap;row-gap:0;padding-bottom:4px}
 .brand-tag{order:3;flex-basis:100%;margin:0;text-align:center;font-size:.85rem}
 nav{margin-left:auto}
 .hero{padding-top:130px}
}
.hero-t .tag {
  color: #FACC15;   /* change this to any color you like */
}