/* ═══════════════════════════════════════════════════════════
   Home Page Styles
   Requires: design-system.css, components.css
   ═══════════════════════════════════════════════════════════ */

/* === Migrated from inline <style> block === */

/* ── HOMEPAGE-SPECIFIC STYLES ─────────────────────────────── */

/* Hero */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  padding-top:calc(var(--nav-h) + var(--abar-h));overflow:hidden;position:relative;gap:var(--sp-8)}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 60% at 80% 50%,var(--vk-gl),transparent);pointer-events:none}
.hero-left{padding:var(--sp-16) 0 var(--sp-16) var(--sp-10);position:relative;z-index:2}
.hero-right{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp-16) var(--sp-10) var(--sp-16) 0;position:relative;z-index:2}

.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:var(--gold-d);
  color:var(--gold);border:1px solid var(--gold-g);padding:.28rem .85rem;border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.75rem}
.hero-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;
  animation:edot 2s ease-in-out infinite}
@keyframes edot{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.6);opacity:1}}

.hero-h{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:600;
  letter-spacing:-.02em;line-height:1.15;margin-bottom:1.5rem;
  color:var(--text-1);
  background:linear-gradient(135deg,var(--text-1),var(--text-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero-sub{font-size:var(--text-lead);color:var(--text-2);line-height:1.7;
  margin-bottom:var(--sp-8);max-width:420px}
.hero-ctas{display:flex;gap:var(--sp-4);flex-wrap:wrap}

/* Orbit */
.orb{position:relative;width:340px;height:340px;flex-shrink:0}
.ocore{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#e0bf6e,#c9a84c,#7a5a20);
  box-shadow:0 0 40px rgba(201,168,76,.38),0 0 90px rgba(201,168,76,.1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;gap:1px}
.ocore-t{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--bg);line-height:1}
.ocore-s{font-size:.42rem;font-weight:700;letter-spacing:.1em;color:rgba(6,9,20,.55);text-transform:uppercase}
.or1{position:absolute;top:50%;left:50%;width:188px;height:188px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px dashed rgba(232,117,106,.4);animation:ocw 12s linear infinite}
.sr{position:absolute;top:50%;left:-18px;transform:translateY(-50%);width:36px;height:36px;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--rn-l),var(--rn));
  box-shadow:0 0 16px var(--rn-g);display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;color:#fff;animation:sccw 12s linear infinite;font-family:var(--font-display)}
.or2{position:absolute;top:50%;left:50%;width:302px;height:302px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px dashed rgba(0,180,162,.3);animation:occw 18s linear infinite}
.sv{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:40px;height:40px;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--vk-l),var(--vk));
  box-shadow:0 0 20px var(--vk-g);display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:700;color:var(--bg);animation:scw 18s linear infinite;font-family:var(--font-vakio)}
.or3{position:absolute;top:50%;left:50%;width:334px;height:334px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(255,255,255,.03)}
@keyframes ocw{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes occw{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes sccw{to{transform:translateY(-50%) rotate(-360deg)}}
@keyframes scw{to{transform:translateX(-50%) rotate(360deg)}}
.orb-leg{display:flex;gap:1.25rem;margin-top:1.25rem;justify-content:center}
.orb-li{display:flex;align-items:center;gap:.4rem;font-size:var(--text-xs);color:var(--text-3)}
.orb-ld{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* Orbit legend dot colours (migrated from style="" attributes) */
.orb-ld--rn{background:var(--rn)}
.orb-ld--vk{background:var(--vk)}

/* ── PRODUCT GATEWAY ──────────────────────────────────────── */
.gateway{background:var(--bg-s);padding:0}
.gw-feature{display:grid;grid-template-columns:1fr;min-height:520px}

.gw-card{display:flex;flex-direction:column;position:relative;overflow:hidden;
  text-decoration:none;color:inherit;transition:background var(--ease-base)}
.gw-card-vk{background:linear-gradient(145deg,var(--bg-c),rgba(0,180,162,.05))}
.gw-card-feature{min-height:520px}

/* Vākio feature card headline + tagline */
.gw-feature-eyebrow{display:inline-flex;align-items:center;gap:.5rem;
  background:var(--vk-d);color:var(--vk-l);border:1px solid var(--vk-b);
  padding:.3rem .85rem;border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  align-self:flex-start;margin-bottom:1.5rem}
.gw-feature-eyebrow .hero-dot{background:var(--vk)}
.gw-feature-h{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,2.85rem);
  font-weight:600;letter-spacing:-.015em;line-height:1.18;color:var(--text-1);
  margin-bottom:1.1rem;max-width:780px}
.gw-feature-h em{font-style:italic;color:var(--vk-l);font-weight:600}
.gw-feature-sub{font-size:var(--text-md);color:var(--text-2);line-height:1.7;
  max-width:680px;margin-bottom:var(--sp-6)}

/* Capability strip */
.gw-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:var(--sp-6)}
.gw-cap{background:var(--bg);border:1px solid var(--b1);border-radius:var(--radius-lg);
  padding:1rem 1.1rem;transition:border-color var(--ease-base),transform var(--ease-base)}
.gw-card:hover .gw-cap{border-color:var(--vk-b)}
.gw-cap:hover{transform:translateY(-2px)}
.gw-cap-icon{font-size:1.45rem;display:block;margin-bottom:.45rem}
.gw-cap-t{font-size:var(--text-sm);font-weight:600;color:var(--text-1);margin-bottom:.25rem;line-height:1.3}
.gw-cap-d{font-size:var(--text-sm);color:var(--text-2);line-height:1.5}

/* Resona small strip */
.gw-strip{background:var(--bg-c);border-top:1px solid var(--b0);padding:var(--sp-6) var(--sp-10);
  display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap}
.gw-strip-eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);flex-shrink:0}
.gw-strip-body{flex:1;min-width:240px;display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap}
.gw-strip-name{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--rn-l)}
.gw-strip-tag{font-size:var(--text-sm);color:var(--text-2);line-height:1.5}
.gw-strip-cta{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--text-sm);font-weight:700;
  color:var(--rn-l);transition:gap var(--ease-base);text-decoration:none;flex-shrink:0}
.gw-strip-cta:hover{gap:.8rem}

/* Atmospheric glow on hover */
.gw-card::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--ease-base);pointer-events:none}
.gw-card-rn::after{background:radial-gradient(ellipse 60% 60% at 80% 80%,rgba(232,117,106,.12),transparent)}
.gw-card-vk::after{background:radial-gradient(ellipse 60% 60% at 20% 80%,rgba(0,180,162,.12),transparent)}
.gw-card:hover::after{opacity:1}

.gw-inner{padding:3rem 3.5rem;position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;gap:0}

/* Product type label */
.gw-type{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .7rem;border-radius:var(--radius-pill);border:1px solid;
  display:inline-block;align-self:flex-start;margin-bottom:1.75rem}
.gw-card-rn .gw-type{color:var(--rn-l);background:var(--rn-d);border-color:var(--rn-b)}
.gw-card-vk .gw-type{color:var(--vk-l);background:var(--vk-d);border-color:var(--vk-b)}

/* Product name / logo */
.gw-name{margin-bottom:.65rem}
.gw-name img{height:42px;width:auto;object-fit:contain;
  filter:drop-shadow(0 3px 10px var(--rn-g))}
.gw-vk-word{font-family:var(--font-vakio);font-size:2.4rem;font-weight:700;
  color:var(--text-1);line-height:1}
.gw-vk-hi{font-family:var(--font-hindi);font-size:var(--text-sm);font-weight:500;
  color:var(--vk2);letter-spacing:.04em;margin-top:.15rem}

/* One-liner */
.gw-line{font-family:var(--font-display);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:400;
  font-style:italic;color:var(--text-2);line-height:1.35;margin-bottom:1.5rem}

/* Use-case chips */
.gw-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--sp-8);flex:1;align-content:flex-start}
.gw-chip{font-size:.7rem;font-weight:600;padding:.22rem .65rem;border-radius:var(--radius-pill);border:1px solid}
.gw-card-rn .gw-chip{background:var(--rn-d);color:var(--rn-l);border-color:var(--rn-b)}
.gw-card-vk .gw-chip{background:var(--vk-d);color:var(--vk-l);border-color:var(--vk-b)}

/* CTA row */
.gw-cta-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
  padding-top:1.5rem;border-top:1px solid var(--b0)}
.gw-cta-link{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:700;
  transition:gap var(--ease-base)}
.gw-card:hover .gw-cta-link{gap:.8rem}
.gw-card-rn .gw-cta-link{color:var(--rn-l)}.gw-card-vk .gw-cta-link{color:var(--vk-l)}
.gw-fine{font-size:var(--text-xs);color:var(--text-3);letter-spacing:.02em}

/* Founder escape */
.gw-foot{text-align:center;padding:1.25rem var(--sp-8);border-top:1px solid var(--b0);
  display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}
.gw-foot span{font-size:var(--text-xs);color:var(--text-3)}
.gw-foot a{font-size:var(--text-xs);color:var(--gold);font-weight:600;transition:opacity var(--ease-base)}
.gw-foot a:hover{opacity:.7}

/* ── DNA FORMULA ──────────────────────────────────────────── */
.dna-sec{padding:5.5rem 0;background:var(--bg)}
.dna-sec h2{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2.0rem);
  font-weight:600;color:var(--text-1);letter-spacing:-.015em;margin-bottom:.5rem}
.dna-sub{font-size:var(--text-md);color:var(--text-2);margin-bottom:3rem}
.dna-formula{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;margin-top:2.5rem}
.dna-card{flex:1;background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);
  padding:2.25rem 1.5rem 2rem;text-align:center;position:relative;overflow:hidden;
  transition:transform var(--ease-base),border-color var(--ease-base)}
.dna-card:hover{transform:translateY(-5px)}
.dna-card.ai{border-color:rgba(201,168,76,.25)}.dna-card.tr{border-color:rgba(232,117,106,.25)}
.dna-card.co{border-color:rgba(0,180,162,.25)}.dna-card.rs{border:2px solid var(--gold-g);background:linear-gradient(135deg,var(--bg-c),var(--bg-ch))}
.dna-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--ease-base);pointer-events:none}
.dna-card.ai::before{background:radial-gradient(ellipse at top,rgba(201,168,76,.1),transparent 70%)}
.dna-card.tr::before{background:radial-gradient(ellipse at top,rgba(232,117,106,.1),transparent 70%)}
.dna-card.co::before{background:radial-gradient(ellipse at top,rgba(0,180,162,.1),transparent 70%)}
.dna-card.rs::before{background:radial-gradient(ellipse at top,rgba(201,168,76,.15),transparent 70%)}
.dna-card:hover::before{opacity:1}
.dna-icon{font-size:2.8rem;display:block;margin-bottom:.85rem}
.dna-name{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin-bottom:.3rem}
.dna-card.ai .dna-name{color:var(--gold)}.dna-card.tr .dna-name{color:var(--rn-l)}
.dna-card.co .dna-name{color:var(--vk-l)}.dna-card.rs .dna-name{color:var(--gold)}
.dna-note{font-size:var(--text-sm);color:var(--text-2);line-height:1.5}
.dna-op{font-family:var(--font-display);font-size:2.2rem;font-weight:300;color:var(--text-3);
  padding:0 .85rem;flex-shrink:0;line-height:1}

/* ── VISION ───────────────────────────────────────────────── */
.vis-sec{padding:6rem 0;background:var(--bg-s)}
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);margin-top:2.5rem}
.pillar{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);
  padding:2rem 1.25rem 1.75rem;text-align:center;position:relative;overflow:hidden;
  transition:transform var(--ease-base),border-color var(--ease-base),box-shadow var(--ease-base)}
.pillar::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity var(--ease-base)}
.pillar:hover{transform:translateY(-5px);border-color:var(--gold-g);box-shadow:0 16px 40px rgba(201,168,76,.1)}
.pillar:hover::before{opacity:1}
.pillar-n{font-family:var(--font-display);font-size:3.2rem;font-weight:700;
  color:var(--gold-gl);line-height:1;margin-bottom:.5rem}
[data-theme="light"] .pillar-n{
  color:rgba(122,93,26,.32);
  -webkit-text-stroke:1px rgba(122,93,26,.60)}
.pillar-icon{font-size:1.5rem;margin-bottom:.55rem;display:block}
.pillar-t{font-size:var(--text-sm);font-weight:600;color:var(--text-1);line-height:1.35}

/* ── ABOUT ────────────────────────────────────────────────── */
.about-sec{padding:6rem 0;background:var(--bg)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.5rem;margin-bottom:3rem}
.stat{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);
  padding:2rem var(--sp-4);text-align:center}
.stat-n{font-family:var(--font-display);font-size:3rem;font-weight:700;color:var(--gold);line-height:1}
.stat-l{font-size:var(--text-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);margin-top:.35rem}
.ac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.ac{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);padding:1.75rem}
.ac-t{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--gold);margin-bottom:.6rem}
.ac-d{font-size:var(--text-base);color:var(--text-2);line-height:1.7;margin:0}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:1100px){
  .pillars{grid-template-columns:repeat(3,1fr)}
  .dna-formula{flex-wrap:wrap}.dna-op{display:none}.dna-card{min-width:calc(50% - 1rem)}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}.hero-right{display:none}.hero-left{padding:4rem 2.5rem}
  .gw-caps{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ac-grid{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .gw-inner{padding:2.25rem 1.75rem 2rem}
  .gw-strip{padding:1.5rem 1.75rem;flex-direction:column;align-items:flex-start;gap:.85rem}
  .dna-formula{flex-direction:column;flex-wrap:nowrap;gap:var(--sp-4)}.dna-card{width:100%;flex:none}
  .ac-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .gw-caps{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}
  .gw-inner{padding:1.75rem 1.25rem 1.5rem}
  .hero-ctas .btn{width:100%;max-width:320px}
}

/* ── H-01: Hero heading clamp lower bound reduced for small screens ── */
@media(max-width:480px){
  .hero-h{font-size:clamp(1.8rem,5vw,4.5rem)}
}

/* ── Priority 4: font-size floors ──────────────────────────── */
.compliance-label{font-size:var(--text-xs)}
.hero-fine{font-size:var(--text-xs)}
@media(max-width:480px){
  .gw-fine{font-size:var(--text-xs)}
  .gw-foot span,.gw-foot a{font-size:var(--text-xs)}
  .gw-cap-d{font-size:var(--text-sm)}
  .compliance-label{font-size:var(--text-xs)}
  .hero-fine{font-size:var(--text-xs)}
}

/* ── Migrated from style="" attributes ──────────────────────── */

/* Hero fine-print paragraph */
.hero-fine{
  margin-top:1.25rem;
  font-size:var(--text-xs);
  color:var(--text-3);
  letter-spacing:.02em
}

/* Hero fine-print inline link (Resona) */
.hero-fine-link{
  color:var(--rn-l);
  font-weight:600;
  margin-left:.4rem
}

/* Vision section: canonical statement paragraph */
.vision-statement{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2.4vw,1.95rem);
  font-weight:500;
  font-style:italic;
  color:var(--text-1);
  line-height:1.45;
  letter-spacing:-.005em;
  max-width:920px;
  margin:0 0 2rem 0
}

/* Vision section: "Five pillars" sub-heading */
.vision-pillars-heading{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.6vw,2rem);
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--text-1);
  margin-bottom:2.5rem;
  line-height:1.2
}

/* About section: company name heading */
.about-heading{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3.5vw,2.8rem);
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--text-1);
  margin-bottom:2.5rem;
  line-height:1.2
}

/* About section: compliance posture card */
.compliance-posture-block{
  margin-top:2.25rem;
  padding:1.4rem 1.65rem;
  background:var(--bg-c);
  border:1px solid var(--b1);
  border-radius:var(--radius-xl)
}

/* Compliance posture: label */
.compliance-label{
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.55rem
}

/* Compliance posture: body copy */
.compliance-posture-body{
  font-size:var(--text-base);
  color:var(--text-2);
  line-height:1.65;
  margin:0 0 .85rem 0
}

/* Compliance posture: strong highlights within body */
.compliance-posture-body strong{
  color:var(--text-1)
}

/* Compliance posture: fine-print disclaimer */
.compliance-posture-fine{
  font-size:var(--text-xs);
  color:var(--text-3);
  line-height:1.5;
  margin:0;
  font-style:italic
}

/* Contact modal: info block */
.modal-contact-block{
  background:var(--bg-s);
  border:1px solid var(--b0);
  border-radius:10px;
  padding:1.2rem 1.4rem;
  margin-bottom:1.4rem
}

/* Contact modal: company name strong */
.modal-contact-name{
  color:var(--text-1)
}

/* Contact modal: email link */
.modal-contact-email{
  color:var(--gold)
}

/* Contact modal: last paragraph in info block */
.modal-contact-last{
  margin-bottom:0
}

/* Contact modal: action buttons row */
.modal-contact-links{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  justify-content:center;
  padding-top:1.1rem;
  border-top:1px solid var(--b0)
}

/* Privacy modal: full-policy fine-print */
.modal-privacy-fine{
  margin-top:1.5rem;
  font-size:0.85em;
  opacity:0.7
}

@media(max-width:480px){
  .hero-sub{font-size:var(--text-md)}
}

/* ── LIGHT THEME OVERRIDES ────────────────────────────────── */
/* Orbit rings tuned for dark bg — boost opacity for white bg */
[data-theme="light"] .or1{border-color:rgba(170,63,54,.60)}
[data-theme="light"] .or2{border-color:rgba(0,110,100,.50)}
/* .or3 is a near-invisible decorative ring — keep it transparent on light bg
   (making it visible creates a double-ring with .or2 since they're only 32px apart) */
[data-theme="light"] .or3{border-color:transparent}