/* Sarvin E-Sevai – shared look for Home + Customer Dashboard (blue service-hub style) */
:root{
  --sv-ink:#0a2a66; --sv-royal:#1747c9; --sv-sky:#2f80ed; --sv-green:#16a34a; --sv-green-d:#12853c;
  --sv-gold:#f5a524; --sv-bg:#eef3fb; --sv-card:#fff; --sv-text:#1f2a44; --sv-muted:#5b6785; --sv-line:#dfe6f3;
  --sv-font:'Plus Jakarta Sans','Mukta Malar','Noto Sans Tamil','Nirmala UI','Latha','Tamil Sangam MN',system-ui,sans-serif;
}
.svx{font-family:var(--sv-font);color:var(--sv-text)}
.svx *{box-sizing:border-box}
.svx a{color:inherit;text-decoration:none}
.svx .in{max-width:1180px;margin:0 auto;padding-inline:20px}

/* ---------- header ---------- */
.svh{background:var(--sv-ink);color:#fff;position:sticky;top:0;z-index:30;box-shadow:0 2px 0 #ffffff10}
.svh .in{display:flex;align-items:center;gap:18px;height:70px}
.svh .br{display:flex;align-items:center;gap:11px;margin-right:auto}
.svh .br img{width:44px;height:44px;border-radius:12px;box-shadow:0 0 0 1px #ffffff22,0 6px 16px #00000055}
.svh .br b{display:block;font-size:18px;font-weight:800;letter-spacing:.3px;line-height:1.1}
.svh .br small{display:block;font-size:12px;color:#a9c0f3;font-weight:500}
.svh nav{display:flex;align-items:center;gap:2px}
.svh nav a{padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:600;color:#d6e2ff}
.svh nav a:hover,.svh nav a[aria-current]{color:#fff;background:#ffffff14}
.svh nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--sv-gold)}
.svh .who{background:#ffffff14;border-radius:9px;padding:8px 12px;font-size:13.5px;font-weight:600;color:#e6edff;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.svb{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1.2 var(--sv-font);padding:12px 20px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.svb.sm{padding:9px 15px;font-size:14px;border-radius:10px}
.svb.blue{background:var(--sv-royal);color:#fff}.svb.blue:hover{background:#123ba8}
.svb.green{background:var(--sv-green);color:#fff}.svb.green:hover{background:var(--sv-green-d)}
.svb.ghost{border-color:#ffffff55;color:#fff;background:transparent}.svb.ghost:hover{background:#ffffff14;border-color:#fff}
.svb.line{border-color:#c6d3ee;color:var(--sv-ink);background:#fff}.svb.line:hover{border-color:var(--sv-royal);color:var(--sv-royal)}
.svb:focus-visible,.svh a:focus-visible,.svcc:focus-visible{outline:3px solid #f5a524aa;outline-offset:2px}
@media(max-width:820px){.svh nav a.l{display:none}.svh .who{display:none}}
@media(max-width:430px){.svh .in{height:62px;gap:8px}.svh .br img{width:38px;height:38px}.svh .br b{font-size:15.5px}.svh .br small{font-size:11px}.svh .svb.sm{padding:8px 11px;font-size:13px}}

/* ---------- hero band ---------- */
.svhero{position:relative;color:#fff;overflow:hidden;padding:0;
  background:radial-gradient(700px 360px at 92% 0%,#3f8cff55,transparent 60%),radial-gradient(500px 300px at 0% 100%,#0a2a6699,transparent 70%),linear-gradient(120deg,#1240b8 0%,#1a5fe0 55%,#2f80ed 100%)}
.svhero::after{content:"";position:absolute;right:-120px;top:-80px;width:520px;height:520px;border-radius:50%;border:60px solid #ffffff0d;pointer-events:none}
.svhero .in{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .85fr;gap:36px;align-items:start;padding-block:46px 40px}
.svhero .hi{font-size:19px;font-weight:600;color:#dbe6ff;margin:0 0 6px}
.svhero h1{margin:0 0 12px;font-size:clamp(30px,4.4vw,46px);line-height:1.15;font-weight:800;letter-spacing:-.3px}
.svhero p.lead{margin:0 0 22px;color:#dbe6ff;font-size:17px;line-height:1.6;max-width:34em}
.svhero .cta{display:flex;gap:12px;flex-wrap:wrap}
.svstrip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;background:#0a2a66cc;border:1px solid #ffffff1f;border-radius:14px;overflow:hidden}
.svstrip div{padding:14px 18px;font-size:14px;color:#c9d8ff;line-height:1.35}
.svstrip div+div{border-left:1px solid #ffffff1f}
.svstrip b{display:block;color:#fff;font-size:21px;font-weight:800;margin-bottom:2px}
.svstrip b.gold{color:#ffd27a}
@media(max-width:900px){.svhero .in{grid-template-columns:1fr;padding-block:34px 30px}}
@media(max-width:520px){.svstrip{grid-template-columns:1fr}.svstrip div+div{border-left:0;border-top:1px solid #ffffff1f}.svstrip div{display:flex;align-items:baseline;gap:10px;padding:11px 14px}.svstrip b{font-size:18px;margin:0;min-width:64px}}

/* ---------- notice board (side) ---------- */
.nboard{background:#fff;color:var(--sv-text);border-radius:18px;box-shadow:0 24px 50px #0a2a6655;overflow:hidden}
.nboard .nh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:linear-gradient(90deg,#0a2a66,#163f9e);color:#fff}
.nboard .nh b{font-size:16.5px;font-weight:800}
.nboard .nh>span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#bff0cf;background:#ffffff14;border-radius:999px;padding:4px 10px}
.nboard .nh>span::before{content:"";width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px #34d39933}
.nboard .nl{padding:12px 12px 4px;--svn-h:270px;min-height:120px}
.nboard .empty{padding:8px 6px 10px;color:var(--sv-muted);font-size:14.5px;line-height:1.6}
.nboard .empty b{display:block;color:var(--sv-ink);font-size:15.5px;margin-bottom:2px}
.nboard .nf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--sv-line);font-size:13px;color:var(--sv-muted);background:#f8faff}
.nboard .nf a{color:var(--sv-green);font-weight:800}

/* ---------- category cards with pictures ---------- */
.svcats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svcc{display:flex;flex-direction:column;background:var(--sv-card);border:1px solid var(--sv-line);border-radius:18px;overflow:hidden;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0;box-shadow:0 1px 2px #0a2a660d;transition:box-shadow .2s,border-color .2s}
.svcc:hover{box-shadow:0 18px 36px #1747c922;border-color:#b6c8f0}
.svcc img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#e3ecff}
.svcc .cb{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.svcc h3{margin:0;color:var(--sv-ink);font-size:19px;font-weight:800;line-height:1.25}
.svcc p{margin:0;color:var(--sv-muted);font-size:14.5px;line-height:1.5;flex:1}
.svcc .go{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.svcc .go em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--sv-royal);background:#e7eeff;border-radius:999px;padding:4px 10px}
.svcc .go span{background:var(--sv-royal);color:#fff;border-radius:10px;padding:9px 14px;font-weight:700;font-size:14px}
.svcc[aria-pressed="true"]{border-color:var(--sv-royal);box-shadow:0 0 0 3px #1747c933,0 18px 36px #1747c922}
.svcc[aria-pressed="true"] .go span{background:var(--sv-green)}
@media(max-width:1000px){.svcats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svcats{grid-template-columns:1fr 1fr;gap:12px}.svcc .cb{padding:12px}.svcc h3{font-size:16px}.svcc p{display:none}.svcc .go{flex-direction:column;align-items:stretch;margin-top:4px}.svcc .go span{text-align:center;padding:8px}.svcc .go em{align-self:flex-start}}

/* ---------- Tamil + English pairs ---------- */
.svx .en{display:block;font-size:.6em;font-weight:600;opacity:.78;letter-spacing:.1px;margin-top:3px;line-height:1.3}
.svx .ta{display:block;font-size:.5em;font-weight:700;color:#ffd27a;margin-top:8px;letter-spacing:0}
.svh nav a{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:7px 12px}
.svh nav a .en{font-size:11px;font-weight:500;color:#a9c0f3;opacity:1;margin-top:2px}
.svhero p.lead .en,.svx .sub .en,.svx .hd p .en{display:block;font-size:.88em;font-weight:500;margin-top:4px;opacity:.85}
.svstrip small{display:block;font-size:12px;color:#9fb6ea;margin-top:1px}
.nboard .nh b .en{display:inline;font-size:12px;font-weight:600;color:#bcd0ff;margin-left:6px}
.svcc p .en{display:block;font-size:13px;margin-top:3px}

/* ---------- 3-column hero: text | service picker | notices ---------- */
.svhero.three .in{grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr) minmax(0,.8fr);gap:22px;align-items:start;padding-block:38px 40px}
.svhero.three h1{font-size:clamp(27px,2.5vw,35px)}
.svhero.three p.lead{font-size:15.5px;margin-bottom:18px}
.svhero.three .cta{flex-direction:column;align-items:stretch}
.minis{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.minis li{display:flex;flex-direction:column;gap:2px;background:#0a2a66b3;border:1px solid #ffffff1f;border-radius:12px;padding:9px 12px}
.minis b{font-size:21px;line-height:1.1;font-weight:800;color:#fff}.minis b.gold{color:#ffd27a}
.minis span{font-size:12.5px;color:#d6e2ff;line-height:1.25}.minis small{display:block;font-size:11.5px;color:#9fb6ea}
.spick{background:#fff;color:var(--sv-text);border-radius:18px;box-shadow:0 24px 50px #0a2a6655;overflow:hidden}
.sph{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.sph b{font-size:17px;font-weight:800;color:var(--sv-ink)}.sph b .en{display:inline;font-size:12.5px;color:var(--sv-muted);margin-left:6px;opacity:1}
.sph a{font-size:13px;font-weight:700;color:var(--sv-royal)}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 12px 12px}
.sgrid[hidden]{display:none}
.stile{font:inherit;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;background:#f3f6fd;border:1.5px solid #e3eaf7;border-radius:14px;padding:8px 8px 10px;color:var(--sv-text);transition:border-color .15s,box-shadow .15s}
.stile:hover{border-color:#9db6ef;box-shadow:0 10px 22px #1747c91f;background:#fff}
.stile:focus-visible{outline:3px solid #f5a524aa;outline-offset:2px}
.stile img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:4px}
.stile b{font-size:14px;font-weight:800;color:var(--sv-ink);line-height:1.2}
.stile small{font-size:11.5px;color:var(--sv-muted);line-height:1.25}
.stile em{font-style:normal;white-space:nowrap;margin-top:5px;font-size:11.5px;font-weight:800;color:var(--sv-royal);background:#e3ebff;border-radius:999px;padding:3px 9px}
.stile.all{justify-content:center;background:linear-gradient(160deg,#0a2a66,#1747c9);border-color:transparent}
.stile.all .ai{font-size:30px;color:#fff;line-height:1;margin:6px 0 8px}.stile.all b{color:#fff}.stile.all small{color:#c9d8ff}.stile.all em{background:#ffffff22;color:#fff}
.slist[hidden]{display:none}
.slh{display:flex;align-items:center;gap:10px;padding:0 12px 10px;border-bottom:1px solid #eef2f8}
.sback{font:inherit;cursor:pointer;border:1.5px solid #c6d3ee;background:#fff;color:var(--sv-ink);border-radius:10px;padding:7px 11px;font-weight:700;font-size:13.5px;white-space:nowrap}
.sback:hover{border-color:var(--sv-royal);color:var(--sv-royal)}.sback:focus-visible{outline:3px solid #f5a524aa;outline-offset:2px}
.slh img{width:64px;height:36px;flex:none;border-radius:7px;object-fit:cover}
.slh b{font-size:15.5px;font-weight:800;color:var(--sv-ink);line-height:1.2}.slh b small{display:block;font-size:12px;font-weight:600;color:var(--sv-muted)}
.slist ul{list-style:none;margin:0;padding:6px 12px 12px;max-height:330px;overflow:auto}
.slist li a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 10px;border-radius:10px;color:var(--sv-text)}
.slist li+li a{border-top:1px solid #eef2f8}
.slist li a:hover{background:#f3f7ff}.slist li a:focus-visible{outline:3px solid #f5a524aa}
.slist b{display:block;font-size:14.5px;font-weight:700;line-height:1.35}.slist li small{display:block;color:var(--sv-muted);font-size:12.5px}
.slist em{flex:none;font-style:normal;font-size:11.5px;font-weight:800;color:#8a5a00;background:#fff3d6;border-radius:999px;padding:3px 9px;white-space:nowrap}
.slist em.fr{color:#0f6b3a;background:#dcf5e6}
@media(max-width:760px){.sgrid{grid-template-columns:repeat(2,1fr)}}
.svhero.three .nboard .nl{--svn-h:330px}
.svhero.three .nboard .nh b .en{display:block;margin:2px 0 0}
@media(max-width:1100px){.svhero.three .in{grid-template-columns:1fr 1.4fr}.svhero.three .nboard{grid-column:1/-1}.svhero.three .cta{flex-direction:row;flex-wrap:wrap}}
@media(max-width:760px){.svhero.three .in{grid-template-columns:1fr}}
@media(max-width:1100px) and (min-width:761px){.minis{grid-template-columns:repeat(3,1fr)}}

/* ---------- wide 3-column hero: notices (far left) | services (big, centre) | headline (far right) ---------- */
.svh.wide .in,.svhero.three.wide .in{max-width:none;padding-inline:clamp(14px,2vw,32px)}
.svhero.three.wide .in{grid-template-columns:minmax(260px,.85fr) minmax(0,1.9fr) minmax(260px,.85fr);gap:clamp(14px,1.6vw,26px)}
.svhero.three.wide .hcol{order:1}
.svhero.three.wide .spick{order:2}
.svhero.three.wide .nboard{order:3}
.svhero.three.wide .sgrid{gap:14px;padding:4px 16px 18px}
.svhero.three.wide .sph{padding:16px 18px 12px}.svhero.three.wide .sph b{font-size:19px}
.svhero.three.wide .stile{padding:10px 10px 14px;border-radius:16px}
.svhero.three.wide .stile b{font-size:16px}.svhero.three.wide .stile small{font-size:12.5px}.svhero.three.wide .stile em{font-size:12.5px}
.svhero.three.wide .slist ul{max-height:420px}.svhero.three.wide .nboard .nl{--svn-h:420px}
@media(max-width:1100px){
  .svhero.three.wide .in{grid-template-columns:1.6fr 1fr}
  .svhero.three.wide .hcol{order:1;grid-column:1/-1}
  .svhero.three.wide .spick{order:2}
  .svhero.three.wide .nboard{order:3;grid-column:auto}
}
@media(max-width:860px){
  .svhero.three.wide .in{grid-template-columns:1fr}
  .svhero.three.wide .hcol{order:1}.svhero.three.wide .spick{order:2}.svhero.three.wide .nboard{order:3}
}