/* ============================================================
   Katriviya™ — public landing page (Views/Home/Index.cshtml)
   Navy design (dark theme, the default here) with a matching light version for the theme switch.
   Every class starts with lp- so Bootstrap (used for the Contact sales dialog and icons) doesn't clash.
   ============================================================ */

.lp {
    --lp-bg: #f6f9ff;
    --lp-alt: #eaf1fb;
    --lp-panel: #ffffff;
    --lp-panel2: #f2f7ff;
    --lp-line: #d3e0f1;
    --lp-text: #0b1b36;
    --lp-muted: #4a5f7d;
    --lp-blue: #1d6fe0;
    --lp-bright: #2563eb;
    --lp-eyebrow: #1d6fe0;
    --lp-icon-bg: #dbe9fb;
    --lp-icon-fg: #1d5fbf;
    --lp-tag-bg: #e3eefc;
    --lp-tag-line: #b7d0f1;
    --lp-tag-fg: #1d5fbf;
    --lp-callout: #1d5fbf;
    --lp-hero: radial-gradient(ellipse at 78% 30%, #d5e6ff 0%, #e9f1fd 36%, #f6f9ff 75%);
    --lp-highlight: linear-gradient(110deg, #e1edff, #f2f7ff);
    --lp-highlight-line: #9cc0ee;
    --lp-card-bg: linear-gradient(150deg, #ffffff, #f3f8ff);
    --lp-ring: #2563eb22;
    background: var(--lp-bg);
    color: var(--lp-text);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
    height: auto;
}
[data-bs-theme="dark"] .lp {
    --lp-bg: #06132c;
    --lp-alt: #0a1b38;
    --lp-panel: #0e2549;
    --lp-panel2: #122f5a;
    --lp-line: #284976;
    --lp-text: #f4f8ff;
    --lp-muted: #b6cce7;
    --lp-blue: #67b8ff;
    --lp-bright: #338cff;
    --lp-eyebrow: #8dcaff;
    --lp-icon-bg: #1a4c87;
    --lp-icon-fg: #a8d9ff;
    --lp-tag-bg: #183d6d;
    --lp-tag-line: #3568a3;
    --lp-tag-fg: #a4d8ff;
    --lp-callout: #a9d8ff;
    --lp-hero: radial-gradient(ellipse at 78% 30%, #164d91 0%, #0a2450 36%, #06132c 75%);
    --lp-highlight: linear-gradient(110deg, #103568, #0d2247);
    --lp-highlight-line: #377bc4;
    --lp-card-bg: linear-gradient(150deg, #142f59, #0d2143);
    --lp-ring: #3189f233;
}
html:has(body.lp) { scroll-behavior: smooth; scroll-padding-top: 84px; background: #f6f9ff; height: auto; }
html[data-bs-theme="dark"]:has(body.lp) { background: #06132c; }
.lp a { color: inherit; text-decoration: none; }
.lp a:hover { color: var(--lp-blue); }
.lp a:focus-visible, .lp button:focus-visible { outline: 3px solid #b3dcff; outline-offset: 4px; }
.lp p { margin: 0 0 16px; }
/* Same page width as the current landing page: Bootstrap's .container (up to 1320px on wide screens). */

/* ── Top bar ── */
.lp-nav { position: sticky; top: 0; z-index: 1030; border-bottom: 1px solid var(--lp-line);
    background: color-mix(in srgb, var(--lp-bg) 91%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.lp-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; position: relative; }
.lp-brand img { height: 40px; width: auto; display: block; }
.lp .logo-on-dark { display: none !important; }
[data-bs-theme="dark"] .lp .logo-on-dark { display: block !important; }
[data-bs-theme="dark"] .lp .logo-on-light { display: none !important; }
.lp-menu { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.lp-menu a:not(.lp-btn) { font-size: .9rem; color: var(--lp-muted); }
.lp-menu a:not(.lp-btn):hover { color: var(--lp-blue); }
.lp-tools { display: flex; align-items: center; gap: 8px; }
.lp-theme { background: transparent; border: 1px solid var(--lp-line); color: var(--lp-muted); border-radius: 10px; padding: 6px 10px; line-height: 1; }
.lp-theme:hover { color: var(--lp-blue); }
.lp-menu-toggle { display: none; background: transparent; color: var(--lp-text); border: 1px solid var(--lp-line); padding: 8px 12px; border-radius: 8px; }

/* ── Buttons ── */
.lp-btn { display: inline-block; border: 1px solid #5aaeff; border-radius: 11px; background: var(--lp-bright); color: #fff !important;
    padding: 12px 19px; font-weight: 700; cursor: pointer; line-height: 1.3; font-size: 1rem; }
.lp-btn:hover { background: #5ca8ff; color: #06132c !important; }
.lp-btn-ghost { background: transparent; border-color: #5c80ad; color: var(--lp-text) !important; }
.lp-btn-ghost:hover { background: var(--lp-panel2); color: var(--lp-blue) !important; }
.lp-btn-sm { padding: 8px 14px; font-size: .9rem; }
.lp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0; }

/* ── Type ── */
.lp-eyebrow { color: var(--lp-eyebrow); text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; font-weight: 800; }
.lp h1, .lp-h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.1; letter-spacing: -.045em; margin: 16px 0 24px; font-weight: 800; color: var(--lp-text); }
.lp-h1 em { font-style: normal; color: var(--lp-blue); }
.lp-h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); line-height: 1.17; letter-spacing: -.03em; margin: 10px 0 20px; font-weight: 800; color: var(--lp-text); }
.lp-h3 { font-size: 1.22rem; margin: 0 0 10px; font-weight: 700; color: var(--lp-text); }
.lp-lead { font-size: 1.22rem; color: var(--lp-text); opacity: .9; }
.lp-muted { color: var(--lp-muted); }
.lp-small { font-size: .88rem; }
.lp-note { font-size: .85rem; color: var(--lp-muted); }
.lp-callout { font-size: 1.2rem; font-weight: 700; color: var(--lp-callout); }

/* ── Hero ── */
.lp-hero { position: relative; overflow: hidden; padding: 96px 0 84px; background: var(--lp-hero); }
.lp-hero::after { content: ""; position: absolute; width: 500px; height: 500px; border: 1px solid var(--lp-ring); border-radius: 50%;
    right: -110px; top: 20px; box-shadow: 0 0 0 80px #3189f20a, 0 0 0 160px #3189f207; pointer-events: none; }
.lp-hero .container { position: relative; z-index: 1; }
.lp-hero-layout { display: grid; grid-template-columns: 5fr 7fr;   /* same split as the current page */
    align-items: center; gap: 32px; }
.lp-hero-frame { border: 1px solid var(--lp-line); border-radius: 22px; background: var(--lp-card-bg); padding: 14px; box-shadow: 0 25px 80px #0004; }
.lp-hero-img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* ── Sections, grids, cards ── */
.lp-section { padding: 84px 0; }
.lp-alt { background: var(--lp-alt); }
.lp-head { margin-bottom: 32px; }   /* full width: text wraps only at the edge of the page */
.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lp-card { background: var(--lp-card-bg); border: 1px solid var(--lp-line); border-radius: 18px; padding: 27px; min-height: 100%; }
.lp-card p { color: var(--lp-muted); }
.lp-card p:last-child { margin-bottom: 0; }
.lp-card p strong { color: var(--lp-text); }
.lp-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; background: var(--lp-icon-bg); border-radius: 12px;
    color: var(--lp-icon-fg); font-size: 1.25rem; margin-bottom: 18px; flex-shrink: 0; }
.lp-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lp-tag { display: inline-block; font-size: .74rem; color: var(--lp-tag-fg); background: var(--lp-tag-bg); border: 1px solid var(--lp-tag-line);
    border-radius: 100px; padding: 3px 11px; margin-bottom: 14px; white-space: nowrap; }
.lp-tag-met { color: #15803d; background: #dcfce7; border-color: #86efac; }
.lp-tag-early { color: #b45309; background: #fef3c7; border-color: #fcd34d; }
[data-bs-theme="dark"] .lp-tag-met { color: #86efac; background: #0f3b2a; border-color: #2c7a55; }
[data-bs-theme="dark"] .lp-tag-early { color: #fcd34d; background: #3d2f0c; border-color: #8a6a1c; }
.lp-bullets { padding-left: 20px; color: var(--lp-muted); margin: 0; }
.lp-bullets li { margin-bottom: 8px; }
.lp-highlight { border: 1px solid var(--lp-highlight-line); background: var(--lp-highlight); border-radius: 24px; padding: 35px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.lp-chip { background: var(--lp-tag-bg); color: var(--lp-text); border: 1px solid var(--lp-tag-line); border-radius: 999px; padding: 3px 11px; font-size: .84rem; }
.lp-chip i { color: #22c55e; margin-right: 4px; }

/* ── Check-in showcase: the kiosk on a laptop, an iPad and a phone (scales with the stage width) ── */
.lp-showcase { border: 1px solid var(--lp-line); border-radius: 18px; background: var(--lp-card-bg); padding: 26px 22px 18px; margin: 0 0 22px; }
.lp-showcase-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-eyebrow); font-weight: 700; text-align: center; margin-bottom: 14px; }
.lp-devices { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 100 / 50; }
.lp-dev { position: absolute; }
.lp-dev img { display: block; width: 100%; height: auto; }
.lp-laptop { left: 9%; top: 0; width: 68%; }
.lp-dev-screen { background: #111827; padding: 2%; border-radius: clamp(8px, 1.6vw, 18px) clamp(8px, 1.6vw, 18px) 0 0;
    box-shadow: 0 0 0 1px #5c8ac1, 0 30px 60px -30px #000; }
.lp-dev-screen img { border-radius: 2px; }
.lp-laptop-base { position: relative; left: -8%; width: 116%; aspect-ratio: 100 / 2.6; border-radius: 0 0 40% 40% / 0 0 100% 100%;
    background: linear-gradient(#9fb3cf, #5c7397); box-shadow: 0 14px 24px -14px rgba(0,0,0,.6); }
.lp-laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 14%; height: 40%;
    border-radius: 0 0 8px 8px; background: #50678a; }
.lp-ipad { right: 0; bottom: 6%; width: 40%; background: #061225; padding: 1.6%; border-radius: clamp(10px, 2.2vw, 26px);
    box-shadow: 0 0 0 2px #5c8ac1, 0 30px 60px -24px #000; }
.lp-ipad img { border-radius: clamp(4px, 1vw, 12px); }
.lp-phone { left: 0; bottom: 0; width: 16%; background: #061225; padding: .9%; border-radius: clamp(12px, 3.2vw, 34px);
    box-shadow: 0 0 0 2px #5c8ac1, 0 30px 50px -20px #000; }
.lp-phone img { border-radius: clamp(9px, 2.6vw, 28px); }
.lp-phone::before { content: ""; position: absolute; left: 50%; top: 2.2%; transform: translateX(-50%); width: 30%; height: 2.6%;
    border-radius: 999px; background: #061225; z-index: 1; }
.lp-showcase-note { text-align: center; margin: 14px 0 0; }

/* ── Kumon requirements ── */
.lp-req-num { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--lp-text); }
.lp-req-num .lp-icon { margin-bottom: 0; }
.lp-card.lp-req { padding: 22px; }
.lp-card.lp-req .lp-bullets { font-size: .9rem; }

/* ── Any center ── */
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.lp-feature { list-style: none; padding: 0; margin: 20px 0 0; }
.lp-feature li { display: flex; gap: 14px; margin-bottom: 16px; color: var(--lp-muted); }
.lp-feature li strong { color: var(--lp-text); }
.lp-feature .lp-icon { width: 38px; height: 38px; font-size: 1.05rem; margin: 0; }

/* ── Roadmap ── */
.lp-step { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--lp-line); }
.lp-step:last-of-type { border-bottom: 0; }
.lp-num { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-icon-bg);
    color: var(--lp-icon-fg); font-weight: 800; }
.lp-step p { color: var(--lp-muted); margin: 0; }

/* ── Pricing ── */
.lp-price { font-size: 2.4rem; font-weight: 800; line-height: 1.2; margin-bottom: 12px; color: var(--lp-text); }
.lp-price span { font-size: .95rem; font-weight: 400; color: var(--lp-muted); }

/* ── Contact sales (Bootstrap modal; honeypot field) ── */
.lp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp .modal-content { text-align: left; }

/* ── Footer ── */
.lp-footer { border-top: 1px solid var(--lp-line); padding: 36px 0; color: var(--lp-muted); }
.lp-footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-footer-row strong, .lp-name strong { color: var(--lp-text); }
.lp-footer a { color: var(--lp-blue); }
.lp-word { white-space: nowrap; }
.lp-word + .lp-word::before { content: "·"; margin: 0 .4rem; color: var(--lp-blue); }
.lp-word [lang="ta"] { color: var(--lp-text); }
.lp-legal { font-size: .75rem; color: var(--lp-muted); }

/* ── Smaller screens ── */
@media (max-width: 991.98px) {
    .lp-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 850px) {
    .lp-hero-layout, .lp-split { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
    .lp-grid, .lp-grid-2, .lp-grid-4 { grid-template-columns: 1fr; }
    .lp-menu-toggle { display: block; }
    .lp-menu { display: none; position: fixed; left: 0; right: 0; top: 76px; background: var(--lp-bg); padding: 20px 24px;
        flex-direction: column; align-items: flex-start; border-bottom: 1px solid var(--lp-line); }
    .lp-menu.open { display: flex; }
    .lp-hero { padding: 64px 0 72px; }
    .lp-section { padding: 64px 0; }
}
@media (max-width: 575.98px) {
    .lp-brand img { height: 32px; }
    .lp-highlight, .lp-card { padding: 22px; }
    .lp-showcase { padding: 18px 10px 14px; }
    .lp-devices { aspect-ratio: 100 / 92; }
    .lp-laptop { left: 6%; width: 88%; }
    .lp-ipad { width: 58%; bottom: 0; }
    .lp-phone { width: 27%; bottom: 0; padding: 1.4%; }
}
@media (prefers-reduced-motion: reduce) {
    html:has(body.lp) { scroll-behavior: auto; }
}