:root{--bg:#020304;--text:#f8f6ef;--muted:#c6ccd6;--gold:#d8b86f;--gold2:#ffe39d;--goldline:rgba(216,184,111,.32);--pink:#ff54c7;--blue:#62d7ff;--violet:#a66dff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020304;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 68% 12%,rgba(216,184,111,.22),transparent 34%),radial-gradient(circle at 16% 38%,rgba(98,215,255,.10),transparent 30%),linear-gradient(180deg,#020304,#060910 48%,#020304)}body:after{content:"";position:fixed;inset:0;z-index:-2;opacity:.15;background:radial-gradient(circle,rgba(255,255,255,.32) 1px,transparent 1.6px);background-size:92px 92px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.header{height:96px;position:fixed;inset:0 0 auto;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:0 4.6vw;background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.10));border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(18px)}.logo{height:76px;max-width:400px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(255,255,255,.24))}.nav{display:flex;gap:24px;font-size:13px}.nav a{color:#eee7d7;text-decoration:none;opacity:.84}.nav a:hover{color:var(--gold2);opacity:1}.header-cta{color:var(--gold2);border:1px solid var(--goldline);border-radius:999px;padding:12px 20px;text-decoration:none;background:rgba(216,184,111,.04);font-weight:760}
.section{padding:112px 4.6vw;border-top:1px solid rgba(255,255,255,.07)}.eyebrow{color:var(--gold2);letter-spacing:.22em;text-transform:uppercase;font-size:12px;font-weight:850;margin-bottom:18px}
h1{margin:0;font-size:clamp(54px,6vw,98px);line-height:.96;letter-spacing:-.058em;font-weight:620}h2{margin:0;font-size:clamp(38px,4.6vw,76px);line-height:1.02;letter-spacing:-.055em;font-weight:560;max-width:1130px}.title-gradient{background:linear-gradient(180deg,#fff 6%,#fff4d7 42%,#d8b86f 93%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 34px rgba(216,184,111,.12);position:relative}.title-gradient:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,246,206,.0) 35%,rgba(255,246,206,.42) 49%,rgba(255,255,255,.0) 62%,transparent 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 11s ease-in-out infinite;pointer-events:none}@keyframes shine{0%,68%,100%{transform:translateX(-110%);opacity:0}74%{opacity:.55}86%{transform:translateX(110%);opacity:0}}
.lead,.intro{color:#cdd2da;font-size:19px;line-height:1.68;max-width:900px;margin:24px 0 0}.hero{min-height:100vh;padding:128px 4.6vw 56px;display:grid;grid-template-columns:.84fr 1.16fr;gap:44px;align-items:center}.tagline{margin-top:18px;color:#f2dc9c;font-size:20px;letter-spacing:-.02em;font-weight:650}.subline{margin-top:8px;color:#bfc6d0;font-size:15px}.actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 25px;border-radius:999px;font-weight:850;text-decoration:none;border:0;cursor:pointer;font-size:15px;letter-spacing:-.01em;font-family:inherit}.primary{color:#080704;background:linear-gradient(135deg,#ffe9a9,#c2933f);box-shadow:0 20px 70px rgba(216,184,111,.19)}.secondary{color:var(--gold2);background:rgba(0,0,0,.28);border:1px solid rgba(216,184,111,.32)}.quick-metrics{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;color:#dfe2e8}.quick-metrics div{border-right:1px solid rgba(255,255,255,.12);padding-right:22px}.quick-metrics strong{display:block;color:#fff}.quick-metrics small{color:#aeb6c2}
.hero-system{position:relative;min-height:735px;border-radius:38px;overflow:hidden;border:1px solid rgba(216,184,111,.24);background:radial-gradient(ellipse at center,rgba(216,184,111,.17),transparent 42%),rgba(255,255,255,.014);box-shadow:0 35px 140px rgba(0,0,0,.50),0 0 110px rgba(216,184,111,.11)}.hero-system:before{content:"";position:absolute;inset:2%;border-radius:50%;background:repeating-radial-gradient(ellipse at center,transparent 0 42px,rgba(216,184,111,.16) 43px 44px,transparent 45px 68px);opacity:.75}.lightline{position:absolute;left:8%;right:8%;top:50%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,226,150,.96),transparent);box-shadow:0 0 36px rgba(255,216,110,.78);z-index:2}.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:310px;height:310px;border-radius:50%;display:grid;place-items:center;text-align:center;z-index:5;background:radial-gradient(circle,rgba(255,225,145,.42),rgba(113,78,16,.22) 45%,rgba(0,0,0,.90) 72%);border:1px solid rgba(255,226,150,.78);box-shadow:0 0 46px rgba(255,213,103,.62),0 0 140px rgba(216,184,111,.50),inset 0 0 48px rgba(255,231,170,.22);animation:corePulse 3.9s ease-in-out infinite}@keyframes corePulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}.fave-pulse{width:104px;height:104px;margin:0 auto 12px;background:linear-gradient(135deg,#ff54c7,#a66dff,#62d7ff,#ffe39d,#ff54c7);background-size:360% 360%;-webkit-mask:url('../assets/loomai-fave-mask.png') center/contain no-repeat;mask:url('../assets/loomai-fave-mask.png') center/contain no-repeat;filter:drop-shadow(0 0 25px rgba(255,216,118,.86));animation:heart 1.25s ease-in-out infinite,colorflow 5s linear infinite}@keyframes heart{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}@keyframes colorflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.core h2{font-size:43px;margin:0;letter-spacing:-.05em}.core p{font-size:14px;line-height:1.45;color:#fff4d8;margin:8px auto 0;max-width:215px}
.hero-node{position:absolute;width:122px;min-height:76px;border-radius:20px;border:1px solid rgba(216,184,111,.34);background:radial-gradient(circle at 42% 20%,rgba(216,184,111,.24),rgba(0,0,0,.84) 72%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;z-index:3;box-shadow:0 0 28px rgba(216,184,111,.15);animation:float 5.8s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.hero-node b{color:#ffe8a2;font-size:12px}.hero-node span{color:#c9ced8;font-size:10px;line-height:1.22;margin-top:5px}.n1{left:48%;top:5%}.n2{right:15%;top:9%;animation-delay:.2s}.n3{right:5%;top:24%;animation-delay:.4s}.n4{right:5%;top:43%;animation-delay:.6s}.n5{right:9%;bottom:20%;animation-delay:.8s}.n6{right:22%;bottom:6%;animation-delay:1s}.n7{left:48%;bottom:3%;animation-delay:1.2s}.n8{left:27%;bottom:6%;animation-delay:1.4s}.n9{left:10%;bottom:20%;animation-delay:1.6s}.n10{left:5%;top:43%;animation-delay:1.8s}.n11{left:8%;top:24%;animation-delay:2s}.n12{left:24%;top:9%;animation-delay:2.2s}.n13{left:37%;top:12%;animation-delay:2.4s}.n14{left:15%;top:58%;animation-delay:2.6s}.n15{right:15%;top:58%;animation-delay:2.8s}.n16{left:58%;top:20%;animation-delay:3s}
.feature-strip{margin:0 4.6vw 24px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(216,184,111,.22);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.035)}.feature{padding:26px;display:flex;gap:18px;border-right:1px solid rgba(255,255,255,.08)}.feature:last-child{border-right:0}.feature-icon{color:var(--gold2);font-size:28px}.feature h3{margin:0 0 8px;color:#f7d991;font-size:14px;text-transform:uppercase;letter-spacing:.05em}.feature p{margin:0;color:#c4cad3;line-height:1.5;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:42px}.card,.role-card,.day-card{border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:26px;min-height:168px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));transition:.35s ease}.card:hover,.role-card:hover,.day-card:hover,.module-tile:hover{transform:translateY(-4px);border-color:rgba(216,184,111,.38);box-shadow:0 22px 80px rgba(0,0,0,.26)}.card h3,.role-card h3,.day-card h3{margin:0 0 12px;color:#f1d58f;font-size:20px}.card p,.role-card p,.day-card p{margin:0;color:#aeb6c2;line-height:1.58;font-size:15px}.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px}.list-panel{border:1px solid rgba(255,255,255,.09);border-radius:30px;padding:34px;background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.02))}.list-panel h3{margin:0 0 20px;color:var(--gold2);font-size:26px}.comparison{display:grid;gap:10px}.comparison span{padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.045);color:#d7dce4;border:1px solid rgba(255,255,255,.06)}.comparison .good{background:rgba(216,184,111,.12);border-color:rgba(216,184,111,.22);color:#fff1c2}
.loom-section{background:radial-gradient(circle at 25% 22%,rgba(255,90,196,.12),transparent 32%),radial-gradient(circle at 82% 75%,rgba(116,199,255,.14),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01))}.loom-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;margin-top:48px}.loom-card{border:1px solid rgba(216,184,111,.25);border-radius:34px;padding:34px;background:radial-gradient(circle at 40% 24%,rgba(216,184,111,.18),rgba(0,0,0,.62));box-shadow:0 0 90px rgba(216,184,111,.08)}.loom-big{width:132px;height:132px;background:linear-gradient(135deg,#ff54c7,#a66dff,#62d7ff,#ffe39d,#ff54c7);background-size:360% 360%;-webkit-mask:url('../assets/loomai-fave-mask.png') center/contain no-repeat;mask:url('../assets/loomai-fave-mask.png') center/contain no-repeat;animation:heart 1.25s ease-in-out infinite,colorflow 5s linear infinite;filter:drop-shadow(0 0 28px rgba(255,216,118,.70))}.loom-card h3{font-size:42px;margin:24px 0 12px}.loom-words{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.loom-words div{padding:20px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}.loom-words strong{display:block;color:var(--gold2);font-size:20px;margin-bottom:8px}
.module-matrix-wrap{margin-top:44px;border:1px solid rgba(216,184,111,.22);border-radius:32px;padding:24px;background:rgba(255,255,255,.028)}.module-matrix{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.module-tile{min-height:126px;text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.035);color:#fff;padding:14px;cursor:pointer;transition:.25s ease}.module-tile.active{border-color:rgba(216,184,111,.62);background:linear-gradient(180deg,rgba(216,184,111,.18),rgba(255,255,255,.035))}.module-tile strong{display:block;color:#ffe4a0;font-size:13px;margin-bottom:8px}.module-tile span{display:block;color:#aeb6c2;font-size:11px;line-height:1.35}.eco-panel{margin-top:20px;border:1px solid rgba(216,184,111,.22);border-radius:26px;padding:30px;background:radial-gradient(circle at top right,rgba(216,184,111,.12),transparent 44%),rgba(0,0,0,.22)}.eco-panel h3{font-size:34px;margin:0 0 12px;color:var(--gold2)}.eco-panel p{font-size:18px;line-height:1.7;color:#d2d7df}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.detail-grid article{padding:17px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.detail-grid strong{display:block;color:#f7d991;margin-bottom:8px}.detail-grid p{font-size:13px;line-height:1.5;margin:0;color:#c7ced8}
.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}.timeline{display:grid;grid-template-columns:340px 1fr;gap:28px;margin-top:48px}.day-rail{position:sticky;top:120px;height:max-content;border:1px solid rgba(216,184,111,.22);border-radius:28px;padding:28px;background:radial-gradient(circle at top right,rgba(216,184,111,.14),transparent 45%),rgba(255,255,255,.035)}.day-rail strong{font-size:38px;color:var(--gold2)}.day-rail p{color:#b8c0cc;line-height:1.6}.day-flow{display:grid;gap:18px}.day-card{display:grid;grid-template-columns:112px 1fr;gap:22px;align-items:start;min-height:auto}.day-card time{font-size:25px;color:var(--gold2);font-weight:900}.equal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px}.integration-grid{grid-template-columns:repeat(6,1fr)}.equal-card{min-height:92px;display:grid;place-items:center;text-align:center;border:1px solid rgba(216,184,111,.22);background:rgba(255,255,255,.035);border-radius:18px;padding:15px}.equal-card h3{font-size:15px;color:#f3d891;margin:0}
.contact{margin:22px 4.6vw 64px;border:1px solid rgba(216,184,111,.22);border-radius:22px;background:rgba(255,255,255,.035);display:grid;grid-template-columns:.9fr 2fr;overflow:hidden}.contact-intro{padding:32px;border-right:1px solid rgba(255,255,255,.08)}.contact-intro h2{margin:10px 0;font-size:32px;letter-spacing:-.04em}.contact-intro p{color:#c4cad3;line-height:1.6}.form-zone{padding:28px;display:grid;grid-template-columns:240px 1fr;gap:26px}.step-tabs{display:flex;flex-direction:column;gap:9px}.step-tab{color:#fff;background:rgba(255,255,255,.035);border:0;border-radius:12px;padding:12px;text-align:left;display:flex;gap:10px;align-items:center;cursor:pointer}.step-tab.active{background:linear-gradient(90deg,rgba(216,184,111,.30),rgba(216,184,111,.05))}.step-tab b{width:22px;height:22px;border-radius:50%;background:#2b2b2b;display:grid;place-items:center;color:#fff;font-size:12px}.step-tab.active b{background:#f3d48a;color:#111}.form-step{display:none}.form-step.active{display:block}.form-step h3{margin:0 0 18px;color:#f5d98e}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.form-grid.single{grid-template-columns:1fr}label{color:#f3ecda;font-size:13px}input,select,textarea{margin-top:8px;width:100%;border:1px solid rgba(216,184,111,.22);background:rgba(0,0,0,.34);color:#fff;border-radius:10px;padding:13px;font:inherit;outline:0}textarea{min-height:105px;resize:vertical}.full{display:block;margin-top:18px}.form-actions{display:flex;justify-content:space-between;margin-top:24px}.required-note{color:#d8c48b;text-align:right;margin-top:14px;font-size:13px}.progress{height:7px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-bottom:22px}.progress span{display:block;height:100%;width:20%;background:linear-gradient(90deg,#d8b86f,#ffe39d);transition:.3s}.footer{padding:36px 4.6vw;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;color:#aeb6c2}
@media(max-width:1300px){.module-matrix{grid-template-columns:repeat(4,1fr)}.equal-grid,.integration-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:1100px){.hero,.loom-grid,.contact,.split,.timeline{grid-template-columns:1fr}.feature-strip{grid-template-columns:1fr}.form-zone{grid-template-columns:1fr}.nav{display:none}.detail-grid{grid-template-columns:1fr 1fr}.module-matrix{grid-template-columns:repeat(2,1fr)}.role-grid{grid-template-columns:repeat(2,1fr)}.day-rail{position:relative;top:auto}}@media(max-width:680px){.hero,.section{padding-left:22px;padding-right:22px}h1{font-size:50px}.hero-system{min-height:560px}.core{width:230px;height:230px}.hero-node{display:none}.form-grid,.loom-words,.module-matrix,.role-grid,.equal-grid,.integration-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.day-card{grid-template-columns:1fr}}


/* v7 refinement: living Hero and cinematic Day section */
.hero-system {
  isolation:isolate;
}
.hero-system::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,227,157,.11), transparent 24%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(0,0,0,.38) 84%);
  pointer-events:none;
  z-index:1;
}
.core { z-index:8; }
.core::before {
  content:"";
  position:absolute;
  inset:-26px;
  border-radius:50%;
  border:1px solid rgba(255,227,157,.20);
  box-shadow:0 0 60px rgba(216,184,111,.20);
  animation:haloBreath 5.5s ease-in-out infinite;
}
.core::after {
  content:"";
  position:absolute;
  inset:-68px;
  border-radius:50%;
  background:conic-gradient(from 90deg, transparent, rgba(255,227,157,.22), transparent, rgba(98,215,255,.10), transparent);
  filter:blur(16px);
  opacity:.55;
  animation:energyTurn 18s linear infinite;
  z-index:-1;
}
@keyframes haloBreath {
  0%,100% { transform:scale(.96); opacity:.34; }
  50% { transform:scale(1.06); opacity:.82; }
}
@keyframes energyTurn { to { transform:rotate(360deg); } }

.fave-pulse {
  position:relative;
  animation:heart 1.18s cubic-bezier(.4,0,.2,1) infinite, colorflow 4.6s linear infinite, liveGlow 3.5s ease-in-out infinite;
}
@keyframes liveGlow {
  0%,100% { filter:drop-shadow(0 0 22px rgba(255,216,118,.76)); }
  50% { filter:drop-shadow(0 0 36px rgba(255,84,199,.45)) drop-shadow(0 0 28px rgba(98,215,255,.38)); }
}
.hero-node {
  will-change: transform, box-shadow, border-color;
  backdrop-filter:blur(10px);
}
.hero-node:hover {
  border-color:rgba(255,227,157,.85);
  box-shadow:0 0 34px rgba(216,184,111,.38), inset 0 0 24px rgba(216,184,111,.10);
}
.hero-node::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:210px;
  transform-origin:top center;
  background:linear-gradient(to bottom, rgba(255,227,157,.22), transparent);
  z-index:-2;
  opacity:.32;
}
.n1::after,.n7::after { height:260px; }
.n2::after,.n8::after { transform:rotate(35deg); }
.n3::after,.n9::after { transform:rotate(58deg); }
.n4::after,.n10::after { transform:rotate(88deg); }
.n5::after,.n11::after { transform:rotate(118deg); }
.n6::after,.n12::after { transform:rotate(150deg); }
.n13::after,.n14::after,.n15::after,.n16::after { height:170px; opacity:.22; }

.lightline {
  animation:lineBreathe 6s ease-in-out infinite;
}
@keyframes lineBreathe {
  0%,100% { opacity:.55; filter:blur(.2px); }
  50% { opacity:1; filter:blur(0); }
}

/* Cinematic day */
.timeline {
  align-items:start;
}
.day-rail {
  overflow:hidden;
}
.day-rail::before {
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, rgba(255,227,157,.20), transparent 35%, rgba(98,215,255,.10));
  opacity:.55;
  pointer-events:none;
}
.day-rail strong, .day-rail p { position:relative; z-index:1; }
.day-flow {
  position:relative;
}
.day-flow::before {
  content:"";
  position:absolute;
  left:54px;
  top:18px;
  bottom:18px;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(216,184,111,.65), rgba(98,215,255,.30), transparent);
}
.day-card {
  position:relative;
  padding-left:18px;
  background:
    radial-gradient(circle at 10% 18%, rgba(216,184,111,.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.022));
}
.day-card::before {
  content:"";
  position:absolute;
  left:46px;
  top:34px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffe39d,#d8b86f);
  box-shadow:0 0 26px rgba(216,184,111,.55);
  z-index:2;
}
.day-card::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.08), transparent);
  opacity:0;
  transform:translateX(-45%);
  transition:.55s ease;
}
.day-card:hover::after {
  opacity:1;
  transform:translateX(45%);
}
.day-card h3 {
  font-size:24px;
}
.day-card p {
  font-size:16px;
}
.day-card time {
  font-size:27px;
  letter-spacing:-.04em;
}

/* Better CTA typography */
.btn {
  text-transform:none;
  letter-spacing:-.015em;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.btn.primary:hover, .btn.secondary:hover {
  transform:translateY(-2px);
}

.particle-field {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.particle-field i {
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,227,157,.72);
  box-shadow:0 0 20px rgba(255,227,157,.65);
  animation:particleDrift 12s ease-in-out infinite;
}
.particle-field i:nth-child(1){left:18%;top:21%;animation-delay:0s}
.particle-field i:nth-child(2){left:78%;top:28%;animation-delay:1.5s}
.particle-field i:nth-child(3){left:66%;top:74%;animation-delay:3s}
.particle-field i:nth-child(4){left:24%;top:70%;animation-delay:4.5s}
.particle-field i:nth-child(5){left:49%;top:13%;animation-delay:6s}
.particle-field i:nth-child(6){left:52%;top:84%;animation-delay:7.5s}
@keyframes particleDrift {
  0%,100% { transform:translate3d(0,0,0) scale(.7); opacity:.28; }
  50% { transform:translate3d(14px,-18px,0) scale(1.15); opacity:.9; }
}


/* v7 refined from approved base: remove Hero frame, lower LoomAi, strengthen modules */
.hero-system,
.hero-core,
.experience-hero,
.living {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Pull the visual lower so LoomAi sits partly lower on the page, not boxed at the top */
.hero-system,
.hero-core,
.experience-hero,
.living {
  transform: translateY(58px);
}

/* Keep enough visual space after lowering the right-side system */
.hero {
  padding-bottom: 122px !important;
}

/* Softer open energy instead of a boxed card */
.hero-system::after,
.hero-core::after,
.experience-hero::after,
.living::after {
  background: radial-gradient(circle at 50% 57%, rgba(216,184,111,.18), transparent 32%),
              radial-gradient(circle at 50% 57%, transparent 44%, rgba(2,3,4,.22) 78%) !important;
}

.hero-system::before,
.hero-core::before,
.experience-hero::before,
.living::before {
  opacity: .58 !important;
}

/* Lower the LoomAi core inside the visual area */
.core,
.core-ai {
  top: 58% !important;
}

/* Lower/relax hero nodes so the system feels like it continues down the page */
.n1 { top: 11% !important; }
.n2 { top: 14% !important; }
.n3 { top: 29% !important; }
.n4 { top: 48% !important; }
.n5 { bottom: 12% !important; }
.n6 { bottom: -1% !important; }
.n7 { bottom: -3% !important; }
.n8 { bottom: -1% !important; }
.n9 { bottom: 12% !important; }
.n10 { top: 48% !important; }
.n11 { top: 29% !important; }
.n12 { top: 14% !important; }
.n13 { top: 18% !important; }
.n14 { top: 64% !important; }
.n15 { top: 64% !important; }
.n16 { top: 25% !important; }

/* Make module names in ecosystem roughly 2x larger and more readable */
.module-tile strong {
  font-size: 26px !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  font-weight: 720 !important;
  margin-bottom: 12px !important;
}
.module-tile {
  min-height: 152px !important;
  padding: 18px !important;
}
.module-tile span {
  font-size: 12px !important;
  line-height: 1.42 !important;
}

/* Improve selected module detail readability */
.eco-panel h3,
.explorer h3,
#ecoTitle,
#moduleTitle {
  font-size: 46px !important;
  letter-spacing: -0.055em !important;
}
.detail-grid strong,
.detail strong {
  font-size: 15px !important;
}
.detail-grid p,
.detail p {
  font-size: 14px !important;
}

/* Upgrade A Day section from flat list to stronger cinematic cards without changing base layout */
.day-card,
.story-card {
  background:
    radial-gradient(circle at 12% 18%, rgba(216,184,111,.13), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)) !important;
  border-color: rgba(216,184,111,.18) !important;
}
.day-card time,
.story-card time {
  color: #ffe39d !important;
  text-shadow: 0 0 24px rgba(216,184,111,.28);
}

/* Preserve premium headline style */
.title-gradient,
.hero-title {
  text-shadow: 0 0 34px rgba(216,184,111,.16) !important;
}

/* Mobile: do not over-lower */
@media(max-width: 900px) {
  .hero-system,
  .hero-core,
  .experience-hero,
  .living {
    transform: translateY(16px) !important;
  }
  .hero {
    padding-bottom: 70px !important;
  }
  .core,
  .core-ai {
    top: 52% !important;
  }
  .module-tile strong {
    font-size: 22px !important;
  }
}

.hero-visual {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transform: translateY(58px);
}
.hero-visual::after {
  background: radial-gradient(circle at 50% 57%, rgba(216,184,111,.16), transparent 34%) !important;
}


/* v8 requested fixes */

/* Hero: remove dark disc/container around LoomAi and leave only golden halo */
.core,
.core-ai {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 300px !important;
  height: 300px !important;
}
.core::before,
.core-ai::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 227, 157, .65) !important;
  background: radial-gradient(circle, rgba(255,227,157,.08), transparent 56%) !important;
  box-shadow:
    0 0 38px rgba(216,184,111,.58),
    0 0 95px rgba(216,184,111,.32),
    inset 0 0 42px rgba(216,184,111,.22) !important;
  animation: haloBreath 4.8s ease-in-out infinite !important;
  z-index: -1 !important;
}
.core::after,
.core-ai::after {
  content: "" !important;
  position: absolute !important;
  inset: -42px !important;
  border-radius: 50% !important;
  background: conic-gradient(from 90deg, transparent, rgba(255,227,157,.28), transparent, rgba(98,215,255,.10), transparent) !important;
  filter: blur(14px) !important;
  opacity: .55 !important;
  animation: energyTurn 18s linear infinite !important;
  z-index: -2 !important;
}
.core h2,
.core-ai h2 {
  text-shadow: 0 0 26px rgba(216,184,111,.58) !important;
}

/* Larger orbital gold lines that extend beyond the visual area */
.hero-system::before,
.hero-core::before,
.experience-hero::before,
.living::before {
  inset: -22% !important;
  transform: scale(1.22) !important;
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 54px,
      rgba(216,184,111,.20) 55px 56px,
      transparent 57px 88px) !important;
  opacity: .82 !important;
  animation: orbitFieldBreath 18s ease-in-out infinite alternate !important;
}
@keyframes orbitFieldBreath {
  from { transform: scale(1.18) rotate(-1deg); opacity:.66; }
  to { transform: scale(1.34) rotate(1deg); opacity:.92; }
}

/* Meet LoomAi: remove card/container around logo and move it to the right */
.loom-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}
.loom-big,
.loom-logo-card {
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 170px !important;
  height: 170px !important;
}
.loom-card .intro,
.loom-card p {
  max-width: 460px !important;
}

/* A Day line: move vertical line after the time column, not over the hours */
.day-flow::before,
.story-flow::before {
  left: 142px !important;
  z-index: 0 !important;
}
.day-card::before,
.story-card::before {
  left: 134px !important;
  z-index: 2 !important;
}
.day-card time,
.story-card time {
  position: relative !important;
  z-index: 3 !important;
  padding-right: 22px !important;
  min-width: 100px !important;
}
.day-card,
.story-card {
  grid-template-columns: 130px 1fr !important;
}

/* Future and Ecosystem cards: 2x text */
.equal-card h3,
.future-card h3,
.integration-card h3 {
  font-size: 30px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.055em !important;
}
.equal-card,
.future-card,
.integration-card {
  min-height: 132px !important;
  padding: 22px !important;
}

/* Contact form: make sure all styles exist and are visible */
.contact {
  margin: 22px 4.6vw 64px !important;
  border: 1px solid rgba(216,184,111,.22) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.035) !important;
  display: grid !important;
  grid-template-columns: .9fr 2fr !important;
  overflow: hidden !important;
}
.contact-intro {
  padding: 32px !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}
.contact-intro h2 {
  margin: 10px 0 !important;
  font-size: 32px !important;
  letter-spacing: -.04em !important;
}
.contact-intro p {
  color: #c4cad3 !important;
  line-height: 1.6 !important;
}
.form-zone {
  padding: 28px !important;
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 26px !important;
}
.step-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}
.step-tab {
  color: #fff !important;
  background: rgba(255,255,255,.035) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  text-align: left !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  cursor: pointer !important;
}
.step-tab.active {
  background: linear-gradient(90deg,rgba(216,184,111,.30),rgba(216,184,111,.05)) !important;
}
.step-tab b {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #2b2b2b !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: 12px !important;
}
.step-tab.active b {
  background: #f3d48a !important;
  color: #111 !important;
}
.form-step { display: none !important; }
.form-step.active { display: block !important; }
.form-step h3 {
  margin: 0 0 18px !important;
  color: #f5d98e !important;
}
.form-grid {
  display: grid !important;
  grid-template-columns: repeat(2,1fr) !important;
  gap: 18px !important;
}
.form-grid.single { grid-template-columns: 1fr !important; }
label { color: #f3ecda !important; font-size: 13px !important; }
input, select, textarea {
  margin-top: 8px !important;
  width: 100% !important;
  border: 1px solid rgba(216,184,111,.22) !important;
  background: rgba(0,0,0,.34) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 13px !important;
  font: inherit !important;
  outline: 0 !important;
}
textarea {
  min-height: 105px !important;
  resize: vertical !important;
}
.full {
  display: block !important;
  margin-top: 18px !important;
}
.form-actions {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 24px !important;
}
.required-note {
  color: #d8c48b !important;
  text-align: right !important;
  margin-top: 14px !important;
  font-size: 13px !important;
}
.progress {
  height: 7px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-bottom: 22px !important;
}
.progress span {
  display: block !important;
  height: 100% !important;
  width: 20% !important;
  background: linear-gradient(90deg,#d8b86f,#ffe39d) !important;
  transition: .3s !important;
}

@media(max-width: 1100px) {
  .contact { grid-template-columns: 1fr !important; }
  .contact-intro { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
  .form-zone { grid-template-columns: 1fr !important; }
  .equal-card h3, .future-card h3, .integration-card h3 { font-size: 24px !important; }
}
@media(max-width: 680px) {
  .form-grid { grid-template-columns: 1fr !important; }
  .day-card, .story-card { grid-template-columns: 1fr !important; }
  .day-flow::before, .story-flow::before, .day-card::before, .story-card::before { display: none !important; }
}


/* === v9 final polish === */

/* Open up the hero completely */
.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Make the orbital field huge, slow and endless */
.hero-system::before,
.hero-core::before,
.experience-hero::before,
.living::before,
.hero-visual::before {
  inset: -42% !important;
  transform: scale(1.48) !important;
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 70px,
      rgba(216,184,111,.18) 71px 72px,
      transparent 73px 118px) !important;
  opacity: .9 !important;
  animation: ultraOrbit 95s linear infinite !important;
}
@keyframes ultraOrbit {
  from { transform: scale(1.42) rotate(-1deg); }
  to { transform: scale(1.58) rotate(1deg); }
}

/* Remove the dark disc and make the fave mark the living center */
.core,
.core-ai {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 360px !important;
  height: 360px !important;
  display: grid !important;
  place-items: center !important;
  top: 58% !important;
}
.core::before,
.core-ai::before {
  content: "" !important;
  position: absolute !important;
  inset: 46px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 229, 163, .68) !important;
  background: radial-gradient(circle, rgba(255,227,157,.16), rgba(216,184,111,.05) 40%, transparent 68%) !important;
  box-shadow:
    0 0 44px rgba(216,184,111,.62),
    0 0 110px rgba(216,184,111,.32),
    inset 0 0 52px rgba(216,184,111,.18) !important;
  animation: haloBreathSlow 6.8s ease-in-out infinite !important;
  z-index: -1 !important;
}
.core::after,
.core-ai::after {
  content: "" !important;
  position: absolute !important;
  inset: -44px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,230,165,.18), transparent 46%) !important;
  filter: blur(20px) !important;
  opacity: .9 !important;
  animation: auraShift 10s ease-in-out infinite !important;
  z-index: -2 !important;
}
@keyframes haloBreathSlow {
  0%,100% { transform: scale(.96); opacity: .76; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes auraShift {
  0%,100% { transform: scale(.96); opacity:.55; }
  50% { transform: scale(1.08); opacity:.96; }
}

/* Bigger living LoomAi logo with gold glow only */
.fave-pulse,
.fave {
  width: 168px !important;
  height: 168px !important;
  margin: 0 auto 14px !important;
  filter:
    drop-shadow(0 0 18px rgba(255,236,170,.95))
    drop-shadow(0 0 42px rgba(216,184,111,.76))
    drop-shadow(0 0 86px rgba(216,184,111,.36)) !important;
  animation: heart 1.22s ease-in-out infinite, colorflow 7.8s linear infinite, faveFloat 7s ease-in-out infinite !important;
}
@keyframes faveFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.core h2,
.core-ai h2 {
  font-size: 52px !important;
  margin-top: 2px !important;
  text-shadow: 0 0 22px rgba(216,184,111,.52) !important;
}
.core p,
.core-ai p {
  font-size: 18px !important;
  max-width: 300px !important;
  color: #fff0cf !important;
}

/* Hero nodes titles much bigger */
.hero-node b,
.node b {
  font-size: 22px !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
  margin-bottom: 8px !important;
}
.hero-node span,
.node span {
  font-size: 13px !important;
  line-height: 1.22 !important;
}
.hero-node,
.node {
  width: 156px !important;
  min-height: 92px !important;
  padding: 14px 12px !important;
  animation-duration: 9.5s !important;
}

/* Ecosystem module names larger too */
.module-tile strong {
  font-size: 30px !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  font-weight: 760 !important;
}
.module-tile span {
  font-size: 13px !important;
}
.module-tile {
  min-height: 168px !important;
}

/* Future + ecosystem big list cards */
.equal-card h3,
.future-card h3,
.integration-card h3 {
  font-size: 34px !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
}
.equal-card,
.future-card,
.integration-card {
  min-height: 148px !important;
}

/* Meet LoomAi: no box around logo, right aligned */
.loom-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}
.loom-big,
.loom-logo-card {
  width: 178px !important;
  height: 178px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  filter:
    drop-shadow(0 0 16px rgba(255,236,170,.92))
    drop-shadow(0 0 34px rgba(216,184,111,.62)) !important;
}
.loom-card h3 {
  font-size: 48px !important;
  margin-top: 16px !important;
}
.loom-card .intro,
.loom-card p {
  max-width: 520px !important;
}

/* Day line moved fully to the right of the time */
.day-flow::before,
.story-flow::before {
  left: 168px !important;
}
.day-card::before,
.story-card::before {
  left: 160px !important;
}
.day-card,
.story-card {
  grid-template-columns: 150px 1fr !important;
}
.day-card time,
.story-card time {
  min-width: 118px !important;
  padding-right: 26px !important;
  background: linear-gradient(180deg,#fff6d7,#f3d48a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Better contact intro copy styling */
.contact-intro h2 {
  font-size: 40px !important;
}
.contact-intro p {
  font-size: 18px !important;
  line-height: 1.72 !important;
}

/* Slow the whole hero movement down so it only suggests life */
.lightline {
  animation-duration: 14s !important;
}
.particles i,
.particle-field i {
  animation-duration: 18s !important;
}
@media (max-width:1100px) {
  .equal-card h3, .future-card h3, .integration-card h3 { font-size: 28px !important; }
  .hero-node b, .node b { font-size: 19px !important; }
  .module-tile strong { font-size: 24px !important; }
}
@media (max-width:680px) {
  .core, .core-ai { width: 250px !important; height: 250px !important; top: 54% !important; }
  .fave-pulse, .fave { width: 126px !important; height: 126px !important; }
}


/* === v10 final requested corrections === */

/* Bring the whole right-side hero/LoomAi system up by roughly half of the previous empty gap */
.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  transform: translateY(22px) !important;
}
.hero {
  padding-bottom: 86px !important;
}

/* Make large orbit lines extend beyond the section and move extremely slowly */
.hero-system::before,
.hero-core::before,
.experience-hero::before,
.living::before,
.hero-visual::before {
  inset: -58% !important;
  transform: scale(1.72) !important;
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 82px,
      rgba(216,184,111,.19) 83px 84px,
      transparent 85px 140px) !important;
  opacity: .86 !important;
  animation: ultraOrbitFinal 210s ease-in-out infinite alternate !important;
}
@keyframes ultraOrbitFinal {
  0%   { transform: scale(1.62) rotate(-0.8deg); opacity:.72; }
  100% { transform: scale(1.82) rotate(0.8deg); opacity:.94; }
}

/* Remove the visible dark central disc/ring entirely.
   The LoomAi fave mark itself becomes the energy source. */
.core,
.core-ai {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 430px !important;
  height: 430px !important;
  top: 56% !important;
  pointer-events: auto !important;
}
.core::before,
.core-ai::before {
  content: "" !important;
  position: absolute !important;
  inset: 92px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background:
    radial-gradient(circle,
      rgba(255,229,163,.42) 0%,
      rgba(216,184,111,.22) 22%,
      rgba(216,184,111,.08) 46%,
      transparent 72%) !important;
  box-shadow:
    0 0 48px rgba(216,184,111,.58),
    0 0 120px rgba(216,184,111,.30),
    0 0 190px rgba(216,184,111,.16) !important;
  animation: softGoldSource 8.5s ease-in-out infinite !important;
  z-index: -1 !important;
}
.core::after,
.core-ai::after {
  content: "" !important;
  position: absolute !important;
  inset: 24px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background:
    radial-gradient(circle,
      rgba(255,229,163,.18) 0%,
      rgba(216,184,111,.07) 40%,
      transparent 72%) !important;
  filter: blur(22px) !important;
  opacity: .9 !important;
  animation: auraOnly 12s ease-in-out infinite !important;
  z-index: -2 !important;
}
@keyframes softGoldSource {
  0%,100% { transform: scale(.94); opacity:.64; }
  50% { transform: scale(1.08); opacity:1; }
}
@keyframes auraOnly {
  0%,100% { transform: scale(.92); opacity:.46; }
  50% { transform: scale(1.12); opacity:.9; }
}

/* Larger logo, no surrounding circle */
.fave-pulse,
.fave {
  width: 222px !important;
  height: 222px !important;
  margin: 0 auto 18px !important;
  filter:
    drop-shadow(0 0 18px rgba(255,236,170,.98))
    drop-shadow(0 0 48px rgba(216,184,111,.82))
    drop-shadow(0 0 110px rgba(216,184,111,.38)) !important;
  animation:
    heart 1.32s ease-in-out infinite,
    colorflow 10s linear infinite,
    faveBreathFinal 9s ease-in-out infinite !important;
}
@keyframes faveBreathFinal {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.025); }
}
.core h2,
.core-ai h2 {
  font-size: 56px !important;
  margin-top: 0 !important;
}
.core p,
.core-ai p {
  font-size: 18px !important;
  max-width: 330px !important;
}

/* Module labels in hero: keep them large and readable */
.hero-node b,
.node b {
  font-size: 22px !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}
.hero-node span,
.node span {
  font-size: 13px !important;
  line-height: 1.25 !important;
}
.hero-node,
.node {
  animation-duration: 18s !important;
}

/* Orbit/light/particles: around 2x slower than before */
.lightline {
  animation-duration: 28s !important;
}
.particle-field i,
.particles i {
  animation-duration: 34s !important;
}
.core,
.core-ai {
  animation-duration: 8.5s !important;
}

/* Module grid names 2x and clean */
.module-tile strong {
  font-size: 32px !important;
  line-height: .96 !important;
  letter-spacing: -0.058em !important;
  font-weight: 780 !important;
}
.module-tile span {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.module-tile {
  min-height: 174px !important;
  padding: 20px !important;
}

/* Contact text stronger and more premium */
.contact-intro h2 {
  font-size: 44px !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
}
.contact-intro p {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: #d8dde5 !important;
}
.contact-intro p + p {
  color: #f0d99a !important;
}

/* Make form status feel intentional */
.required-note::before {
  content: "Auto-saved after each step • ";
  color: #f3d48a;
}

/* On smaller screens, avoid oversized core */
@media(max-width: 1100px) {
  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    transform: translateY(10px) !important;
  }
  .core, .core-ai { width: 320px !important; height: 320px !important; top: 54% !important; }
  .fave-pulse, .fave { width: 160px !important; height: 160px !important; }
}
@media(max-width: 680px) {
  .module-tile strong { font-size: 24px !important; }
  .contact-intro h2 { font-size: 34px !important; }
}


/* === v11 exact fixes: no central dark disc, no straight line, living mouse halo, direct-email UX === */

/* Move hero system up a little more to reduce the empty space above modules */
.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  transform: translateY(0px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
.hero {
  padding-bottom: 72px !important;
}

/* Absolutely remove the black disc/ring effect around LoomAi */
.core,
.core-ai {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 440px !important;
  height: 440px !important;
  top: 55% !important;
  isolation: isolate !important;
}
.core > div,
.core-ai > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.core::before,
.core-ai::before {
  content: "" !important;
  position: absolute !important;
  inset: 116px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background:
    radial-gradient(circle,
      rgba(255,233,170,.42) 0%,
      rgba(216,184,111,.18) 24%,
      rgba(216,184,111,.05) 50%,
      transparent 74%) !important;
  box-shadow:
    0 0 48px rgba(255,226,150,.55),
    0 0 112px rgba(216,184,111,.28),
    0 0 180px rgba(216,184,111,.12) !important;
  filter: blur(1px) !important;
  opacity: .95 !important;
  animation: loomSoftGlow 7.5s ease-in-out infinite !important;
  z-index: -2 !important;
}
.core::after,
.core-ai::after {
  content: "" !important;
  position: absolute !important;
  inset: 52px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background:
    radial-gradient(circle,
      rgba(255,228,155,.18) 0%,
      rgba(216,184,111,.055) 38%,
      transparent 76%) !important;
  filter: blur(24px) !important;
  opacity: .72 !important;
  animation: loomAuraOnly 10s ease-in-out infinite !important;
  z-index: -3 !important;
}
@keyframes loomSoftGlow {
  0%,100% { transform: scale(.96); opacity:.68; }
  50% { transform: scale(1.10); opacity:1; }
}
@keyframes loomAuraOnly {
  0%,100% { transform: scale(.94); opacity:.45; }
  50% { transform: scale(1.13); opacity:.84; }
}

/* Logo is the source: bigger, brighter, without any backing disc */
.fave-pulse,
.fave {
  width: 236px !important;
  height: 236px !important;
  margin: 0 auto 18px !important;
  background-size: 420% 420% !important;
  filter:
    drop-shadow(0 0 18px rgba(255,239,186,.98))
    drop-shadow(0 0 52px rgba(216,184,111,.86))
    drop-shadow(0 0 118px rgba(216,184,111,.42)) !important;
  animation:
    heart 1.42s ease-in-out infinite,
    colorflow 11s linear infinite,
    faveBreathV11 10s ease-in-out infinite !important;
}
@keyframes faveBreathV11 {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.018); }
}
.core h2,
.core-ai h2 {
  font-size: 58px !important;
  margin-top: -2px !important;
  text-shadow: 0 0 20px rgba(216,184,111,.44) !important;
}
.core p,
.core-ai p {
  font-size: 18px !important;
  max-width: 330px !important;
  color: #fff0cf !important;
  text-shadow: 0 0 18px rgba(0,0,0,.45) !important;
}

/* Remove the straight horizontal line through the hero */
.lightline {
  display: none !important;
}

/* Replace it with subtle energy curves and responsive mouse glow */
.hero-system::after,
.hero-core::after,
.experience-hero::after,
.living::after,
.hero-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: -10% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,55%),
      rgba(255,229,163,.20),
      rgba(216,184,111,.08) 16%,
      transparent 33%),
    conic-gradient(from 90deg at 50% 55%,
      transparent 0deg,
      rgba(255,229,163,.12) 42deg,
      transparent 88deg,
      rgba(98,215,255,.055) 160deg,
      transparent 224deg,
      rgba(255,229,163,.10) 300deg,
      transparent 360deg) !important;
  filter: blur(1.2px) !important;
  opacity: .86 !important;
  animation: energyCurve 34s ease-in-out infinite alternate !important;
}
@keyframes energyCurve {
  0% { transform: scale(1.00) rotate(-.4deg); opacity:.66; }
  100% { transform: scale(1.04) rotate(.4deg); opacity:.92; }
}

/* Make the orbital circles large enough to leave the viewport and move at a visible-but-slow speed */
.hero-system::before,
.hero-core::before,
.experience-hero::before,
.living::before,
.hero-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -68% !important;
  border-radius: 50% !important;
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 88px,
      rgba(216,184,111,.20) 89px 90px,
      transparent 91px 150px) !important;
  opacity: .86 !important;
  animation: orbitLargeVisible 78s ease-in-out infinite alternate !important;
  z-index: 1 !important;
}
@keyframes orbitLargeVisible {
  0%   { transform: scale(1.58) rotate(-1.2deg); opacity:.76; }
  100% { transform: scale(1.78) rotate(1.2deg); opacity:.95; }
}

/* Slow but not dead: visible after a few seconds */
.hero-node,
.node {
  animation-duration: 14s !important;
}
.particles i,
.particle-field i {
  animation-duration: 26s !important;
}

/* Bigger module text, preserved */
.hero-node b,
.node b {
  font-size: 23px !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
.hero-node span,
.node span {
  font-size: 13px !important;
}
.module-tile strong {
  font-size: 32px !important;
  line-height: .96 !important;
  letter-spacing: -.058em !important;
  font-weight: 780 !important;
}
.module-tile span {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.module-tile {
  min-height: 174px !important;
}

/* Stronger contact copy typography */
.contact-intro h2 {
  font-size: 46px !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
}
.contact-intro p {
  font-size: 18px !important;
  line-height: 1.78 !important;
  color: #d8dde5 !important;
}
.contact-intro p + p {
  color: #f0d99a !important;
}

/* Direct internal submission status */
.form-status {
  margin-top: 14px;
  color: #f3d48a;
  font-size: 13px;
  min-height: 20px;
}
.required-note::before {
  content: "Internal step delivery enabled • ";
  color: #f3d48a;
}

@media(max-width:1100px) {
  .core, .core-ai { width: 320px !important; height: 320px !important; top: 54% !important; }
  .fave-pulse, .fave { width: 164px !important; height: 164px !important; }
}
@media(max-width:680px) {
  .module-tile strong { font-size: 24px !important; }
  .contact-intro h2 { font-size: 34px !important; }
}


/* === v13 hero / email integrated refinements === */

/* Full-width hero mouse glow across the whole top section */
.hero {
  position: relative !important;
  overflow: visible !important;
  padding-top: 122px !important;
  padding-bottom: 64px !important;
}
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -8% -6% -10% -6% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at var(--mx,52%) var(--my,28%),
      rgba(255,230,165,.16) 0%,
      rgba(216,184,111,.08) 15%,
      rgba(98,215,255,.04) 28%,
      transparent 48%) !important;
  filter: blur(2px) !important;
  opacity: .92 !important;
}
.hero > * {
  position: relative;
  z-index: 1;
}

/* Bring the whole right visual up much more to cut the empty area above the modules */
.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  transform: translateY(-34px) !important;
  margin-top: -26px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Remove any dark disc or dark radial under/around the LoomAi logo */
.hero-system::after,
.hero-core::after,
.experience-hero::after,
.living::after,
.hero-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: -12% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,48%),
      rgba(255,230,165,.18) 0%,
      rgba(216,184,111,.08) 16%,
      transparent 34%) !important,
    conic-gradient(from 90deg at 50% 48%,
      transparent 0deg,
      rgba(255,230,165,.10) 42deg,
      transparent 92deg,
      rgba(98,215,255,.05) 170deg,
      transparent 230deg,
      rgba(255,230,165,.08) 302deg,
      transparent 360deg) !important;
  filter: blur(1.2px) !important;
  opacity: .84 !important;
  animation: heroEnergyWide 20s ease-in-out infinite alternate !important;
}
@keyframes heroEnergyWide {
  0%   { transform: scale(1.00) rotate(-.35deg); opacity:.66; }
  100% { transform: scale(1.05) rotate(.35deg); opacity:.92; }
}

/* Bigger / brighter central icon, with only gold light source and no dark backing */
.core,
.core-ai {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 448px !important;
  height: 448px !important;
  top: 52% !important;
  isolation: isolate !important;
}
.core::before,
.core-ai::before {
  content: "" !important;
  position: absolute !important;
  inset: 132px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: radial-gradient(circle,
      rgba(255,233,170,.42) 0%,
      rgba(216,184,111,.18) 26%,
      rgba(216,184,111,.04) 52%,
      transparent 76%) !important;
  box-shadow:
      0 0 44px rgba(255,226,150,.54),
      0 0 112px rgba(216,184,111,.30),
      0 0 180px rgba(216,184,111,.10) !important;
  filter: blur(1px) !important;
  opacity: .96 !important;
  animation: centralGlowV13 5.6s ease-in-out infinite !important;
  z-index: -2 !important;
}
.core::after,
.core-ai::after {
  content: "" !important;
  position: absolute !important;
  inset: 56px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: radial-gradient(circle,
      rgba(255,228,155,.14) 0%,
      rgba(216,184,111,.045) 38%,
      transparent 74%) !important;
  filter: blur(28px) !important;
  opacity: .68 !important;
  animation: auraSoftV13 7.8s ease-in-out infinite !important;
  z-index: -3 !important;
}
@keyframes centralGlowV13 {
  0%,100% { transform: scale(.96); opacity:.72; }
  50% { transform: scale(1.09); opacity:1; }
}
@keyframes auraSoftV13 {
  0%,100% { transform: scale(.96); opacity:.46; }
  50% { transform: scale(1.12); opacity:.82; }
}

/* Pure logo as source */
.fave-pulse,
.fave {
  width: 244px !important;
  height: 244px !important;
  margin: 0 auto 18px !important;
  filter:
    drop-shadow(0 0 18px rgba(255,239,186,.98))
    drop-shadow(0 0 56px rgba(216,184,111,.88))
    drop-shadow(0 0 124px rgba(216,184,111,.44)) !important;
  animation:
    heart 1.36s ease-in-out infinite,
    colorflow 9s linear infinite,
    faveBreathV13 7.4s ease-in-out infinite !important;
}
@keyframes faveBreathV13 {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.018); }
}

/* Make the orbit lines big enough to leave the frame and move in a clearly visible calm way */
.hero-system::before,
.hero-core::before,
.experience-hero::before,
.living::before,
.hero-visual::before {
  inset: -74% !important;
  border-radius: 50% !important;
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 90px,
      rgba(216,184,111,.22) 91px 92px,
      transparent 93px 156px) !important;
  opacity: .92 !important;
  animation: orbitVisibleV13 46s linear infinite !important;
  z-index: 1 !important;
}
@keyframes orbitVisibleV13 {
  from { transform: scale(1.62) rotate(0deg); opacity:.76; }
  to   { transform: scale(1.80) rotate(2deg); opacity:.96; }
}

/* Module nodes: lift upward and reduce the empty space above them */
.n1 { top: 2% !important; }
.n2 { top: 4% !important; }
.n3 { top: 19% !important; }
.n4 { top: 39% !important; }
.n5 { bottom: 12% !important; }
.n6 { bottom: -1% !important; }
.n7 { bottom: -4% !important; }
.n8 { bottom: -1% !important; }
.n9 { bottom: 12% !important; }
.n10 { top: 39% !important; }
.n11 { top: 19% !important; }
.n12 { top: 4% !important; }
.n13 { top: 8% !important; }
.n14 { top: 54% !important; }
.n15 { top: 54% !important; }
.n16 { top: 8% !important; }

/* More visible gentle motion for nodes and particles */
.hero-node,
.node {
  animation-duration: 10.5s !important;
}
.particles i,
.particle-field i {
  animation-duration: 18s !important;
}

/* Keep larger module names */
.hero-node b,
.node b {
  font-size: 23px !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
.module-tile strong {
  font-size: 32px !important;
  line-height: .96 !important;
  letter-spacing: -.058em !important;
  font-weight: 780 !important;
}

/* Form copy stronger */
.contact-intro h2 {
  font-size: 46px !important;
}
.contact-intro p {
  font-size: 18px !important;
  line-height: 1.78 !important;
}
.contact-intro p + p {
  color: #f0d99a !important;
}

/* Mobile adjustments */
@media(max-width:1100px){
  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    transform: translateY(-10px) !important;
    margin-top: -10px !important;
  }
  .core, .core-ai { width: 320px !important; height: 320px !important; top: 50% !important; }
  .fave-pulse, .fave { width: 172px !important; height: 172px !important; }
}


/* === v14 critical fix: remove central dark circle + right-side rectangular light panel === */

/* The hero visual must not draw any rectangular background layer */
.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* Remove every pseudo-layer that was creating a rectangular glow behind the hero visual */
.hero-system::after,
.hero-core::after,
.experience-hero::after,
.living::after,
.hero-visual::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Keep only orbital line field: no filled rectangle, no panel glow */
.hero-system::before,
.hero-core::before,
.experience-hero::before,
.living::before,
.hero-visual::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: -85% !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 92px,
      rgba(216,184,111,.23) 93px 94px,
      transparent 95px 158px) !important;
  opacity: .82 !important;
  filter: none !important;
  box-shadow: none !important;
  animation: gemloomOrbitOnly 34s linear infinite !important;
}
@keyframes gemloomOrbitOnly {
  from { transform: scale(1.58) rotate(0deg); }
  to   { transform: scale(1.78) rotate(2.6deg); }
}

/* Bring visual up further to reduce empty top space */
.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  transform: translateY(-52px) !important;
  margin-top: -34px !important;
}
.hero {
  padding-bottom: 50px !important;
}

/* Remove the central disc completely. No halo circle, no dark ring, no radial backing. */
.core,
.core-ai {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  width: 430px !important;
  height: 430px !important;
  top: 50% !important;
  z-index: 8 !important;
}
.core > div,
.core-ai > div {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.core::before,
.core::after,
.core-ai::before,
.core-ai::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Logo itself is the only light source */
.fave-pulse,
.fave,
.loom-big,
.loom-logo-card {
  width: 250px !important;
  height: 250px !important;
  margin: 0 auto 18px !important;
  background-size: 440% 440% !important;
  filter:
    drop-shadow(0 0 14px rgba(255,239,186,.98))
    drop-shadow(0 0 36px rgba(216,184,111,.90))
    drop-shadow(0 0 88px rgba(216,184,111,.48)) !important;
  animation:
    heart 1.36s ease-in-out infinite,
    colorflow 9s linear infinite,
    logoBreathNoDisc 7.2s ease-in-out infinite !important;
}
@keyframes logoBreathNoDisc {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.02); }
}

/* Remove any straight energy line if still present */
.lightline {
  display: none !important;
}

/* Mouse glow only across full hero, subtle and no rectangular edge */
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -10% -6% -12% -6% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at var(--mx,52%) var(--my,28%),
      rgba(255,230,165,.13) 0%,
      rgba(216,184,111,.055) 14%,
      rgba(98,215,255,.025) 26%,
      transparent 46%) !important;
  filter: blur(2px) !important;
  opacity: .8 !important;
}
.hero > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Keep node motion visible but calm */
.hero-node,
.node {
  animation-duration: 9.5s !important;
}

/* Ensure the modules remain visually above orbital lines */
.hero-node,
.node,
.core,
.core-ai {
  position: absolute !important;
}

/* Responsive safeguard */
@media(max-width: 1100px) {
  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    transform: translateY(-18px) !important;
    margin-top: -12px !important;
  }
  .core, .core-ai {
    width: 320px !important;
    height: 320px !important;
    top: 50% !important;
  }
  .fave-pulse, .fave, .loom-big, .loom-logo-card {
    width: 170px !important;
    height: 170px !important;
  }
}


/* === v15 final corrections from screenshot feedback === */

/* Header logo: add premium gold emission behind the logo mark/text */
.header {
  overflow: visible !important;
}
.header .logo {
  position: relative !important;
  z-index: 2 !important;
  filter:
    drop-shadow(0 0 8px rgba(255,240,190,.42))
    drop-shadow(0 0 22px rgba(216,184,111,.55))
    drop-shadow(0 0 46px rgba(216,184,111,.24)) !important;
}
.header::before {
  content: "" !important;
  position: absolute !important;
  left: 3.2vw !important;
  top: 50% !important;
  width: 260px !important;
  height: 90px !important;
  transform: translateY(-50%) !important;
  background: radial-gradient(ellipse at 34% 50%, rgba(216,184,111,.28), rgba(216,184,111,.10) 36%, transparent 72%) !important;
  filter: blur(14px) !important;
  opacity: .72 !important;
  pointer-events: none !important;
  animation: headerLogoGlow 7s ease-in-out infinite !important;
}
@keyframes headerLogoGlow {
  0%,100% { opacity:.44; transform: translateY(-50%) scale(.96); }
  50% { opacity:.86; transform: translateY(-50%) scale(1.04); }
}

/* Hero visual: restore healthy breathing room below header; not under the nav */
.hero {
  padding-top: 136px !important;
  padding-bottom: 74px !important;
}
.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  transform: translateY(-8px) !important;
  margin-top: -6px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Stop pseudo gradients from creating dark discs/rectangles */
.hero-system::before,
.hero-core::before,
.experience-hero::before,
.living::before,
.hero-visual::before,
.hero-system::after,
.hero-core::after,
.experience-hero::after,
.living::after,
.hero-visual::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}

/* Dedicated orbit layer: visible, large, moving, outside center.
   No small circle around LoomAi. */
.orbit-motion {
  position: absolute !important;
  inset: -34% -42% -34% -42% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.orbit-motion span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  border: 1.25px solid rgba(216,184,111,.26) !important;
  border-radius: 50% !important;
  transform-origin: center center !important;
  box-shadow: 0 0 18px rgba(216,184,111,.08) !important;
  opacity: .88 !important;
}
.orbit-motion span:nth-child(1) {
  width: 960px !important;
  height: 520px !important;
  transform: translate(-50%,-50%) rotate(-8deg);
  animation: orbitSweep1 18s ease-in-out infinite alternate !important;
}
.orbit-motion span:nth-child(2) {
  width: 1220px !important;
  height: 640px !important;
  transform: translate(-50%,-50%) rotate(10deg);
  animation: orbitSweep2 23s ease-in-out infinite alternate !important;
}
.orbit-motion span:nth-child(3) {
  width: 1520px !important;
  height: 820px !important;
  transform: translate(-50%,-50%) rotate(-20deg);
  animation: orbitSweep3 28s ease-in-out infinite alternate !important;
}
.orbit-motion span:nth-child(4) {
  width: 1880px !important;
  height: 1010px !important;
  transform: translate(-50%,-50%) rotate(18deg);
  animation: orbitSweep4 35s ease-in-out infinite alternate !important;
}
@keyframes orbitSweep1 {
  0% { transform: translate(-50%,-50%) rotate(-10deg) scale(.985); opacity:.62; }
  100% { transform: translate(-50%,-50%) rotate(-3deg) scale(1.045); opacity:.92; }
}
@keyframes orbitSweep2 {
  0% { transform: translate(-50%,-50%) rotate(7deg) scale(.98); opacity:.56; }
  100% { transform: translate(-50%,-50%) rotate(17deg) scale(1.05); opacity:.9; }
}
@keyframes orbitSweep3 {
  0% { transform: translate(-50%,-50%) rotate(-23deg) scale(.985); opacity:.52; }
  100% { transform: translate(-50%,-50%) rotate(-12deg) scale(1.04); opacity:.82; }
}
@keyframes orbitSweep4 {
  0% { transform: translate(-50%,-50%) rotate(15deg) scale(.99); opacity:.42; }
  100% { transform: translate(-50%,-50%) rotate(25deg) scale(1.035); opacity:.72; }
}

/* Mouse effect across the full hero width, subtle; not restricted to right half */
.hero {
  position: relative !important;
  overflow: visible !important;
}
.hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -10% -5% -12% -5% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at var(--mx,50%) var(--my,32%),
    rgba(255,231,168,.15) 0%,
    rgba(216,184,111,.07) 16%,
    rgba(98,215,255,.032) 28%,
    transparent 49%) !important;
  filter: blur(2px) !important;
  opacity: .86 !important;
}
.hero > * {
  position: relative !important;
  z-index: 2 !important;
}

/* LoomAi center: only logo glow; no circle, no backing disk, no central ring */
.core,
.core-ai {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  width: 420px !important;
  height: 420px !important;
  top: 52% !important;
  z-index: 8 !important;
}
.core > div,
.core-ai > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.core::before,
.core::after,
.core-ai::before,
.core-ai::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.fave-pulse,
.fave {
  width: 238px !important;
  height: 238px !important;
  margin: 0 auto 16px !important;
  filter:
    drop-shadow(0 0 14px rgba(255,240,190,.94))
    drop-shadow(0 0 38px rgba(216,184,111,.82))
    drop-shadow(0 0 86px rgba(216,184,111,.44)) !important;
  animation:
    heart 1.34s ease-in-out infinite,
    colorflow 8s linear infinite,
    logoSourceBreath 6.5s ease-in-out infinite !important;
}
@keyframes logoSourceBreath {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.018); }
}
.lightline { display: none !important; }

/* Move nodes down enough so none sit under the header */
.n1 { top: 7% !important; }
.n2 { top: 8% !important; }
.n3 { top: 24% !important; }
.n4 { top: 43% !important; }
.n5 { bottom: 15% !important; }
.n6 { bottom: 1% !important; }
.n7 { bottom: -1% !important; }
.n8 { bottom: 1% !important; }
.n9 { bottom: 15% !important; }
.n10 { top: 43% !important; }
.n11 { top: 24% !important; }
.n12 { top: 8% !important; }
.n13 { top: 13% !important; }
.n14 { top: 59% !important; }
.n15 { top: 59% !important; }
.n16 { top: 13% !important; }

/* The module labels stay premium and large */
.hero-node b,
.node b {
  font-size: 23px !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
.hero-node span,
.node span {
  font-size: 13px !important;
  line-height: 1.24 !important;
}
.hero-node,
.node {
  animation-duration: 9s !important;
}
.module-tile strong {
  font-size: 32px !important;
  line-height: .96 !important;
  letter-spacing: -.058em !important;
  font-weight: 780 !important;
}

/* Make sure orbit lines are behind nodes and center */
.particle-field,
.particles { z-index: 3 !important; }
.hero-node,
.node { z-index: 5 !important; }
.core,
.core-ai { z-index: 6 !important; }

/* Header-safe responsive tuning */
@media(max-width:1100px) {
  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    transform: translateY(6px) !important;
    margin-top: 0 !important;
  }
  .orbit-motion span:nth-child(1) { width: 720px !important; height: 420px !important; }
  .orbit-motion span:nth-child(2) { width: 920px !important; height: 520px !important; }
  .orbit-motion span:nth-child(3) { width: 1120px !important; height: 640px !important; }
  .orbit-motion span:nth-child(4) { width: 1340px !important; height: 760px !important; }
  .core, .core-ai { width: 320px !important; height: 320px !important; top: 52% !important; }
  .fave-pulse, .fave { width: 170px !important; height: 170px !important; }
}
@media(max-width:680px) {
  .hero { padding-top: 118px !important; }
  .module-tile strong { font-size: 24px !important; }
}


/* === v16 responsive overflow fix for iPad / mobile === */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  position: relative !important;
}

main,
section,
.header,
.hero,
.section,
.contact,
.feature-strip,
.strip,
.module-matrix-wrap,
.module-wrap {
  max-width: 100vw !important;
}

/* Keep the full-hero glow, but prevent it from expanding page width */
.hero {
  overflow-x: clip !important;
  overflow-y: visible !important;
  contain: paint !important;
}

@supports not (overflow: clip) {
  .hero {
    overflow-x: hidden !important;
  }
}

.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  max-width: 100% !important;
  width: 100% !important;
}

/* Tablet / iPad */
@media (max-width: 1180px) {
  .header {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 100vw !important;
  }

  .logo {
    max-width: min(330px, 58vw) !important;
    height: 66px !important;
  }

  .header::before {
    left: 10px !important;
    width: min(260px, 64vw) !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 118px !important;
    padding-bottom: 60px !important;
  }

  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    min-height: 650px !important;
    height: 650px !important;
    transform: translateY(0) !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  .orbit-motion {
    inset: 0 !important;
    overflow: hidden !important;
  }

  .orbit-motion span:nth-child(1) { width: 760px !important; height: 420px !important; }
  .orbit-motion span:nth-child(2) { width: 960px !important; height: 520px !important; }
  .orbit-motion span:nth-child(3) { width: 1160px !important; height: 650px !important; }
  .orbit-motion span:nth-child(4) { width: 1340px !important; height: 760px !important; }

  .core,
  .core-ai {
    width: 330px !important;
    height: 330px !important;
    top: 52% !important;
  }

  .fave-pulse,
  .fave {
    width: 174px !important;
    height: 174px !important;
  }

  .core h2,
  .core-ai {
    max-width: 100% !important;
  }

  .core h2,
  .core-ai h2 {
    font-size: 42px !important;
  }

  .core p,
  .core-ai p {
    font-size: 14px !important;
    max-width: 240px !important;
  }

  .hero-node,
  .node {
    width: 122px !important;
    min-height: 74px !important;
    padding: 10px !important;
  }

  .hero-node b,
  .node b {
    font-size: 16px !important;
  }

  .hero-node span,
  .node span {
    font-size: 10px !important;
  }

  .n1 { left: 46% !important; top: 6% !important; }
  .n2 { right: 12% !important; top: 9% !important; }
  .n3 { right: 3% !important; top: 25% !important; }
  .n4 { right: 3% !important; top: 44% !important; }
  .n5 { right: 8% !important; bottom: 17% !important; }
  .n6 { right: 22% !important; bottom: 5% !important; }
  .n7 { left: 46% !important; bottom: 3% !important; }
  .n8 { left: 24% !important; bottom: 5% !important; }
  .n9 { left: 7% !important; bottom: 17% !important; }
  .n10 { left: 3% !important; top: 44% !important; }
  .n11 { left: 5% !important; top: 25% !important; }
  .n12 { left: 22% !important; top: 9% !important; }
  .n13 { left: 35% !important; top: 14% !important; }
  .n14 { left: 12% !important; top: 59% !important; }
  .n15 { right: 12% !important; top: 59% !important; }
  .n16 { left: 58% !important; top: 16% !important; }

  .module-matrix,
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .equal-grid,
  .future-grid,
  .integration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .contact {
    margin-left: 24px !important;
    margin-right: 24px !important;
    grid-template-columns: 1fr !important;
  }

  .contact-intro {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .form-zone {
    grid-template-columns: 1fr !important;
  }
}

/* Phone */
@media (max-width: 760px) {
  .header {
    height: 84px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .logo {
    max-width: min(265px, 70vw) !important;
    height: 58px !important;
  }

  .hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 104px !important;
  }

  h1,
  .title-gradient,
  .hero-title {
    font-size: clamp(44px, 13vw, 62px) !important;
    line-height: .98 !important;
  }

  .lead,
  .intro {
    font-size: 16px !important;
  }

  .actions {
    width: 100% !important;
  }

  .btn {
    width: 100% !important;
  }

  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    height: 520px !important;
    min-height: 520px !important;
  }

  .hero-node,
  .node {
    display: none !important;
  }

  .orbit-motion span:nth-child(1) { width: 480px !important; height: 270px !important; }
  .orbit-motion span:nth-child(2) { width: 620px !important; height: 340px !important; }
  .orbit-motion span:nth-child(3) { width: 780px !important; height: 430px !important; }
  .orbit-motion span:nth-child(4) { width: 940px !important; height: 520px !important; }

  .core,
  .core-ai {
    width: 260px !important;
    height: 260px !important;
  }

  .fave-pulse,
  .fave {
    width: 140px !important;
    height: 140px !important;
  }

  .core h2,
  .core-ai h2 {
    font-size: 34px !important;
  }

  .core p,
  .core-ai p {
    font-size: 13px !important;
    max-width: 210px !important;
  }

  .module-matrix,
  .module-grid,
  .equal-grid,
  .future-grid,
  .integration-grid,
  .role-grid,
  .form-grid,
  .loom-words,
  .words {
    grid-template-columns: 1fr !important;
  }

  .module-tile strong {
    font-size: 24px !important;
  }

  .contact {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .contact-intro,
  .form-zone {
    padding: 22px !important;
  }
}


/* === v17 final iPad overflow hardening + gold LoomAi favicon === */

/* Global overflow hard-stop */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
body * {
  box-sizing: border-box !important;
}
main, .header, .hero, .section, .contact, footer {
  width: 100% !important;
  max-width: 100% !important;
}

/* Prevent common grid/flex children from forcing width */
.hero > *,
.section > *,
.contact > *,
.split > *,
.loom-grid > *,
.story > *,
.form-zone > *,
.module-grid > *,
.future-grid > *,
.integration-grid > *,
.role-grid > *,
.detail > * {
  min-width: 0 !important;
}

/* Hero wrapper must clip decorative layers on touch devices */
.hero,
.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  overflow-x: clip !important;
}
@supports not (overflow: clip) {
  .hero,
  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    overflow-x: hidden !important;
  }
}

/* Nothing decorative may create viewport width */
.orbit-motion,
.particle-field,
.particles {
  max-width: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.orbit-motion span {
  max-width: none !important;
}

/* iPad / tablet fine-tuning */
@media (max-width: 1180px) {
  html, body {
    overflow-x: hidden !important;
  }

  .header {
    width: 100% !important;
  }

  .hero {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .strip,
  .contact {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: auto !important;
  }

  /* Force single-column areas that may overflow on iPad */
  .split,
  .loom-grid,
  .story,
  .contact,
  .form-zone {
    grid-template-columns: 1fr !important;
  }

  .story-rail,
  .contact-intro {
    border-right: 0 !important;
  }

  /* Keep feature / future cards in 2 columns with true shrinkability */
  .module-grid,
  .future-grid,
  .integration-grid,
  .role-grid,
  .detail,
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Hero decorative system size */
  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    height: 640px !important;
    min-height: 640px !important;
  }

  /* Bring orbit sizes inside clipping area */
  .orbit-motion {
    inset: 0 !important;
  }
  .orbit-motion span:nth-child(1) { width: 640px !important; height: 350px !important; }
  .orbit-motion span:nth-child(2) { width: 820px !important; height: 450px !important; }
  .orbit-motion span:nth-child(3) { width: 980px !important; height: 560px !important; }
  .orbit-motion span:nth-child(4) { width: 1160px !important; height: 660px !important; }

  .header .logo {
    max-width: 54vw !important;
    height: 62px !important;
  }
}

/* Narrow tablets / phones */
@media (max-width: 820px) {
  .hero,
  .section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .strip,
  .contact {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .module-grid,
  .future-grid,
  .integration-grid,
  .role-grid,
  .detail,
  .form-grid,
  .quick {
    grid-template-columns: 1fr !important;
  }

  .quick div {
    border-right: 0 !important;
    padding-right: 0 !important;
  }
}


/* === v18 final content review + iPad/mobile horizontal scroll hard fix === */

/* Real viewport-width control. Previous overflow hidden can fail when absolute layers are wider than layout. */
html {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  position: relative !important;
}
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* Prevent all major layout blocks from becoming wider than viewport */
body > *,
main,
header,
footer,
section,
.header,
.hero,
.contact,
.strip,
.feature-strip,
.module-matrix-wrap,
.timeline,
.day-flow,
.story-flow,
.loom-grid,
.split,
.role-grid,
.equal-grid,
.future-grid,
.integration-grid,
.module-grid,
.module-matrix,
.form-zone,
.form-grid {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Desktop keeps the designed visual. Touch/tablet gets strict clipping. */
@media (pointer: coarse), (max-width: 1180px) {
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 14px !important;
  }

  .header .logo,
  .logo {
    max-width: min(300px, 55vw) !important;
    width: auto !important;
    height: 60px !important;
    object-fit: contain !important;
  }

  /* The desktop nav is too wide on iPad and is one common cause of side scroll. */
  .nav {
    display: none !important;
  }

  .header-cta {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 116px !important;
    padding-bottom: 58px !important;
    gap: 34px !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }

  .hero > div,
  .hero > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .title-gradient,
  .hero-title,
  h1 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .btn {
    max-width: 100% !important;
  }

  /* The Hero system is the largest source of iPad overflow. It must become a clipped local stage. */
  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 640px !important;
    min-height: 640px !important;
    transform: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }

  .orbit-motion,
  .particle-field,
  .particles {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    inset: 0 !important;
    overflow: hidden !important;
    contain: paint !important;
  }

  /* Use viewport-safe orbit sizes on iPad. The lines still animate, but cannot push layout sideways. */
  .orbit-motion span {
    left: 50% !important;
    top: 50% !important;
    max-width: none !important;
  }
  .orbit-motion span:nth-child(1) {
    width: min(760px, 118vw) !important;
    height: 390px !important;
  }
  .orbit-motion span:nth-child(2) {
    width: min(920px, 138vw) !important;
    height: 500px !important;
  }
  .orbit-motion span:nth-child(3) {
    width: min(1080px, 158vw) !important;
    height: 600px !important;
  }
  .orbit-motion span:nth-child(4) {
    width: min(1220px, 176vw) !important;
    height: 700px !important;
  }

  .core,
  .core-ai {
    width: 320px !important;
    height: 320px !important;
    max-width: 86vw !important;
    top: 52% !important;
    left: 50% !important;
  }

  .fave-pulse,
  .fave {
    width: 170px !important;
    height: 170px !important;
  }

  .core h2,
  .core-ai h2 {
    font-size: 40px !important;
  }

  .core p,
  .core-ai p {
    font-size: 14px !important;
    max-width: 230px !important;
  }

  /* Tablet node placement: inside the clipped stage, no negative offsets. */
  .hero-node,
  .node {
    width: 118px !important;
    min-height: 72px !important;
    padding: 9px !important;
    max-width: 32vw !important;
  }
  .hero-node b,
  .node b {
    font-size: 15px !important;
  }
  .hero-node span,
  .node span {
    font-size: 10px !important;
  }

  .n1 { left: 44% !important; right: auto !important; top: 6% !important; bottom: auto !important; }
  .n2 { right: 10% !important; left: auto !important; top: 9% !important; bottom: auto !important; }
  .n3 { right: 2% !important; left: auto !important; top: 25% !important; bottom: auto !important; }
  .n4 { right: 2% !important; left: auto !important; top: 44% !important; bottom: auto !important; }
  .n5 { right: 8% !important; left: auto !important; bottom: 18% !important; top: auto !important; }
  .n6 { right: 22% !important; left: auto !important; bottom: 5% !important; top: auto !important; }
  .n7 { left: 44% !important; right: auto !important; bottom: 3% !important; top: auto !important; }
  .n8 { left: 22% !important; right: auto !important; bottom: 5% !important; top: auto !important; }
  .n9 { left: 6% !important; right: auto !important; bottom: 18% !important; top: auto !important; }
  .n10 { left: 2% !important; right: auto !important; top: 44% !important; bottom: auto !important; }
  .n11 { left: 4% !important; right: auto !important; top: 25% !important; bottom: auto !important; }
  .n12 { left: 20% !important; right: auto !important; top: 9% !important; bottom: auto !important; }
  .n13 { left: 34% !important; right: auto !important; top: 15% !important; bottom: auto !important; }
  .n14 { left: 10% !important; right: auto !important; top: 60% !important; bottom: auto !important; }
  .n15 { right: 10% !important; left: auto !important; top: 60% !important; bottom: auto !important; }
  .n16 { left: 57% !important; right: auto !important; top: 16% !important; bottom: auto !important; }

  .section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden !important;
  }

  .strip,
  .contact {
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    overflow: hidden !important;
  }

  .split,
  .loom-grid,
  .timeline,
  .story,
  .contact,
  .form-zone {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .module-matrix,
  .module-grid,
  .equal-grid,
  .future-grid,
  .integration-grid,
  .role-grid,
  .detail-grid,
  .form-grid,
  .loom-words {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone and small iPad portrait */
@media (max-width: 820px) {
  .header {
    height: 84px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .header .logo,
  .logo {
    max-width: min(255px, 68vw) !important;
    height: 56px !important;
  }
  .header-cta {
    display: none !important;
  }

  .hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 104px !important;
  }

  .title-gradient,
  .hero-title,
  h1 {
    font-size: clamp(42px, 12.8vw, 62px) !important;
    line-height: .98 !important;
  }

  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    height: 520px !important;
    min-height: 520px !important;
  }

  .hero-node,
  .node {
    display: none !important;
  }

  .orbit-motion span:nth-child(1) { width: 470px !important; height: 270px !important; }
  .orbit-motion span:nth-child(2) { width: 600px !important; height: 340px !important; }
  .orbit-motion span:nth-child(3) { width: 730px !important; height: 420px !important; }
  .orbit-motion span:nth-child(4) { width: 860px !important; height: 500px !important; }

  .core,
  .core-ai {
    width: 260px !important;
    height: 260px !important;
  }

  .fave-pulse,
  .fave {
    width: 138px !important;
    height: 138px !important;
  }

  .module-matrix,
  .module-grid,
  .equal-grid,
  .future-grid,
  .integration-grid,
  .role-grid,
  .detail-grid,
  .form-grid,
  .loom-words {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .strip,
  .contact {
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

/* Emergency: any accidental 100vw inside padded containers should not widen the page */
[style*="100vw"] {
  max-width: 100% !important;
}


/* === v19 absolute horizontal-scroll fix + final form polish === */

/* Dedicated clipping shell. This is stronger than only applying overflow to body. */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}

body {
  position: relative !important;
  touch-action: pan-y !important;
}

.site-frame {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  position: relative !important;
}

@supports (overflow: clip) {
  html,
  body,
  .site-frame,
  .hero,
  .hero-system {
    overflow-x: clip !important;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

img,
svg,
video,
canvas {
  max-width: 100% !important;
}

/* Never let major blocks create a width beyond the viewport */
.header,
main,
section,
footer,
.hero,
.section,
.strip,
.feature-strip,
.contact,
.module-matrix-wrap,
.eco-panel,
.timeline,
.day-flow,
.story-flow,
.loom-grid,
.split,
.form-zone,
.form-grid,
.module-grid,
.module-matrix,
.equal-grid,
.future-grid,
.integration-grid,
.role-grid,
.detail-grid {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Desktop: keep visual premium but clip decorative layers inside their stage */
.hero {
  overflow: hidden !important;
  contain: paint !important;
}

.hero-system,
.hero-core,
.experience-hero,
.living,
.hero-visual {
  overflow: hidden !important;
  contain: layout paint !important;
  max-width: 100% !important;
  width: 100% !important;
}

.orbit-motion,
.particle-field,
.particles {
  overflow: hidden !important;
  contain: paint !important;
  max-width: 100% !important;
  width: 100% !important;
}

.orbit-motion {
  inset: 0 !important;
}

/* Preserve animated orbits without allowing them to expand document width */
.orbit-motion span {
  max-width: none !important;
  will-change: transform !important;
}

/* Wide tablets including iPad landscape */
@media (max-width: 1400px), (pointer: coarse) {
  .site-frame {
    overflow: hidden !important;
  }

  .header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .nav {
    display: none !important;
  }

  .header .logo,
  .logo {
    max-width: min(320px, 60vw) !important;
    height: 62px !important;
    object-fit: contain !important;
  }

  .header-cta {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
    max-width: 38vw !important;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 116px !important;
    gap: 34px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .title-gradient,
  .hero-title,
  h1 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .actions,
  .quick-metrics {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    height: 650px !important;
    min-height: 650px !important;
    transform: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .orbit-motion span:nth-child(1) {
    width: min(760px, 116vw) !important;
    height: 390px !important;
  }
  .orbit-motion span:nth-child(2) {
    width: min(920px, 132vw) !important;
    height: 500px !important;
  }
  .orbit-motion span:nth-child(3) {
    width: min(1080px, 148vw) !important;
    height: 600px !important;
  }
  .orbit-motion span:nth-child(4) {
    width: min(1220px, 164vw) !important;
    height: 700px !important;
  }

  .core,
  .core-ai {
    width: 320px !important;
    height: 320px !important;
    max-width: 86vw !important;
    top: 52% !important;
    left: 50% !important;
  }

  .fave-pulse,
  .fave {
    width: 170px !important;
    height: 170px !important;
  }

  .core h2,
  .core-ai h2 {
    font-size: 40px !important;
  }

  .core p,
  .core-ai p {
    font-size: 14px !important;
    max-width: 230px !important;
  }

  .hero-node,
  .node {
    width: 118px !important;
    min-height: 72px !important;
    padding: 9px !important;
    max-width: 32vw !important;
  }

  .hero-node b,
  .node b {
    font-size: 15px !important;
  }

  .hero-node span,
  .node span {
    font-size: 10px !important;
  }

  .n1 { left: 44% !important; right: auto !important; top: 6% !important; bottom: auto !important; }
  .n2 { right: 10% !important; left: auto !important; top: 9% !important; bottom: auto !important; }
  .n3 { right: 2% !important; left: auto !important; top: 25% !important; bottom: auto !important; }
  .n4 { right: 2% !important; left: auto !important; top: 44% !important; bottom: auto !important; }
  .n5 { right: 8% !important; left: auto !important; bottom: 18% !important; top: auto !important; }
  .n6 { right: 22% !important; left: auto !important; bottom: 5% !important; top: auto !important; }
  .n7 { left: 44% !important; right: auto !important; bottom: 3% !important; top: auto !important; }
  .n8 { left: 22% !important; right: auto !important; bottom: 5% !important; top: auto !important; }
  .n9 { left: 6% !important; right: auto !important; bottom: 18% !important; top: auto !important; }
  .n10 { left: 2% !important; right: auto !important; top: 44% !important; bottom: auto !important; }
  .n11 { left: 4% !important; right: auto !important; top: 25% !important; bottom: auto !important; }
  .n12 { left: 20% !important; right: auto !important; top: 9% !important; bottom: auto !important; }
  .n13 { left: 34% !important; right: auto !important; top: 15% !important; bottom: auto !important; }
  .n14 { left: 10% !important; right: auto !important; top: 60% !important; bottom: auto !important; }
  .n15 { right: 10% !important; left: auto !important; top: 60% !important; bottom: auto !important; }
  .n16 { left: 57% !important; right: auto !important; top: 16% !important; bottom: auto !important; }

  .section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: hidden !important;
  }

  .strip,
  .feature-strip,
  .contact {
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    overflow: hidden !important;
  }

  .split,
  .loom-grid,
  .timeline,
  .story,
  .contact,
  .form-zone {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .module-matrix,
  .module-grid,
  .equal-grid,
  .future-grid,
  .integration-grid,
  .role-grid,
  .detail-grid,
  .form-grid,
  .loom-words {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phone / narrow tablet */
@media (max-width: 820px) {
  .header {
    height: 84px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .header .logo,
  .logo {
    max-width: min(255px, 68vw) !important;
    height: 56px !important;
  }

  .header-cta {
    display: none !important;
  }

  .hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 104px !important;
  }

  .title-gradient,
  .hero-title,
  h1 {
    font-size: clamp(42px, 12.8vw, 62px) !important;
    line-height: .98 !important;
  }

  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    height: 520px !important;
    min-height: 520px !important;
  }

  .hero-node,
  .node {
    display: none !important;
  }

  .orbit-motion span:nth-child(1) { width: 470px !important; height: 270px !important; }
  .orbit-motion span:nth-child(2) { width: 600px !important; height: 340px !important; }
  .orbit-motion span:nth-child(3) { width: 730px !important; height: 420px !important; }
  .orbit-motion span:nth-child(4) { width: 860px !important; height: 500px !important; }

  .core,
  .core-ai {
    width: 260px !important;
    height: 260px !important;
  }

  .fave-pulse,
  .fave {
    width: 138px !important;
    height: 138px !important;
  }

  .module-matrix,
  .module-grid,
  .equal-grid,
  .future-grid,
  .integration-grid,
  .role-grid,
  .detail-grid,
  .form-grid,
  .loom-words {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .strip,
  .feature-strip,
  .contact {
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

.form-status {
  margin-top: 14px !important;
  color: #f3d48a !important;
  font-size: 13px !important;
  min-height: 20px !important;
}

.required-note::before {
  content: "Direct step delivery enabled • ";
  color: #f3d48a;
}


/* === v20: iPad must visually match desktop + desktop form containment === */

/*
  v19 removed horizontal scroll by switching iPad/touch layout into a stacked/mobile structure.
  v20 keeps the desktop-style layout on iPad/tablet while still clipping decorative overflow.
*/

/* Global containment stays active */
html,
body,
.site-frame {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}

/* Desktop form should never escape the viewport */
.contact {
  width: auto !important;
  max-width: calc(100vw - 9.2vw) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 2fr) !important;
  align-items: stretch !important;
}

.contact-intro,
.form-zone,
.form-zone > *,
.form-step,
.form-step.active,
.form-grid,
.form-grid > *,
label,
input,
select,
textarea {
  min-width: 0 !important;
  max-width: 100% !important;
}

.form-zone {
  width: 100% !important;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  overflow: hidden !important;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

input,
select,
textarea {
  width: 100% !important;
  max-width: 100% !important;
}

/* Long form buttons/status must wrap inside the panel */
.form-actions,
.required-note,
.form-status {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.required-note {
  text-align: right !important;
}

/* iPad/tablet: keep desktop presentation instead of switching to mobile stack */
@media (min-width: 760px) and (max-width: 1400px) {
  .site-frame {
    overflow-x: hidden !important;
  }

  .header {
    height: 96px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-left: clamp(14px, 2.4vw, 36px) !important;
    padding-right: clamp(14px, 2.4vw, 36px) !important;
    gap: clamp(8px, 1vw, 18px) !important;
    overflow: hidden !important;
  }

  .header .logo,
  .logo {
    height: clamp(52px, 6.2vw, 72px) !important;
    max-width: clamp(145px, 18vw, 310px) !important;
    flex: 0 1 auto !important;
    object-fit: contain !important;
  }

  .nav {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    gap: clamp(5px, .85vw, 18px) !important;
    font-size: clamp(9px, .86vw, 13px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .nav a {
    white-space: nowrap !important;
    flex: 0 1 auto !important;
  }

  .header-cta {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    max-width: 160px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding: clamp(8px, .8vw, 12px) clamp(9px, 1vw, 18px) !important;
    font-size: clamp(9px, .82vw, 13px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr) !important;
    align-items: center !important;
    min-height: 100vh !important;
    padding-top: 122px !important;
    padding-left: clamp(20px, 4vw, 64px) !important;
    padding-right: clamp(20px, 4vw, 64px) !important;
    gap: clamp(20px, 3vw, 44px) !important;
    overflow: hidden !important;
  }

  .hero > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  h1,
  .title-gradient,
  .hero-title {
    font-size: clamp(38px, 5.4vw, 92px) !important;
    line-height: .96 !important;
    max-width: 100% !important;
  }

  .tagline {
    font-size: clamp(15px, 1.6vw, 20px) !important;
  }

  .lead,
  .intro {
    font-size: clamp(14px, 1.45vw, 19px) !important;
    line-height: 1.62 !important;
  }

  .quick-metrics {
    display: flex !important;
    gap: clamp(10px, 1.6vw, 22px) !important;
    flex-wrap: wrap !important;
    overflow: hidden !important;
  }

  .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .btn {
    width: auto !important;
    max-width: 100% !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
  }

  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    height: clamp(560px, 56vw, 735px) !important;
    min-height: clamp(560px, 56vw, 735px) !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .core,
  .core-ai {
    width: clamp(235px, 25vw, 420px) !important;
    height: clamp(235px, 25vw, 420px) !important;
    left: 50% !important;
    top: 52% !important;
  }

  .fave-pulse,
  .fave {
    width: clamp(128px, 13vw, 238px) !important;
    height: clamp(128px, 13vw, 238px) !important;
  }

  .core h2,
  .core-ai h2 {
    font-size: clamp(30px, 3.2vw, 54px) !important;
  }

  .core p,
  .core-ai p {
    font-size: clamp(11px, 1.1vw, 15px) !important;
    max-width: min(230px, 24vw) !important;
  }

  .hero-node,
  .node {
    display: block !important;
    width: clamp(82px, 10vw, 145px) !important;
    min-height: clamp(58px, 6.8vw, 88px) !important;
    padding: clamp(7px, .8vw, 12px) !important;
    max-width: 30vw !important;
  }

  .hero-node b,
  .node b {
    font-size: clamp(12px, 1.35vw, 23px) !important;
    line-height: 1.02 !important;
  }

  .hero-node span,
  .node span {
    font-size: clamp(8px, .9vw, 13px) !important;
    line-height: 1.18 !important;
  }

  /* Desktop-like node orbit, contained */
  .n1 { left: 45% !important; right: auto !important; top: 7% !important; bottom: auto !important; }
  .n2 { right: 11% !important; left: auto !important; top: 9% !important; bottom: auto !important; }
  .n3 { right: 2% !important; left: auto !important; top: 25% !important; bottom: auto !important; }
  .n4 { right: 2% !important; left: auto !important; top: 44% !important; bottom: auto !important; }
  .n5 { right: 8% !important; left: auto !important; bottom: 18% !important; top: auto !important; }
  .n6 { right: 22% !important; left: auto !important; bottom: 5% !important; top: auto !important; }
  .n7 { left: 45% !important; right: auto !important; bottom: 3% !important; top: auto !important; }
  .n8 { left: 22% !important; right: auto !important; bottom: 5% !important; top: auto !important; }
  .n9 { left: 6% !important; right: auto !important; bottom: 18% !important; top: auto !important; }
  .n10 { left: 2% !important; right: auto !important; top: 44% !important; bottom: auto !important; }
  .n11 { left: 4% !important; right: auto !important; top: 25% !important; bottom: auto !important; }
  .n12 { left: 20% !important; right: auto !important; top: 9% !important; bottom: auto !important; }
  .n13 { left: 34% !important; right: auto !important; top: 15% !important; bottom: auto !important; }
  .n14 { left: 10% !important; right: auto !important; top: 60% !important; bottom: auto !important; }
  .n15 { right: 10% !important; left: auto !important; top: 60% !important; bottom: auto !important; }
  .n16 { left: 57% !important; right: auto !important; top: 16% !important; bottom: auto !important; }

  .orbit-motion {
    inset: 0 !important;
    overflow: hidden !important;
  }

  .orbit-motion span:nth-child(1) { width: min(820px, 118vw) !important; height: 430px !important; }
  .orbit-motion span:nth-child(2) { width: min(1020px, 138vw) !important; height: 540px !important; }
  .orbit-motion span:nth-child(3) { width: min(1240px, 158vw) !important; height: 670px !important; }
  .orbit-motion span:nth-child(4) { width: min(1440px, 176vw) !important; height: 780px !important; }

  .section {
    padding-left: clamp(20px, 4vw, 64px) !important;
    padding-right: clamp(20px, 4vw, 64px) !important;
  }

  .module-matrix,
  .module-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .equal-grid,
  .future-grid,
  .integration-grid,
  .role-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .contact {
    margin-left: clamp(20px, 4vw, 64px) !important;
    margin-right: clamp(20px, 4vw, 64px) !important;
    max-width: calc(100vw - (clamp(20px, 4vw, 64px) * 2)) !important;
    grid-template-columns: minmax(250px, .86fr) minmax(0, 2.14fr) !important;
  }

  .form-zone {
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) !important;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Smaller iPad portrait: still desktop-like, but compact enough not to scroll sideways */
@media (min-width: 760px) and (max-width: 920px) {
  .nav {
    gap: 5px !important;
    font-size: 9px !important;
  }

  .header-cta {
    max-width: 120px !important;
  }

  .hero {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
    gap: 18px !important;
  }

  .module-matrix,
  .module-grid,
  .equal-grid,
  .future-grid,
  .integration-grid,
  .role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .contact {
    grid-template-columns: minmax(210px, .78fr) minmax(0, 2.22fr) !important;
  }

  .form-zone {
    grid-template-columns: minmax(140px, 175px) minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 22px !important;
  }

  .step-tab {
    padding: 9px !important;
    font-size: 11px !important;
  }

  .form-grid {
    gap: 12px !important;
  }
}

/* True phone only: mobile structure remains. */
@media (max-width: 759px) {
  .nav {
    display: none !important;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-node,
  .node {
    display: none !important;
  }

  .contact,
  .form-zone {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* === v20 iPad/mobile layout + clean public footer (2026-08-02) === */

/* Hero module cards intentionally show names only. */
.hero-node span,
.node span {
  display: none !important;
}

.hero-node,
.node {
  min-height: 58px !important;
  padding: 10px 12px !important;
  justify-content: center !important;
  touch-action: manipulation;
}

.hero-node b,
.node b {
  font-size: clamp(15px, 1.25vw, 22px) !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
}

section[id] {
  scroll-margin-top: 104px;
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(216,184,111,.38);
  border-radius: 14px;
  color: #ffe8a2;
  background: rgba(4,5,7,.84);
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .22s ease, opacity .22s ease;
}

body.nav-open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
body.nav-open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.footer {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 34px max(20px, 4.6vw) calc(34px + env(safe-area-inset-bottom)) !important;
  background: #050608 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* iPad landscape and smaller: use a real tablet layout, not a compressed desktop canvas. */
@media (max-width: 1180px) {
  body.nav-open {
    overflow: hidden !important;
  }

  .header {
    height: 86px !important;
    padding: env(safe-area-inset-top) 20px 0 !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .header .logo,
  .logo {
    width: auto !important;
    max-width: min(290px, 48vw) !important;
    height: 62px !important;
  }

  .header-cta {
    display: inline-flex !important;
    margin-left: auto !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  .menu-toggle {
    display: inline-flex !important;
    position: relative;
    z-index: 92;
  }

  .nav {
    display: flex !important;
    position: fixed !important;
    z-index: 90 !important;
    top: calc(86px + env(safe-area-inset-top)) !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 106px - env(safe-area-inset-top)) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 12px !important;
    border: 1px solid rgba(216,184,111,.30) !important;
    border-radius: 18px !important;
    background: rgba(3,4,6,.97) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.58) !important;
    backdrop-filter: blur(20px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(.985) !important;
    transform-origin: top right !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  }

  body.nav-open .nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .nav a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .nav a:hover,
  .nav a:focus-visible {
    background: rgba(216,184,111,.12) !important;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 118px 20px 58px !important;
    gap: 40px !important;
    contain: none !important;
  }

  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    width: 100% !important;
    height: clamp(650px, 70vw, 760px) !important;
    min-height: clamp(650px, 70vw, 760px) !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .core,
  .core-ai {
    width: clamp(285px, 31vw, 345px) !important;
    height: clamp(285px, 31vw, 345px) !important;
    left: 50% !important;
    top: 52% !important;
  }

  .fave-pulse,
  .fave {
    width: clamp(150px, 17vw, 184px) !important;
    height: clamp(150px, 17vw, 184px) !important;
  }

  .hero-node,
  .node {
    display: flex !important;
    width: clamp(112px, 13vw, 132px) !important;
    max-width: 27vw !important;
    min-height: 58px !important;
    animation-duration: 8s !important;
  }

  .hero-node b,
  .node b {
    font-size: clamp(15px, 1.7vw, 20px) !important;
  }

  .n12 { left: 18% !important; right: auto !important; top: 5% !important; bottom: auto !important; }
  .n13 { left: 32% !important; right: auto !important; top: 14% !important; bottom: auto !important; }
  .n1  { left: 47% !important; right: auto !important; top: 4% !important; bottom: auto !important; }
  .n16 { left: 61% !important; right: auto !important; top: 14% !important; bottom: auto !important; }
  .n2  { right: 14% !important; left: auto !important; top: 5% !important; bottom: auto !important; }
  .n11 { left: 2% !important; right: auto !important; top: 24% !important; bottom: auto !important; }
  .n10 { left: 2% !important; right: auto !important; top: 43% !important; bottom: auto !important; }
  .n14 { left: 8% !important; right: auto !important; top: 62% !important; bottom: auto !important; }
  .n9  { left: 10% !important; right: auto !important; bottom: 12% !important; top: auto !important; }
  .n3  { right: 2% !important; left: auto !important; top: 24% !important; bottom: auto !important; }
  .n4  { right: 2% !important; left: auto !important; top: 43% !important; bottom: auto !important; }
  .n15 { right: 8% !important; left: auto !important; top: 62% !important; bottom: auto !important; }
  .n5  { right: 10% !important; left: auto !important; bottom: 12% !important; top: auto !important; }
  .n8  { left: 25% !important; right: auto !important; bottom: 3% !important; top: auto !important; }
  .n7  { left: 44% !important; right: auto !important; bottom: 2% !important; top: auto !important; }
  .n6  { right: 22% !important; left: auto !important; bottom: 3% !important; top: auto !important; }

  .feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .feature {
    border-right: 1px solid rgba(255,255,255,.08) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .module-matrix,
  .module-grid,
  .equal-grid,
  .future-grid,
  .integration-grid,
  .role-grid,
  .detail-grid,
  .form-grid,
  .loom-words {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .split,
  .loom-grid,
  .timeline,
  .story,
  .contact,
  .form-zone {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .contact {
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .contact-intro {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .footer {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* iPad portrait: the LoomAi stage becomes a stable module grid. */
@media (min-width: 760px) and (max-width: 920px) {
  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 28px !important;
    overflow: hidden !important;
  }

  .orbit-motion,
  .lightline {
    display: none !important;
  }

  .core,
  .core-ai {
    position: relative !important;
    grid-column: 1 / -1 !important;
    left: auto !important;
    top: auto !important;
    width: 280px !important;
    height: 280px !important;
    max-width: 72vw !important;
    margin: 18px auto 28px !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-node,
  .node {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 62px !important;
    margin: 0 !important;
    animation: none !important;
    transform: none !important;
  }

  .hero-node b,
  .node b {
    font-size: clamp(15px, 2.2vw, 19px) !important;
  }
}

/* Phones: readable single-column content with a two-column module grid. */
@media (max-width: 759px) {
  .header {
    height: 80px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .header .logo,
  .logo {
    max-width: min(220px, 66vw) !important;
    height: 54px !important;
  }

  .header-cta {
    display: none !important;
  }

  .nav {
    top: calc(80px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100dvh - 96px - env(safe-area-inset-top)) !important;
  }

  .hero {
    padding: 102px 16px 46px !important;
    gap: 30px !important;
  }

  h1,
  .title-gradient,
  .hero-title {
    font-size: clamp(40px, 12.4vw, 58px) !important;
    line-height: .98 !important;
  }

  .tagline {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .subline,
  .lead,
  .intro {
    font-size: 15px !important;
  }

  .quick-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .quick-metrics div {
    border-right: 0 !important;
    padding-right: 0 !important;
  }

  .actions,
  .actions .btn,
  .btn {
    width: 100% !important;
  }

  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 14px 18px !important;
    overflow: hidden !important;
  }

  .orbit-motion,
  .lightline {
    display: none !important;
  }

  .core,
  .core-ai {
    position: relative !important;
    grid-column: 1 / -1 !important;
    left: auto !important;
    top: auto !important;
    width: min(238px, 72vw) !important;
    height: min(238px, 72vw) !important;
    max-width: none !important;
    margin: 12px auto 20px !important;
    transform: none !important;
    animation: none !important;
  }

  .fave-pulse,
  .fave {
    width: 126px !important;
    height: 126px !important;
  }

  .core h2,
  .core-ai h2 {
    font-size: 34px !important;
  }

  .core p,
  .core-ai p {
    font-size: 12px !important;
    max-width: 190px !important;
  }

  .hero-node,
  .node {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;
    margin: 0 !important;
    animation: none !important;
    transform: none !important;
  }

  .hero-node b,
  .node b {
    font-size: clamp(14px, 4.2vw, 17px) !important;
  }

  .feature-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .feature {
    border-right: 0 !important;
  }

  .module-matrix,
  .module-grid,
  .equal-grid,
  .future-grid,
  .integration-grid,
  .role-grid,
  .detail-grid,
  .form-grid,
  .loom-words {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .contact {
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .contact-intro,
  .form-zone {
    padding: 22px 18px !important;
  }

  .footer {
    gap: 10px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 360px) {
  .hero-system,
  .hero-core,
  .experience-hero,
  .living,
  .hero-visual {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }

  .hero-node,
  .node {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-node,
  .node,
  .core,
  .core-ai,
  .fave-pulse,
  .fave,
  .orbit-motion span {
    animation: none !important;
  }
}


/* v20 desktop hero node de-overlap: keeps the premium orbit while using title-only cards. */
.hero-node b,
.node b {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

@media (min-width: 1181px) {
  .hero-node,
  .node {
    width: 132px !important;
    max-width: 132px !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
  }

  .hero-node b,
  .node b {
    font-size: clamp(14px, 1vw, 18px) !important;
  }

  .n12 { left: 8% !important; right: auto !important; top: 4% !important; bottom: auto !important; }
  .n13 { left: 25% !important; right: auto !important; top: 13% !important; bottom: auto !important; }
  .n1  { left: 42% !important; right: auto !important; top: 3% !important; bottom: auto !important; }
  .n16 { left: 59% !important; right: auto !important; top: 13% !important; bottom: auto !important; }
  .n2  { right: 5% !important; left: auto !important; top: 4% !important; bottom: auto !important; }

  .n11 { left: 2% !important; right: auto !important; top: 25% !important; bottom: auto !important; }
  .n10 { left: 0 !important; right: auto !important; top: 43% !important; bottom: auto !important; }
  .n14 { left: 3% !important; right: auto !important; top: 60% !important; bottom: auto !important; }
  .n9  { left: 4% !important; right: auto !important; bottom: 15% !important; top: auto !important; }

  .n3  { right: 2% !important; left: auto !important; top: 25% !important; bottom: auto !important; }
  .n4  { right: 0 !important; left: auto !important; top: 43% !important; bottom: auto !important; }
  .n15 { right: 3% !important; left: auto !important; top: 60% !important; bottom: auto !important; }
  .n5  { right: 4% !important; left: auto !important; bottom: 15% !important; top: auto !important; }

  .n8  { left: 15% !important; right: auto !important; bottom: 2% !important; top: auto !important; }
  .n7  { left: 42% !important; right: auto !important; bottom: 1% !important; top: auto !important; }
  .n6  { right: 14% !important; left: auto !important; bottom: 2% !important; top: auto !important; }
}

@media (min-width: 921px) and (max-width: 1180px) {
  .hero-node,
  .node {
    width: clamp(132px, 14.5vw, 148px) !important;
    max-width: 29vw !important;
  }

  .hero-node b,
  .node b {
    font-size: clamp(14px, 1.55vw, 18px) !important;
  }
}