/* =========================================================================
   LogicStack — "Fiber Optic" theme
   Loaded after each page's inline <style>, so everything here wins.
   Deep navy, Sora (light + semibold pairs), amber laser + cyan signal.
   ====================================================================== */

:root {
  --bg: #070B1F;
  --bg-warm: #0A1029;
  --bg-dark: #0B1236;
  --bg-dark-2: #111A48;
  --surface: rgba(232,236,255,0.035);
  --surface-hover: rgba(232,236,255,0.06);
  --ink: #E8ECFF;
  --ink-mid: #B3BAE0;
  --ink-dim: #8B93C4;
  --accent: #FFB000;
  --accent-light: #FFC53D;
  --accent-glow: rgba(255,176,0,0.12);
  --accent-text: #FFB000;
  --signal: #19D3FF;
  --teal: #19D3FF;
  --teal-light: #6BE3FF;
  --violet: #9B8CFF;
  --line: rgba(139,147,196,0.16);
  --line-dark: rgba(139,147,196,0.18);
  --display: 'Sora', system-ui, sans-serif;
  --sans: 'Sora', system-ui, sans-serif;
  --radius: 16px;
  /* app pages: one system-wide accent instead of a per-app colour */
  --ff-a: #FFB000;
  --ff-a2: #19D3FF;
  --ff-glow: rgba(25,211,255,0.10);
}

html { background: var(--bg); color-scheme: dark; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 400; letter-spacing: -0.005em; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline-color: var(--accent); }

/* ---- type: light display, semibold emphasis -------------------------- */
.hero h1, .subhero h1, .section-title, .big-cta h2, .contact-info h2,
.thanks-card h1, .ff-id h1, .split-card h3 {
  font-family: var(--display); font-weight: 300; letter-spacing: -0.04em;
}
.hero h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.07; }
.subhero h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; }
.section-title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.big-cta h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.08; }
.ff-id h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.08; }
.hero h1 em, .subhero h1 em, .section-title em, .big-cta h2 em, .contact-info h2 em,
.thanks-card h1 em, .ff-id h1 em, .pain .section-title em {
  font-style: normal; font-weight: 600; color: #fff;
}
.feat-card h3, .pain-card h3, .step h3, .ff-card h3, .split-card h3,
.fieldset > .leg h2, .app-name {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
}
.feat-card h3, .ff-card h3, .pain-card h3 { font-size: 19px; }
.split-card h3 { font-size: 26px; font-weight: 300; }
.app-name { font-size: 18px; }
.trust-item .big, .local-card .big, .ap-stat .n, .ff-plan .price,
.step-num, .hero-float .num, .apps-count b {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.03em;
}
.section-label { color: var(--signal); letter-spacing: 0.14em; }
.pain .section-label { color: var(--signal); }
.ff-dev, .apps-crumbs, .crumbs { color: var(--ink-dim); }

/* ---- nav ------------------------------------------------------------- */
.nav { background: rgba(7,11,31,0.72); border-bottom-color: var(--line); }
.nav.scrolled { background: rgba(7,11,31,0.92); box-shadow: 0 16px 40px -24px rgba(0,0,0,0.8); }
.nav::after { background: linear-gradient(90deg, var(--signal), var(--accent)); }
.logo { color: var(--ink); font-weight: 600; letter-spacing: -0.03em; }
.logo-icon {
  width: 32px; height: 32px; padding: 0; border-radius: 0;
  background: none; box-shadow: none; color: inherit; font-size: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.logo-icon svg { width: 32px; height: 32px; overflow: visible; }
.logo-icon path { stroke-width: 3.5; stroke-linejoin: round; }
.logo-icon .l1 { fill: #FFB000; stroke: #FFB000; transition: transform .25s ease; }
.logo-icon .l2 { fill: rgba(25,211,255,0.22); stroke: #19D3FF; transition: transform .25s ease; }
.logo-icon .l3 { fill: none; stroke: #19D3FF; opacity: 0.55; }
.logo:hover .logo-icon { transform: none; box-shadow: none; }
.logo:hover .logo-icon .l1 { transform: translateY(-3px); }
.logo:hover .logo-icon .l2 { transform: translateY(-1.5px); }
@media (prefers-reduced-motion: reduce) { .logo:hover .logo-icon .l1, .logo:hover .logo-icon .l2 { transform: none; } }
.nav-links { color: var(--ink-dim); }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a::after { background: var(--accent); }
.nav-cta, .mobile-menu .nav-cta {
  background: var(--accent); color: var(--bg); border-radius: 99px; font-weight: 600;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.nav-cta:hover { box-shadow: 0 8px 26px rgba(255,176,0,0.35); }
.nav-toggle { background: transparent; border-color: var(--line); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--ink); }
.nav-toggle.open span { background: transparent; }
.mobile-menu { background: var(--bg); border-bottom-color: var(--line); }
.mobile-menu a { color: var(--ink-mid); border-top-color: var(--line); }

/* ---- buttons --------------------------------------------------------- */
.btn { border-radius: 99px; font-weight: 600; }
.btn-primary { background: var(--accent); color: var(--bg); box-shadow: 0 8px 28px rgba(255,176,0,0.22); }
.btn-primary:hover { background: var(--accent-light); box-shadow: 0 12px 34px rgba(255,176,0,0.35); }
.btn-outline { border-color: rgba(139,147,196,0.35); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.form-submit { background: var(--accent); color: var(--bg); border-radius: 99px; }
.form-submit:hover { background: var(--accent-light); }

/* ---- surfaces that were white cards ---------------------------------- */
.hero-badge, .hero-panel, .hero-float, .split-card, .feat-card, .cred-card,
.local-card, form, .app-card, .ff-card, .ff-plan, .ff-fine, .ap-stat,
.fieldset, .pk-stat, .pk-letter, .pk-game, .assess-preview, .ff-chip {
  background: var(--surface); border-color: var(--line); box-shadow: none;
}
.split-card:hover, .feat-card:hover, .ff-card:hover, .app-card:hover {
  background: var(--surface-hover); border-color: rgba(255,176,0,0.4);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,176,0,0.12);
}
.split-card::after, .app-card::before { background: linear-gradient(90deg, var(--signal), var(--accent)); }
.split-icon, .ff-ico { background: rgba(255,176,0,0.10); color: var(--accent); }
.split-icon.teal { background: rgba(25,211,255,0.10); color: var(--signal); }
.split-list li::before, .ff-plan li::before { background: var(--signal); }
.split-card .more { color: var(--accent); }
.feat-tag { background: rgba(232,236,255,0.06); color: var(--ink-mid); }
.cred-badge { background: rgba(232,236,255,0.04); border-color: var(--line); color: var(--ink); }
.cred-badge.accent { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.ff-warn { background: rgba(255,176,0,0.06); border-color: rgba(255,176,0,0.3); }
.ff-plan.pro { border-color: rgba(255,176,0,0.5); box-shadow: 0 0 0 1px rgba(255,176,0,0.15); }

/* ---- sections -------------------------------------------------------- */
.hero::before { background: radial-gradient(circle, rgba(255,176,0,0.10), transparent 70%); }
.hero::after { background: radial-gradient(circle, rgba(25,211,255,0.08), transparent 70%); }
.subhero::before, .ff-hero::before { background: radial-gradient(circle, rgba(25,211,255,0.09), transparent 70%); }
.trust { background: var(--bg-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-item .big { color: var(--ink); }
.trust-item .lbl, .trust-logos .ll { color: var(--ink-dim); }
.trust-logos { border-top-color: var(--line); }
.pain, .big-cta { background: radial-gradient(ellipse at 75% 40%, #141c45, var(--bg-dark) 65%); }
.pain::before, .big-cta::before { background: radial-gradient(circle at 50% 50%, rgba(255,176,0,0.08), transparent 60%); }
.pain-card { background: rgba(7,11,31,0.55); border-color: var(--line); }
.pain-card:hover { border-color: rgba(25,211,255,0.4); }
.pain-card p, .pain .section-sub, .big-cta p { color: var(--ink-dim); }
.pain-card .icon.orange { background: rgba(255,176,0,0.12); color: var(--accent); }
.pain-card .icon.teal { background: rgba(25,211,255,0.12); color: var(--signal); }
.pain-card .icon.violet { background: rgba(155,140,255,0.12); color: var(--violet); }
.how, .contact, .ff-pro { background: var(--bg-warm); }
.how-steps::before { background: linear-gradient(90deg, var(--accent), var(--signal)); opacity: 0.35; }
.step-num { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.step:hover .step-num { background: var(--accent); color: var(--bg); box-shadow: 0 0 28px rgba(255,176,0,0.45); }
.assess { background: var(--bg); border-color: var(--line); }
.assess-feat .check { background: rgba(25,211,255,0.12); color: var(--signal); }
.assess-q .qnum { color: var(--signal); }
.local-card .big { color: var(--accent); }
.local-areas span { border-color: var(--line); color: var(--ink-mid); }
.big-cta .btn-primary { box-shadow: 0 8px 34px rgba(255,176,0,0.35); }
.thanks-mark { background: rgba(25,211,255,0.12); color: var(--signal); }
footer { border-top-color: var(--line); background: var(--bg); }
.footer-top { border-bottom-color: var(--line); }
.footer-nav a:hover, .footer-bottom a:hover { color: var(--accent); }

/* ---- forms ----------------------------------------------------------- */
label { color: var(--ink); }
input, textarea, select { background: rgba(232,236,255,0.04); border-color: var(--line); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--ink-dim); opacity: 0.8; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,176,0,0.15); }
select option { background: #0A1029; color: var(--ink); }
.check-item { background: rgba(232,236,255,0.03); border-color: var(--line); color: var(--ink-mid); }
.check-item:hover { border-color: var(--accent); }
.fieldset > .leg .n { background: rgba(255,176,0,0.12); color: var(--accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---- apps shelf ------------------------------------------------------ */
.filter-btn { background: transparent; border-color: var(--line); color: var(--ink-mid); }
.filter-btn:hover { border-color: var(--ink-mid); color: var(--ink); }
.filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.apps-count b { color: var(--ink); }
.app-icon { box-shadow: 0 8px 22px rgba(0,0,0,0.45); }
.app-icon-fallback { color: var(--bg); background: linear-gradient(135deg, var(--accent-light), var(--accent)); }
.app-cat { color: var(--ink-dim); }
.app-cat::before { background: var(--signal); }
[data-type="game"] .app-cat::before { background: var(--accent); }
.app-tagline { color: var(--ink); }
.act { border-radius: 99px; }
.act-primary { background: var(--ink); color: var(--bg); }
.act-primary:hover { background: var(--accent); color: var(--bg); }
.act-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.act-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.apps-note a { color: var(--accent); }

/* ---- app detail pages ------------------------------------------------ */
.ff-chip { color: var(--ink-mid); }
.ff-chip.violet { background: rgba(255,176,0,0.08); border-color: rgba(255,176,0,0.35); color: var(--accent); }
.ff-icon { box-shadow: 0 12px 34px rgba(0,0,0,0.5); }
.ff-play { background: var(--ink); color: var(--bg); border-radius: 14px; box-shadow: none; }
.ff-play:hover { background: var(--accent); color: var(--bg); box-shadow: 0 12px 30px rgba(255,176,0,0.3); }
.ff-play.light { background: var(--ink); color: var(--bg); }
.ff-play.light:hover { background: var(--accent); color: var(--bg); }
.ff-hero-shot img, .ff-shot img { border-color: var(--line); box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7); }
.ff-q { border-bottom-color: var(--line); }
.ff-q summary { color: var(--ink); }
.ff-q summary::after { color: var(--accent); }
.ff-fine li strong, .ff-warn p strong { color: var(--ink); }

/* ---- signature: warp hero (homepage) --------------------------------- */
.hero.fiber-hero { min-height: min(86vh, 760px); display: flex; align-items: center; background: #070B1F; }
.hero.fiber-hero::before, .hero.fiber-hero::after { display: none; }
.hero.fiber-hero .container { position: relative; z-index: 2; width: 100%; }
.warp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,11,31,0.92) 0%, rgba(7,11,31,0.7) 38%, rgba(7,11,31,0) 66%);
}
@media (max-width: 900px) {
  .hero.fiber-hero { min-height: 0; }
  .hero-scrim { background: linear-gradient(180deg, rgba(7,11,31,0.25) 0%, rgba(7,11,31,0.82) 32%, rgba(7,11,31,0.9) 100%); }
}

/* apps page: the count line is the page h1 */
h1.apps-count { font-weight: 500; }

/* footer links: comfortable tap targets on phones */
.footer-nav a { display: inline-block; padding: 6px 0; }
@media (max-width: 720px) { .footer-nav { gap: 6px 22px; } .footer-nav a { padding: 8px 0; } }

/* ---- apps page header: title + dock of every app ---------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.apps-head { text-align: center; padding: 18px 0 30px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.apps-head .apps-crumbs { margin-bottom: 14px; }
.apps-title { font-family: var(--display); font-weight: 300; font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -0.045em; line-height: 1.08; }
.apps-title b { font-weight: 600; color: #fff; }
.dock-wrap { display: flex; justify-content: center; margin: 46px 0 26px; }
.dock {
  display: flex; align-items: flex-end; gap: 10px; height: 84px; padding: 0 16px 14px;
  border-radius: 24px; background: rgba(232,236,255,0.06); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,0.8);
}
.dock-item { position: relative; display: block; width: 56px; height: 56px; flex-shrink: 0; border-radius: 24%; transition: width .12s ease-out, height .12s ease-out, opacity .25s, filter .25s; }
.dock-item img { width: 100%; height: 100%; border-radius: 24%; display: block; box-shadow: 0 8px 18px rgba(0,0,0,0.45); background: var(--bg-warm); }
.dock-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.dock-item.dim { opacity: 0.22; filter: grayscale(0.7); }
.dock-tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 4px);
  background: rgba(10,16,41,0.95); border: 1px solid var(--line); color: var(--ink);
  font: 500 12.5px var(--sans); white-space: nowrap; padding: 6px 10px; border-radius: 8px;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5;
}
.dock-item:hover .dock-tip, .dock-item:focus-visible .dock-tip { opacity: 1; transform: translate(-50%, 0); }
.apps-head .apps-filters { justify-content: center; }
.filter-btn .n { opacity: 0.55; margin-left: 4px; font-weight: 500; }
@media (max-width: 1100px) { .dock { gap: 7px; padding: 0 12px 12px; } .dock-item { width: 48px; height: 48px; } }
@media (max-width: 820px) {
  .dock-wrap {
    justify-content: flex-start; overflow-x: auto; margin: 24px -28px 20px; padding: 6px 28px 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
  .dock-wrap::-webkit-scrollbar { display: none; }
  .dock { height: 70px; padding: 0 12px 12px; gap: 9px; flex-shrink: 0; }
  .dock-item { width: 46px; height: 46px; scroll-snap-align: start; }
  .dock-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dock-item, .dock-tip { transition: none; } }

/* store buttons: App Store and Google Play always the same size */
.ff-play { min-width: 214px; }

/* feature cards: 3D icons replace the emoji tiles */
.ff-ico.has-img { width: 88px; height: 88px; border-radius: 0; background: none; margin: -6px auto 16px; }
.ff-ico.has-img img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.38)); }
@media (max-width: 720px) { .ff-ico.has-img { width: 76px; height: 76px; } }
.ff-card:has(.ff-ico.has-img) { text-align: center; }
.ff-ico.ff-glyph { font-family: 'Noto Sans Gurmukhi', sans-serif; font-weight: 700; font-size: 60px; line-height: 1; color: var(--accent); text-shadow: 0 12px 18px rgba(0,0,0,0.38); }
@media (max-width: 720px) { .ff-ico.ff-glyph { font-size: 52px; } }
/* batch 2: 3D icons in the three-card sections, service cards and local cards */
.pain-card .icon.has-img { width: 88px; height: 88px; border-radius: 0; background: none; margin: -6px auto 16px; }
.pain-card:has(.icon.has-img) { text-align: center; }
.split-icon.has-img { width: 76px; height: 76px; border-radius: 0; background: none; margin: -6px auto 16px; }
.local-card .big.has-img { width: 80px; height: 80px; margin: 0 auto 10px; }
.icon.has-img img, .split-icon.has-img img, .local-card .big.has-img img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.38)); }
@media (max-width: 720px) { .pain-card .icon.has-img { width: 76px; height: 76px; } }
.split-card:has(.split-icon.has-img) { text-align: center; align-items: center; }
.split-card:has(.split-icon.has-img) .split-list { width: fit-content; max-width: 100%; text-align: left; }
/* app pages: header icon sized to the two-line title beside it */
.ff-id { gap: 26px; }
.ff-icon { width: 128px; height: 128px; border-radius: 30px; }
@media (max-width: 900px) { .ff-icon { width: 108px; height: 108px; border-radius: 26px; } }
@media (max-width: 460px) { .ff-id { gap: 16px; } .ff-icon { width: 96px; height: 96px; border-radius: 23px; } }
/* app pages: centered hero, icon stacked above the title */
.ff-hero-grid > div:first-child { text-align: center; }
.ff-id { flex-direction: column; justify-content: center; text-align: center; gap: 18px; }
.ff-lede { margin-left: auto; margin-right: auto; }
.ff-chips, .ff-ctas { justify-content: center; }
@media (max-width: 900px) { .ff-hero-shot { margin-left: auto; margin-right: auto; } }
.ff-lede-pa { font-family: 'Noto Sans Gurmukhi', sans-serif; font-weight: 600; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--accent); margin: -10px auto 26px; }
/* Punjabi for Kids header: description and Punjabi line in one glass card */
.ff-glass { max-width: 600px; margin: 0 auto 26px; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(232,236,255,0.05), rgba(232,236,255,0.015)); }
.ff-glass .ff-lede { margin: 0 auto; }
.ff-glass .ff-lede-pa { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 460px) { .ff-glass { padding: 16px 16px; } }
/* app pages: byline between fading rules */
.ff-id > div { width: 100%; }
.ff-dev { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 560px; margin: 12px auto 0; color: var(--ink-mid); }
.ff-dev::before, .ff-dev::after { content: ''; flex: 1 1 0; min-width: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(25,211,255,0.6)); }
.ff-dev::after { background: linear-gradient(90deg, rgba(25,211,255,0.6), transparent); }