:root{
--ink:#141a3a; --muted:#5c628a; --faint:#8a8fb5; --accent:#1f35ff; --accent2:#2bb8e8;
--glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.74); --glass-soft:rgba(255,255,255,.4);
--stroke:rgba(255,255,255,.75); --stroke-ink:rgba(20,26,58,.08);
--r:22px; --r-sm:14px; --r-xs:10px; --blur:18px;
--shadow:0 24px 60px -24px rgba(31,53,255,.28);
--shadow-sm:0 12px 30px -16px rgba(31,53,255,.30);
--ease:cubic-bezier(.22,1,.36,1);
--maxw:1200px; --pad:clamp(1.25rem,4vw,2.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);line-height:1.55;
-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
background:
radial-gradient(900px 700px at 10% 6%, #c7e4ff 0%, transparent 60%),
radial-gradient(820px 760px at 94% 12%, #ddccff 0%, transparent 55%),
radial-gradient(1000px 820px at 78% 60%, #b6ecf7 0%, transparent 50%),
radial-gradient(900px 800px at 18% 92%, #d6e0ff 0%, transparent 55%),
linear-gradient(160deg,#eef5ff,#f4efff 45%,#eafbff);
background-attachment:fixed}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
a{color:inherit;text-decoration:none}
section{scroll-margin-top:92px}
img{max-width:100%}
.glass{background:var(--glass);backdrop-filter:blur(var(--blur)) saturate(140%);
-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
border:1px solid var(--stroke);border-radius:var(--r);box-shadow:var(--shadow)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.95rem;
padding:.85rem 1.4rem;border-radius:999px;cursor:pointer;border:1px solid transparent;
transition:box-shadow .25s var(--ease)}
.btn-primary{background:linear-gradient(120deg,var(--accent),#4f6bff);color:#fff;
box-shadow:0 14px 30px -10px rgba(31,53,255,.55)}
.btn-primary:hover{box-shadow:0 22px 44px -12px rgba(31,53,255,.68)}
.btn-ghost{background:var(--glass-strong);backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);color:var(--ink);border:1px solid var(--stroke)}
.btn-ghost:hover{box-shadow:var(--shadow-sm)}
/* ===== header ===== */
header{position:sticky;top:0;z-index:60;padding-top:1rem}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.55rem .6rem .55rem 1.2rem;border-radius:999px}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{height:30px;width:auto;display:block}
.brand span{font-size:.64rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);
padding-left:.7rem;border-left:1px solid var(--stroke-ink)}
.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a{font-size:.9rem;font-weight:600;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--stroke);border-radius:50%;
background:var(--glass-strong);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.menu-btn span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-mobile{display:none;margin-top:.7rem;padding:1rem;flex-direction:column;gap:.3rem}
.nav-mobile.open{display:flex}
.nav-mobile a{padding:.7rem .9rem;border-radius:var(--r-xs);font-weight:600;color:var(--ink)}
.nav-mobile a:hover{background:var(--glass-soft)}
.nav-mobile .btn{margin-top:.4rem}
/* ===== hero ===== */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 2rem}
.hero-card{padding:clamp(1.5rem,4vw,3rem);display:grid;grid-template-columns:1.05fr .95fr;
gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero h1{font-size:clamp(2.6rem,1.1rem+5.6vw,4.7rem);line-height:1.02;font-weight:800;
letter-spacing:-.03em;margin:1rem 0 0}
.hero h1 .accent{background:linear-gradient(120deg,var(--accent),var(--accent2));
-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{margin-top:1.1rem;color:var(--muted);font-size:1.06rem;max-width:46ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero-figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--stroke);
box-shadow:var(--shadow);position:relative}
.hero-figure img{width:100%;height:100%;min-height:360px;object-fit:cover;object-position:center 30%;display:block}
.hero-figure .chip{position:absolute;left:14px;bottom:14px;right:14px;border-radius:var(--r-sm);
padding:.7rem 1rem;font-size:.78rem;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1.6rem}
.stat{padding:1.05rem;border-radius:var(--r-sm);background:var(--glass-strong);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--stroke)}
.stat b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.stat span{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
/* ===== generic section ===== */
section.block{padding:clamp(2.8rem,6vw,4.8rem) 0}
.head{max-width:62ch;margin-bottom:2.2rem}
.head h2{font-size:clamp(1.9rem,1rem+2.6vw,2.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin-top:.6rem}
.head p{color:var(--muted);margin-top:.7rem;font-size:1.04rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.card{padding:1.6rem}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;
background:linear-gradient(135deg,rgba(31,53,255,.16),rgba(43,184,232,.18));
color:var(--accent);margin-bottom:1rem;border:1px solid var(--stroke)}
.card h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
.card p{color:var(--muted);margin-top:.5rem;font-size:.96rem}
/* process */
.step .n{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;line-height:1;
background:linear-gradient(120deg,var(--accent),var(--accent2));
-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.6rem}
.step h3{font-size:1.12rem;font-weight:700}
.step p{color:var(--muted);margin-top:.4rem;font-size:.94rem}
/* services */
.svc h3{font-size:1.15rem;font-weight:700}
.svc>p{color:var(--muted);margin:.5rem 0 .9rem;font-size:.94rem}
.svc ul{list-style:none;display:grid;gap:.45rem;border-top:1px solid var(--stroke-ink);padding-top:.9rem}
.svc li{display:flex;gap:.55rem;font-size:.88rem;color:var(--ink)}
.svc li::before{content:"";flex:none;width:16px;height:16px;margin-top:.15rem;border-radius:50%;
background:linear-gradient(135deg,var(--accent),var(--accent2));
-webkit-mask:url("data:image/svg+xml;utf8,") center/12px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/12px no-repeat}
/* models */
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.tier{padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;position:relative}
.tier.popular{outline:2px solid rgba(31,53,255,.55);outline-offset:0}
.tier .badge{position:absolute;top:-11px;right:14px;font-size:.6rem;font-weight:800;text-transform:uppercase;
letter-spacing:.1em;color:#fff;background:linear-gradient(120deg,var(--accent),#4f6bff);padding:.3rem .6rem;border-radius:999px}
.tier .name{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.tier .price{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.tier .price small{font-size:.8rem;font-weight:600;color:var(--muted)}
.tier .desc{font-size:.86rem;color:var(--muted);margin-top:.2rem;flex:1}
.tier .pick{margin-top:.6rem;font-size:.82rem;font-weight:700;color:var(--accent)}
.notice{margin-top:1.3rem;padding:1.3rem 1.6rem;display:flex;gap:1rem;align-items:flex-start;
background:linear-gradient(120deg,rgba(31,53,255,.10),rgba(43,184,232,.10));
border:1px solid rgba(31,53,255,.25);border-radius:var(--r)}
.notice b{color:var(--accent)}
.notice p{color:var(--muted);font-size:.95rem;margin-top:.2rem}
/* comparison table */
.cmp-scroll{overflow-x:auto;border-radius:var(--r);-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;min-width:680px;overflow:hidden;border-radius:var(--r)}
table.cmp th,table.cmp td{padding:.95rem 1.1rem;text-align:left;font-size:.9rem;
border-bottom:1px solid var(--stroke-ink)}
table.cmp thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);
background:var(--glass-strong);position:sticky;top:0}
table.cmp thead th.pop{color:var(--accent)}
table.cmp tbody th{font-weight:700;color:var(--ink);background:var(--glass-soft)}
table.cmp td{color:var(--muted)}
table.cmp tr:last-child td{border-bottom:0}
.tick{color:var(--accent);font-weight:800}
.dash{color:var(--faint)}
/* audience / kerala split */
.split{display:grid;grid-template-columns:1.5fr .9fr;gap:1.1rem;align-items:stretch}
.split-figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--stroke);box-shadow:var(--shadow);
display:flex;flex-direction:column}
.split-figure img{width:100%;height:100%;min-height:300px;object-fit:cover;object-position:center 35%;display:block}
.split-figure .chip{padding:.7rem 1rem;font-size:.78rem;font-weight:600}
/* testimonials */
.quote{padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.quote p{font-size:.98rem;line-height:1.6}
.quote .who{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;
background:linear-gradient(135deg,var(--accent),var(--accent2))}
.who b{display:block;font-size:.92rem}
.who span{font-size:.78rem;color:var(--muted)}
/* faq */
.faq{display:grid;gap:.8rem}
details.qa{padding:0 1.3rem;overflow:hidden}
details.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;
align-items:center;padding:1.1rem 0;font-weight:700;font-size:1rem}
details.qa summary::-webkit-details-marker{display:none}
details.qa .pm{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;
background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:700;transition:transform .3s var(--ease)}
details.qa[open] .pm{transform:rotate(45deg)}
details.qa .ans{color:var(--muted);font-size:.95rem;line-height:1.65;padding:0 0 1.2rem;max-width:80ch}
/* cta */
.cta{padding:clamp(2rem,5vw,3.4rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
background:linear-gradient(120deg,rgba(31,53,255,.94),rgba(43,184,232,.82));color:#fff;border:1px solid rgba(255,255,255,.35)}
.cta h2{font-size:clamp(1.9rem,1rem+2.8vw,2.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.04;max-width:18ch}
.cta p{margin-top:.5rem;color:rgba(255,255,255,.88);max-width:46ch}
.cta .btn-white{background:#fff;color:var(--accent)}
.cta .btn-white:hover{box-shadow:0 18px 40px -14px rgba(255,255,255,.5)}
/* hover shadow-lift (Motion adds the scale; CSS lifts the shadow with the same easing) */
.card,.tier,.quote,.hero-figure,.split-figure,details.qa{transition:box-shadow .28s var(--ease)}
.card:hover,.tier:hover,.quote:hover,.hero-figure:hover,.split-figure:hover,details.qa:hover{
box-shadow:0 34px 74px -22px rgba(31,53,255,.42)}
.cta .btn-line{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.45)}
/* footer */
footer{padding:3rem 0 2.5rem}
.fcard{padding:2.2rem clamp(1.5rem,4vw,2.6rem);display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:1.6rem}
.fcard img{height:40px;width:auto}
.fcard p{color:var(--muted);font-size:.92rem;margin-top:.9rem;max-width:36ch}
.fcard h5{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.9rem}
.fcard ul{list-style:none;display:grid;gap:.6rem}
.fcard ul a{font-size:.92rem;color:var(--ink);opacity:.85;display:inline-flex;align-items:center;gap:.4rem}
.fcard ul a:hover{opacity:1;color:var(--accent)}
.fbot{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--stroke-ink);
display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.8rem;color:var(--muted)}
/* reveal — hidden initial state only when JS is active; Motion animates these in.
With no JS (or if Motion fails to load) content stays visible. */
.js .reveal{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){
.js .reveal{opacity:1;transform:none}
html{scroll-behavior:auto}
}
/* responsive */
@media (max-width:980px){
.hero-card,.fcard{grid-template-columns:1fr}
.hero-figure{order:-1}
.grid-3{grid-template-columns:1fr 1fr}
.models{grid-template-columns:1fr 1fr}
.split{grid-template-columns:1fr}
.nav-links{display:none}
.menu-btn{display:flex}
.nav-cta{display:none}
}
@media (max-width:600px){
.grid-3,.grid-2,.models,.stats{grid-template-columns:1fr}
.brand span{display:none}
.cta{flex-direction:column;align-items:flex-start}
}
/* ===== sub-page hero ===== */
.page-hero{padding:clamp(2.2rem,5vw,3.6rem) 0 1rem}
.page-hero .inner{padding:clamp(1.6rem,4vw,2.6rem)}
.crumbs{display:flex;gap:.5rem;font-size:.8rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--accent)}.crumbs span{color:var(--faint)}
.page-hero h1{font-size:clamp(2.1rem,1rem+3.4vw,3.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.page-hero p{color:var(--muted);margin-top:.8rem;font-size:1.06rem;max-width:60ch}
/* ===== contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start}
.info-card{padding:1.6rem}
.info-row{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--stroke-ink)}
.info-row:last-child{border-bottom:0}
.info-row .ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;color:var(--accent);
background:linear-gradient(135deg,rgba(31,53,255,.16),rgba(43,184,232,.18));border:1px solid var(--stroke)}
.info-row h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.info-row a,.info-row p{font-size:1.02rem;font-weight:600;color:var(--ink);margin-top:.2rem;word-break:break-word}
form.book{padding:1.6rem;display:grid;gap:.9rem}
form.book .field{display:grid;gap:.4rem}
form.book label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
form.book input,form.book select,form.book textarea{font:inherit;color:var(--ink);background:var(--glass-strong);
border:1px solid var(--stroke);border-radius:var(--r-sm);padding:.8rem .9rem;outline:none;
transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
form.book input:focus,form.book select:focus,form.book textarea:focus{border-color:var(--accent);
box-shadow:0 0 0 3px rgba(31,53,255,.16)}
form.book textarea{min-height:110px;resize:vertical}
form.book .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.form-note{font-size:.82rem;color:var(--muted);margin-top:.2rem}
/* ===== floating WhatsApp widget (desktop/tablet) ===== */
.wa-fab{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:80;
display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem .85rem .85rem;border-radius:999px;
background:#25D366;color:#0b3d22;font-weight:800;font-size:.92rem;text-decoration:none;
box-shadow:0 16px 36px -10px rgba(37,211,102,.6),0 6px 14px -6px rgba(0,0,0,.2);
transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.wa-fab:hover{box-shadow:0 22px 48px -10px rgba(37,211,102,.7)}
.wa-fab svg{width:30px;height:30px;flex:none}
.wa-fab .lbl{white-space:nowrap}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid #25D366;
animation:waPulse 2.6s var(--ease) infinite;pointer-events:none}
@keyframes waPulse{0%{opacity:.6;transform:scale(1)}70%{opacity:0;transform:scale(1.35)}100%{opacity:0;transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.wa-fab::after{animation:none;opacity:0}}
/* ===== mobile action bar (chat / call / book) ===== */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:85;display:none;
grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--glass-strong);backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);border-top:1px solid var(--stroke);
box-shadow:0 -12px 30px -18px rgba(20,26,58,.4);padding-bottom:env(safe-area-inset-bottom)}
.mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
padding:.6rem .4rem;font-size:.7rem;font-weight:700;color:var(--ink);text-decoration:none}
.mbar a svg{width:22px;height:22px}
.mbar a.primary{color:#fff;background:linear-gradient(120deg,var(--accent),#4f6bff)}
.mbar a .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
background:linear-gradient(135deg,rgba(31,53,255,.14),rgba(43,184,232,.16));color:var(--accent);margin-bottom:.1rem}
.mbar a.primary .ico{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:768px){
.wa-fab{display:none}
.mbar{display:grid}
body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
.contact-grid{grid-template-columns:1fr}
form.book .row{grid-template-columns:1fr}
}