@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --navy: #071d3b;
  --navy-light: #103a67;
  --gold: #f6b51b;
  --ink: #132b4b;
  --muted: #5d6b7d;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: #f6f8fc;
}
.page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 38px 22px 25px;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 12% 10%, rgba(36,111,169,.13), transparent 33%),
    radial-gradient(ellipse at 92% 35%, rgba(246,181,27,.14), transparent 30%),
    linear-gradient(145deg, #fff 0%, #f5f8fd 54%, #fffaf0 100%);
}
.page::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 700px; height: 700px;
  border: 1px solid rgba(7,29,59,.06);
  border-radius: 50%;
  top: -430px; right: -190px;
}
.page::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 600px; height: 600px;
  border: 1px solid rgba(246,181,27,.17);
  border-radius: 50%;
  bottom: -420px; left: -180px;
}
.glow { position:absolute; z-index:-1; border-radius:50%; filter:blur(2px); }
.glow-one { width:210px;height:210px;left:-120px;top:36%;background:rgba(27,101,159,.06); }
.glow-two { width:240px;height:240px;right:-140px;top:16%;background:rgba(246,181,27,.08); }
.hero { width: min(100%, 900px); text-align:center; margin:auto; padding: 8px 0 36px; }
.brand { position:relative; width:min(280px, 72vw); margin:0 auto 24px; }
.logo-image { display:block; width:100%; max-height:245px; object-fit:contain; }
.logo-fallback {
  display:none;
  justify-items:center;
  gap:7px;
  padding:18px 12px 15px;
  background:rgba(255,255,255,.85);
  border:2px solid var(--gold);
  border-radius:22px;
  box-shadow:0 12px 35px rgba(7,29,59,.10);
}
.logo-fallback svg { width:95px; height:95px; }
.fallback-title { font-size:14px; line-height:1.25; font-weight:900; color:var(--navy); letter-spacing:.07em; }
.fallback-subtitle { font-size:9px; font-weight:700; letter-spacing:.16em; color:#8b6412; }
.eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid #e6eaf0; border-radius:999px;
  padding:9px 15px; background:rgba(255,255,255,.78);
  color:#496078; font-size:11px; font-weight:800; letter-spacing:.16em;
}
.dot { width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(246,181,27,.17); }
h1 { margin:22px 0 12px; color:var(--navy); font-size:clamp(48px, 8.5vw, 86px); line-height:.98; letter-spacing:-.065em; font-weight:900; }
h1 span { color:#e9a600; }
.intro { margin:0 auto 12px; max-width:650px; font-size:clamp(17px, 2.5vw, 22px); line-height:1.55; font-weight:700; }
.description { max-width:620px; margin:0 auto; color:var(--muted); font-size:15px; line-height:1.8; }
.features {
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:720px; margin:37px auto 26px;
  border:1px solid #e8edf3; border-radius:18px;
  background:rgba(255,255,255,.75); box-shadow:0 12px 35px rgba(7,29,59,.045);
  padding:20px 8px;
}
.feature { padding:0 12px; position:relative; }
.feature + .feature::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px; background:#e4e9f0; }
.feature-icon {
  width:45px;height:45px;display:grid;place-items:center;margin:0 auto 10px;
  border-radius:14px;background:#eaf3ff;color:#164d83;font-size:25px;font-weight:800;
}
.feature:nth-child(2) .feature-icon { background:#fff3cf;color:#986b00; }
.feature:nth-child(3) .feature-icon { background:#e8f7e9;color:#2f7840; }
.feature:nth-child(4) .feature-icon { background:#fce8e8;color:#9b4242; }
.feature h2 { margin:0; font-size:12px; line-height:1.45; font-weight:700; }
.status { display:inline-flex;align-items:center;gap:9px;color:#6d7b8b;font-size:10px;font-weight:800;letter-spacing:.13em; }
.status-pulse { width:7px;height:7px;background:#35a56b;border-radius:50%;box-shadow:0 0 0 4px rgba(53,165,107,.12); }
footer { width:min(100%,900px); text-align:center; padding-top:18px; }
.footer-line { width:75px;height:3px;border-radius:5px;background:var(--gold);margin:0 auto 15px; }
.footer-title { margin:0 0 7px;color:var(--navy);font-weight:800;font-size:15px; }
.footer-sub { margin:0;color:#738094;font-size:12px; }
.copyright { margin:20px 0 0;color:#9aa4b1;font-size:10px; }
@media (max-width:600px) {
  .page { padding:25px 16px 20px; }
  .hero { padding:10px 0 28px; }
  .brand { width:min(220px,65vw); margin-bottom:20px; }
  .logo-image { max-height:190px; }
  .features { grid-template-columns:repeat(2,1fr); gap:18px 0; padding:18px 4px; margin-top:28px; }
  .feature:nth-child(3)::before { display:none; }
  .feature:nth-child(3), .feature:nth-child(4) { padding-top:6px; }
  .feature h2 { font-size:12px; }
  .description { font-size:14px; }
  .eyebrow { font-size:9px; letter-spacing:.11em; }
  .status { font-size:9px; letter-spacing:.08em; }
}

.logo-image {
    display: block;
    width: 100%;
    max-height: 245px;
    object-fit: contain;

    /* Yellow Glow Shadow */
    filter:
        drop-shadow(0 0 5px #FFD700)
        drop-shadow(0 0 12px rgba(255, 215, 0, 0.8))
        drop-shadow(0 0 22px rgba(255, 193, 7, 0.6));

    transition: filter 0.3s ease;
}

/* Hover செய்யும்போது அதிக Glow */
.logo-image:hover {
    filter:
        drop-shadow(0 0 8px #FFD700)
        drop-shadow(0 0 18px rgba(255, 215, 0, 0.9))
        drop-shadow(0 0 30px rgba(255, 193, 7, 0.8));
}