:root {
  --ink: #11110f;
  --paper: #f2efe4;
  --lime: #c9ff44;
  --coral: #ff6b4a;
  --blue: #78aaff;
  --line: rgba(242, 239, 228, 0.18);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 84px; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.noise { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; width: 360px; height: 360px; border-radius: 50%; background: rgba(201,255,68,.08); filter: blur(60px); transform: translate(-50%,-50%); pointer-events:none; z-index:-1; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: 86px; padding: 0 clamp(22px,4vw,68px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: linear-gradient(to bottom, rgba(17,17,15,.92), rgba(17,17,15,0)); }
.brand { justify-self: start; display:flex; gap:14px; align-items:center; font-size:22px; font-weight:800; letter-spacing:-1px; }
.brand-dot, .footer-brand span { color: var(--lime); }
.brand-cube { position:relative; width:22px; height:22px; transform:rotate(30deg) skew(-5deg); }
.brand-cube i { position:absolute; inset:0; border:1px solid var(--lime); }
.brand-cube i:nth-child(2) { transform:translate(5px,-5px); }
.brand-cube i:nth-child(3) { width:5px; left:auto; transform:skewY(-45deg) translate(1px,-2px); background:var(--lime); }
.nav-console { display:flex; border:1px solid var(--line); background:rgba(17,17,15,.65); backdrop-filter:blur(14px); box-shadow:0 8px 0 #070706; transform: perspective(600px) rotateX(-3deg); }
.nav-console a { padding:12px 18px; border-right:1px solid var(--line); font:11px var(--mono); transition:.25s; }
.nav-console a:last-child { border:0; }
.nav-console a span { color:var(--lime); margin-right:6px; }
.nav-console a:hover { background:var(--paper); color:var(--ink); transform:translateY(-3px); }
.status-pill { justify-self:end; font:10px var(--mono); border:1px solid var(--line); border-radius:40px; padding:10px 14px; }
.status-pill i,.live-dot:before,.form-status i { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--lime); margin-right:8px; box-shadow:0 0 12px var(--lime); animation:pulse 2s infinite; }
.menu-toggle { display:none; background:none; border:0; padding:10px; }
.menu-toggle span { display:block; width:24px; height:1px; background:var(--paper); margin:6px; }

.hero { min-height:100vh; position:relative; padding:140px clamp(22px,5vw,84px) 110px; display:grid; grid-template-columns:minmax(460px,.85fr) 1.15fr; align-items:center; overflow:hidden; }
.hero:before { content:""; position:absolute; left:-5%; top:18%; width:42vw; height:42vw; border:1px solid rgba(255,255,255,.04); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.015),0 0 0 140px rgba(255,255,255,.012); }
.hero-copy { position:relative; z-index:2; }
.eyebrow { font:11px var(--mono); letter-spacing:.08em; color:rgba(242,239,228,.65); }
.hero .eyebrow { display:flex; gap:26px; margin-bottom:24px; }
.hero .eyebrow span { color:var(--lime); }
.hero .eyebrow b { font-weight:400; }
h1 { font-size:clamp(60px,6.5vw,106px); line-height:.88; letter-spacing:-.075em; margin:0; font-weight:600; }
h1 em { color:var(--ink); font-style:normal; -webkit-text-stroke:1.5px var(--lime); text-shadow:4px 4px 0 rgba(201,255,68,.15); }
.hero-intro { max-width:570px; font-size:clamp(16px,1.4vw,20px); line-height:1.55; color:rgba(242,239,228,.72); margin:34px 0; }
.hero-actions { display:flex; align-items:center; gap:30px; }
.btn { display:flex; align-items:center; min-width:235px; justify-content:space-between; padding:7px 7px 7px 20px; font:12px var(--mono); border:1px solid var(--paper); transition:.25s; }
.btn b { width:42px; height:42px; display:grid; place-items:center; background:var(--ink); color:var(--lime); font-size:20px; }
.btn-primary { background:var(--lime); color:var(--ink); border-color:var(--lime); box-shadow:7px 7px 0 rgba(201,255,68,.2); }
.btn-primary:hover { transform:translate(-3px,-3px); box-shadow:11px 11px 0 rgba(201,255,68,.2); }
.text-link { font:12px var(--mono); border-bottom:1px solid var(--line); padding:12px 0; }
.text-link span { color:var(--lime); margin-left:10px; }
.hero-metrics { display:flex; gap:0; margin-top:64px; }
.hero-metrics div { display:flex; align-items:center; gap:10px; min-width:145px; border-left:1px solid var(--line); padding-left:14px; }
.hero-metrics strong { font-size:30px; letter-spacing:-2px; }
.hero-metrics span { font:9px/1.5 var(--mono); color:rgba(242,239,228,.5); }

.factory-wrap { height:min(680px,72vh); position:relative; min-width:0; cursor:grab; }
.factory-wrap:active { cursor:grabbing; }
#factory-canvas { position:absolute; inset:0; width:100%; height:100%; }
.factory-wrap:after { content:""; position:absolute; inset:12% 4% 10%; border:1px solid rgba(201,255,68,.16); pointer-events:none; clip-path:polygon(0 0,12% 0,12% 1px,88% 1px,88% 0,100% 0,100% 12%,calc(100% - 1px) 12%,calc(100% - 1px) 88%,100% 88%,100% 100%,88% 100%,88% calc(100% - 1px),12% calc(100% - 1px),12% 100%,0 100%,0 88%,1px 88%,1px 12%,0 12%); }
.factory-label { position:absolute; font:9px var(--mono); background:var(--paper); color:var(--ink); padding:6px 9px; box-shadow:4px 4px 0 var(--coral); }
.factory-label span { color:#8b2c17; margin-right:8px; }
.label-a { left:8%; top:25%; }
.label-b { right:5%; bottom:25%; }
.factory-hud { position:absolute; left:9%; right:6%; bottom:12%; display:flex; justify-content:space-between; font:9px var(--mono); color:rgba(242,239,228,.6); }
.factory-hud i { display:inline-block; width:5px; height:5px; background:var(--lime); border-radius:50%; margin-right:8px; }
.factory-hud span { letter-spacing:.2em; }
.drag-hint { position:absolute; right:4%; top:17%; writing-mode:vertical-rl; font:8px var(--mono); color:rgba(242,239,228,.4); }
.drag-hint span { color:var(--lime); margin-bottom:8px; }
.marquee { position:absolute; bottom:0; left:-2%; width:104%; padding:13px 0; background:var(--coral); color:var(--ink); transform:rotate(-1.1deg); overflow:hidden; font:11px var(--mono); white-space:nowrap; }
.marquee div { width:max-content; animation:marquee 24s linear infinite; }
.marquee i { padding:0 22px; }

.manifesto { min-height:660px; background:var(--paper); color:var(--ink); padding:120px clamp(22px,6vw,100px); display:grid; grid-template-columns:.2fr 1.1fr .7fr; align-items:center; gap:5vw; }
.section-index { font:12px var(--mono); align-self:start; }
.manifesto-copy h2,.section-heading h2,.contact h2 { font-size:clamp(42px,5vw,78px); line-height:.98; letter-spacing:-.06em; margin:20px 0 34px; }
.manifesto-copy h2 span { color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.manifesto-copy > p:last-child { max-width:600px; line-height:1.7; color:#55554e; }
.process-dial { height:370px; background:var(--blue); border:1px solid var(--ink); position:relative; transform-style:preserve-3d; box-shadow:14px 14px 0 var(--ink); transition:transform .15s; }
.dial-rings { position:absolute; width:230px; aspect-ratio:1; border:1px solid var(--ink); border-radius:50%; top:40px; left:50%; transform:translateX(-50%) translateZ(30px); display:grid; place-items:center; box-shadow:inset 0 0 0 25px var(--blue), inset 0 0 0 26px var(--ink), inset 0 0 0 55px var(--blue), inset 0 0 0 56px var(--ink); }
.dial-core { width:70px; height:70px; border-radius:50%; background:var(--ink); color:var(--lime); display:grid; place-items:center; font:20px var(--mono); animation:spin 8s linear infinite; }
.dial-copy { position:absolute; bottom:22px; left:22px; right:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.dial-copy span { font:8px var(--mono); border-top:1px solid var(--ink); padding-top:7px; }

.portfolio { padding:130px clamp(22px,6vw,100px); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:70px; }
.section-heading h2 { margin-bottom:0; }
.section-heading > p { max-width:400px; font-size:15px; line-height:1.7; color:rgba(242,239,228,.6); }
.product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; perspective:1200px; }
.product-card { min-height:590px; padding:26px; position:relative; color:var(--ink); overflow:hidden; transform-style:preserve-3d; transition:transform .15s, box-shadow .3s; box-shadow:10px 10px 0 rgba(255,255,255,.12); }
.product-card:hover { box-shadow:18px 18px 0 rgba(255,255,255,.12); }
.card-lime { background:var(--lime); }
.card-coral { background:var(--coral); }
.card-cream { background:var(--paper); }
.card-blue { background:var(--blue); }
.card-top { display:flex; justify-content:space-between; font:9px var(--mono); position:relative; z-index:2; transform:translateZ(26px); }
.live-dot:before { background:var(--ink); box-shadow:none; width:5px; height:5px; }
.card-content { position:absolute; left:28px; bottom:30px; max-width:72%; z-index:2; transform:translateZ(38px); }
.card-content p { font:9px var(--mono); border-bottom:1px solid rgba(17,17,15,.3); padding-bottom:9px; display:inline-block; }
.card-content h3 { font-size:clamp(56px,6vw,90px); line-height:.82; letter-spacing:-.075em; margin:14px 0 22px; }
.card-content > span { display:block; max-width:410px; line-height:1.5; font-size:14px; }
.card-action { position:absolute; right:25px; bottom:25px; width:58px; height:58px; border:1px solid var(--ink); background:transparent; color:var(--ink); display:grid; place-items:center; font-size:22px; cursor:pointer; z-index:3; transition:.2s; }
.card-action:hover { background:var(--ink); color:var(--lime); transform:translateZ(40px) rotate(8deg); }
.product-object { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%) translateZ(50px); }
.object-booking { width:250px; height:190px; border:2px solid var(--ink); background:#efebe0; transform:translate(-50%,-50%) rotate(-7deg) translateZ(50px); box-shadow:18px 18px 0 #111,36px 36px 0 rgba(17,17,15,.18); }
.object-booking:before { content:""; position:absolute; left:0; right:0; top:40px; border-top:2px solid; }
.object-booking i { position:absolute; width:16px; height:28px; top:-14px; border:2px solid; background:var(--lime); }
.object-booking i:nth-child(1){left:35px}.object-booking i:nth-child(2){left:115px}.object-booking i:nth-child(3){right:35px}
.object-booking b { position:absolute; inset:62px 20px 20px; display:grid; place-items:center; background:var(--coral); border:2px solid; font:36px var(--mono); }
.object-stock { width:270px; height:190px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; transform:translate(-50%,-50%) rotate(5deg) translateZ(50px); }
.object-stock div { background:var(--paper); border:2px solid; box-shadow:7px 7px 0 rgba(17,17,15,.8); }
.object-stock div:after { content:""; display:block; width:30px; height:8px; background:var(--ink); margin:20px; }
.object-stock b { position:absolute; width:82px; height:82px; display:grid; place-items:center; background:var(--lime); border:2px solid; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-5deg); font:30px var(--mono); }

/* Fidelo: tarjeta de fidelización con sellos */
.object-fidelo { width:280px; height:200px; transform:translate(-50%,-50%) rotate(-6deg) translateZ(50px); }
.fidelo-card { position:absolute; inset:0; background:var(--paper); border:2px solid var(--ink); box-shadow:16px 16px 0 var(--ink); display:flex; flex-direction:column; padding:18px; }
.fidelo-card:before { content:"FIDELO · CLUB"; position:absolute; top:14px; left:18px; font:9px var(--mono); color:var(--ink); }
.fidelo-card b { position:absolute; right:18px; top:12px; font:14px var(--mono); background:var(--coral); color:var(--ink); padding:2px 8px; border:2px solid var(--ink); transform:rotate(6deg); }
.fidelo-card span { display:block; margin-top:auto; }
.fidelo-card span:after { content:""; display:flex; gap:8px; margin-top:8px; background-image:radial-gradient(circle, var(--ink) 38%, transparent 40%); background-size:24px 24px; background-repeat:repeat-x; height:24px; }
.fidelo-stamp { position:absolute; width:90px; height:90px; right:-20px; bottom:-15px; border:3px dashed var(--coral); border-radius:50%; transform:rotate(18deg); display:grid; place-items:center; font:700 12px var(--sans); color:var(--coral); text-align:center; line-height:1.1; }
.fidelo-stamp:before { content:"1 VISITA = 1 SELLO"; }

/* Qrflow: QR dinámico con flecha de actualización */
.object-qrflow { width:260px; height:200px; transform:translate(-50%,-50%) rotate(4deg) translateZ(50px); display:flex; align-items:center; justify-content:center; gap:14px; }
.qr-tile { width:140px; height:140px; background:var(--paper); border:2px solid var(--ink); box-shadow:14px 14px 0 var(--ink); padding:14px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:4px; position:relative; }
.qr-tile:before { content:""; position:absolute; inset:14px; background-image:linear-gradient(var(--ink) 25%, transparent 25%, transparent 50%, var(--ink) 50%, var(--ink) 75%, transparent 75%); background-size:14px 14px; opacity:.85; }
.qr-tile span { display:block; border:1px solid var(--ink); }
.qr-tile span:nth-child(1),.qr-tile span:nth-child(3),.qr-tile span:nth-child(7),.qr-tile span:nth-child(9) { background:var(--ink); }
.qr-arrow { font:36px var(--mono); color:var(--lime); text-shadow:3px 3px 0 var(--ink); animation:nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform:translateX(6px); } }
.card-wide { grid-column:span 2; min-height:520px; }
.card-wide .card-content { max-width:45%; }
.custom-visual { position:absolute; width:48%; right:6%; top:15%; bottom:15%; border:1px solid rgba(17,17,15,.25); overflow:hidden; transform:translateZ(20px) rotate(-2deg); background:repeating-linear-gradient(0deg,transparent 0 39px,rgba(17,17,15,.12) 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(17,17,15,.12) 40px); }
.custom-track { position:absolute; top:50%; left:-10%; width:120%; height:100px; border:2px solid; transform:rotate(-10deg); display:flex; justify-content:space-around; align-items:center; }
.custom-track i { width:58px; height:58px; border-radius:50%; border:2px solid; background:var(--paper); }
.custom-cube { position:absolute; left:50%; top:42%; width:115px; height:115px; transform:translate(-50%,-50%) rotate(12deg); background:var(--blue); border:2px solid; box-shadow:16px 16px 0 var(--coral); }
.custom-cube:before,.custom-cube:after { content:""; position:absolute; background:var(--lime); border:2px solid; }
.custom-cube:before { width:25px; right:-29px; top:8px; bottom:-18px; transform:skewY(45deg); }
.custom-cube:after { height:25px; left:8px; right:-17px; bottom:-29px; transform:skewX(45deg); }

/* Sección de portafolio (trabajo a medida) */
.client-work { background:var(--paper); color:var(--ink); }
.client-work .section-heading > p { color:rgba(17,17,15,.6); }
.client-work .section-heading h2 { color:var(--ink); }
.client-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(17,17,15,.18); border-left:1px solid rgba(17,17,15,.18); }
.client-card { padding:34px 30px 30px; background:var(--paper); border-right:1px solid rgba(17,17,15,.18); border-bottom:1px solid rgba(17,17,15,.18); position:relative; transition:background .25s, transform .15s; transform-style:preserve-3d; min-height:260px; }
.client-card:hover { background:var(--lime); }
.client-card-dark { background:var(--ink); color:var(--paper); }
.client-card-dark:hover { background:var(--coral); color:var(--ink); }
.client-card-coral { background:var(--coral); color:var(--ink); }
.client-card-coral:hover { background:var(--lime); }
.client-tag { font:9px var(--mono); letter-spacing:.08em; color:var(--ink); opacity:.7; margin-bottom:18px; transform:translateZ(20px); }
.client-card-dark .client-tag { color:var(--lime); opacity:.9; }
.client-card h3 { font-size:30px; letter-spacing:-.04em; margin:0 0 14px; transform:translateZ(26px); }
.client-card p { font-size:14px; line-height:1.55; max-width:340px; margin:0 0 28px; transform:translateZ(18px); }
.client-meta { display:flex; justify-content:space-between; align-items:center; font:9px var(--mono); padding-top:14px; border-top:1px solid currentColor; transform:translateZ(14px); }
.client-meta b { font-weight:400; }
.client-card-wide { grid-column:span 2; }
.cta-strip { margin-top:60px; padding:38px 44px; background:var(--ink); color:var(--paper); display:flex; justify-content:space-between; align-items:center; gap:30px; box-shadow:14px 14px 0 var(--lime); }
.cta-strip h3 { font-size:clamp(24px,2.6vw,34px); letter-spacing:-.04em; line-height:1.05; margin:8px 0 0; max-width:560px; }
.cta-strip .eyebrow { color:var(--lime); }
.cta-strip .btn { min-width:0; padding-left:22px; }

.principles { padding:40px clamp(22px,6vw,100px) 140px; }
.principle-list { margin-top:45px; border-top:1px solid var(--line); }
.principle-list div { display:grid; grid-template-columns:70px 1fr 1fr 60px; align-items:center; min-height:130px; border-bottom:1px solid var(--line); transition:.25s; }
.principle-list div:hover { padding-left:18px; background:rgba(201,255,68,.04); }
.principle-list span { color:var(--lime); font:10px var(--mono); }
.principle-list h3 { font-size:30px; letter-spacing:-.04em; }
.principle-list p { color:rgba(242,239,228,.5); font-size:13px; }
.principle-list b { font-size:27px; color:var(--coral); text-align:right; }

.contact { background:var(--lime); color:var(--ink); padding:120px clamp(22px,6vw,100px); display:grid; grid-template-columns:.8fr 1.2fr; gap:7vw; }
.contact-copy h2 { font-size:clamp(64px,7vw,110px); margin-bottom:35px; }
.contact-copy > p:not(.eyebrow) { max-width:430px; line-height:1.7; }
.contact-copy > a { display:inline-block; margin-top:35px; padding-bottom:6px; border-bottom:1px solid; font:12px var(--mono); }
.contact-copy > a span { margin-left:30px; }
.contact-form { background:var(--ink); color:var(--paper); padding:28px; box-shadow:16px 16px 0 rgba(17,17,15,.2); transform:perspective(1000px) rotateY(-2deg); }
.form-status { display:flex; align-items:center; font:9px var(--mono); border-bottom:1px solid var(--line); padding-bottom:18px; }
.form-status span { margin-right:auto; }.form-status b{font-weight:400;color:var(--lime)}.form-status i{margin-left:auto}
.input-module { position:relative; display:block; border-bottom:1px solid var(--line); padding:22px 52px 20px 0; transition:.25s; }
.input-module:focus-within { padding-left:16px; background:rgba(201,255,68,.05); box-shadow:inset 3px 0 var(--lime); }
.input-module > span { display:block; font:8px var(--mono); color:var(--lime); margin-bottom:12px; }
.input-module input,.input-module textarea { width:100%; border:0; background:none; color:var(--paper); outline:0; font-size:22px; resize:none; }
.input-module input::placeholder,.input-module textarea::placeholder { color:rgba(242,239,228,.27); }
.input-module > i { position:absolute; right:15px; top:50%; color:rgba(242,239,228,.4); font:18px var(--mono); }
.form-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:25px; gap:20px; }
.privacy { display:flex; align-items:center; gap:10px; font:8px var(--mono); color:rgba(242,239,228,.5); cursor:pointer; }
.privacy input { position:absolute; opacity:0; }
.privacy span { width:16px; height:16px; border:1px solid var(--line); display:block; }
.privacy input:checked + span { background:var(--lime); box-shadow:inset 0 0 0 4px var(--ink); }
.submit-btn { border:1px solid var(--lime); color:var(--ink); background:var(--lime); padding:5px 5px 5px 18px; display:flex; align-items:center; gap:25px; font:10px var(--mono); cursor:pointer; box-shadow:5px 5px 0 rgba(201,255,68,.2); }
.submit-btn b { background:var(--ink); color:var(--lime); width:42px; height:42px; display:grid; place-items:center; font-size:19px; }
.submit-btn:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(201,255,68,.2); }
.form-feedback { min-height:18px; margin:20px 0 0; color:var(--lime); font:10px var(--mono); }

footer { padding:80px clamp(22px,6vw,100px) 32px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:30px; }
.footer-brand { font-size:clamp(54px,7vw,110px); letter-spacing:-.08em; font-weight:800; grid-column:span 2; }
.footer-meta { display:flex; flex-direction:column; gap:7px; font:9px var(--mono); text-align:right; color:rgba(242,239,228,.5); }
.footer-links { display:flex; gap:25px; font:9px var(--mono); }
footer > p { grid-column:3; margin:0; text-align:right; font:8px var(--mono); color:rgba(242,239,228,.35); }

/* ===== Servicio estrella: migración IA open source ===== */
.star-service { padding:140px clamp(22px,6vw,100px) 150px; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.star-service:before { content:""; position:absolute; left:-15%; top:-20%; width:55vw; height:55vw; border:1px solid rgba(201,255,68,.08); border-radius:50%; pointer-events:none; box-shadow:0 0 0 90px rgba(201,255,68,.025),0 0 0 180px rgba(201,255,68,.015); }
.star-service:after { content:"OPEN SOURCE"; position:absolute; right:-2%; top:8%; font:900 clamp(80px,12vw,180px)/1 var(--sans); letter-spacing:-.08em; color:transparent; -webkit-text-stroke:1px rgba(242,239,228,.06); pointer-events:none; transform:rotate(-4deg); }
.star-header { display:grid; grid-template-columns:1.3fr 1fr; gap:6vw; align-items:end; margin-bottom:70px; position:relative; z-index:2; }
.star-header h2 { font-size:clamp(46px,5.4vw,92px); line-height:.94; letter-spacing:-.075em; margin:22px 0 0; }
.star-header h2 em { font-style:normal; color:var(--lime); -webkit-text-stroke:0; }
.star-flag { color:var(--lime) !important; background:rgba(201,255,68,.08); padding:4px 10px; border:1px solid rgba(201,255,68,.35); margin-right:10px; }
.star-header-side p { font-size:16px; line-height:1.65; color:rgba(242,239,228,.72); margin:0 0 28px; }
.star-header-side p b { color:var(--paper); font-weight:600; }

.migration-board { display:grid; grid-template-columns:1fr auto 1fr; gap:0; border:1px solid var(--line); background:rgba(242,239,228,.025); box-shadow:18px 18px 0 rgba(201,255,68,.15); transform-style:preserve-3d; transition:transform .15s; margin-bottom:80px; position:relative; z-index:2; }
.mig-side { padding:42px 38px 38px; min-height:340px; }
.mig-before { background:linear-gradient(180deg, rgba(255,107,74,.08), transparent 60%); border-right:1px solid var(--line); }
.mig-after { background:linear-gradient(180deg, rgba(201,255,68,.10), transparent 60%); }
.mig-tag { display:inline-block; font:9px var(--mono); padding:5px 10px; border:1px solid currentColor; margin-bottom:22px; }
.mig-before .mig-tag { color:var(--coral); }
.mig-after .mig-tag { color:var(--lime); }
.mig-side h3 { font-size:clamp(28px,2.8vw,38px); letter-spacing:-.04em; margin:0 0 26px; line-height:1.05; }
.mig-side ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.mig-side li { display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start; font-size:14px; line-height:1.45; color:rgba(242,239,228,.85); }
.mig-side li b { font:14px var(--mono); width:24px; height:24px; display:grid; place-items:center; border-radius:50%; }
.mig-before li b { background:rgba(255,107,74,.15); color:var(--coral); border:1px solid var(--coral); }
.mig-after li b { background:var(--lime); color:var(--ink); border:1px solid var(--lime); }
.mig-arrow { display:grid; place-items:center; padding:0 12px; background:var(--lime); color:var(--ink); width:80px; }
.mig-arrow span { writing-mode:vertical-rl; font:11px var(--mono); letter-spacing:.25em; }
.mig-arrow i { position:absolute; width:0; height:0; border-top:14px solid transparent; border-bottom:14px solid transparent; border-left:14px solid var(--ink); transform:rotate(90deg) translateY(8px); animation:bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform:rotate(90deg) translateY(14px); } }

.star-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); margin-bottom:80px; position:relative; z-index:2; }
.star-stats > div { padding:32px 28px; border-right:1px solid var(--line); transition:background .25s; }
.star-stats > div:last-child { border-right:0; }
.star-stats > div:hover { background:rgba(201,255,68,.05); }
.star-stats strong { display:block; font-size:clamp(40px,4.6vw,64px); letter-spacing:-.05em; line-height:1; color:var(--lime); margin-bottom:14px; }
.star-stats span { font-size:13px; line-height:1.5; color:rgba(242,239,228,.7); display:block; }

.star-how { position:relative; z-index:2; }
.star-how .eyebrow { margin-bottom:34px; }
.star-how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.star-how-grid > div { border-top:2px solid var(--lime); padding-top:22px; }
.star-how-grid span { font:11px var(--mono); color:var(--lime); display:block; margin-bottom:14px; }
.star-how-grid h4 { font-size:clamp(20px,1.8vw,24px); letter-spacing:-.03em; margin:0 0 12px; line-height:1.15; }
.star-how-grid p { font-size:13.5px; line-height:1.55; color:rgba(242,239,228,.65); margin:0; }

.reveal { opacity:0; transform:translateY(20px); animation:reveal .8s forwards; }
.reveal:nth-child(2){animation-delay:.1s}.reveal:nth-child(3){animation-delay:.2s}.reveal:nth-child(4){animation-delay:.3s}.reveal:nth-child(5){animation-delay:.4s}
@keyframes reveal { to{opacity:1;transform:none} }
@keyframes pulse { 50%{opacity:.35;transform:scale(.7)} }
@keyframes marquee { to{transform:translateX(-50%)} }
@keyframes spin { to{transform:rotate(360deg)} }

@media (max-width: 1050px) {
  .nav-console,.status-pill { display:none; }
  .menu-toggle { display:block; justify-self:end; }
  .site-header { grid-template-columns:1fr auto; }
  .nav-console.open { display:flex; position:absolute; top:75px; left:22px; right:22px; flex-direction:column; transform:none; }
  .nav-console.open a { border-right:0; border-bottom:1px solid var(--line); padding:18px; }
  .hero { grid-template-columns:1fr; padding-top:130px; }
  .factory-wrap { position:absolute; width:62%; height:55%; right:-10%; top:15%; opacity:.75; }
  .hero-copy { max-width:720px; }
  .hero-intro { max-width:500px; }
  .manifesto { grid-template-columns:50px 1fr; }
  .process-dial { grid-column:2; width:100%; }
  .client-grid { grid-template-columns:repeat(2,1fr); }
  .client-card-wide { grid-column:span 2; }
  .cta-strip { flex-direction:column; align-items:flex-start; padding:30px; }
  .cta-strip .btn { align-self:stretch; justify-content:space-between; }
  .star-header { grid-template-columns:1fr; gap:30px; align-items:start; }
  .star-header-side { max-width:560px; }
  .star-stats { grid-template-columns:repeat(2,1fr); }
  .star-stats > div:nth-child(2) { border-right:0; }
  .star-stats > div:nth-child(1),.star-stats > div:nth-child(2) { border-bottom:1px solid var(--line); }
  .star-how-grid { grid-template-columns:repeat(2,1fr); }
  .migration-board { grid-template-columns:1fr; }
  .mig-before { border-right:0; border-bottom:1px solid var(--line); }
  .mig-arrow { width:100%; height:60px; padding:0; }
  .mig-arrow span { writing-mode:horizontal-tb; }
  .mig-arrow i { transform:rotate(0deg) translateX(8px); }
  @keyframes bob { 50% { transform:rotate(0deg) translateX(14px); } }
  .star-service:after { font-size:60px; top:3%; }
}

@media (max-width: 820px) {
  .hero { min-height:auto; display:block; padding:128px 22px 92px; }
  .hero-copy { max-width:none; }
  h1 { font-size:clamp(48px,14vw,76px); line-height:.91; }
  .hero .eyebrow { justify-content:space-between; gap:12px; margin-bottom:22px; }
  .hero .eyebrow b { white-space:nowrap; }
  .hero-intro { max-width:650px; font-size:15px; margin:28px 0; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:12px; }
  .hero-actions .btn { width:100%; min-width:0; }
  .hero-actions .text-link { padding:11px 0 6px; }
  .hero-metrics { margin-top:38px; padding-top:22px; border-top:1px solid var(--line); }
  .hero-metrics div { min-width:0; width:50%; border-left:0; padding-left:0; }
  .hero-metrics div:last-child { display:none; }
  .factory-wrap { position:relative; width:calc(100% + 44px); height:390px; right:auto; top:auto; margin:26px -22px 22px; opacity:1; }
  .factory-wrap:after { inset:7% 5% 8%; }
  .factory-label { font-size:7px; padding:5px 7px; }
  .label-a { left:7%; top:18%; }
  .label-b { display:none; }
  .factory-hud { left:8%; right:8%; bottom:10%; }
  .drag-hint { display:none; }
  .manifesto { grid-template-columns:1fr; padding-top:90px; }
  .section-index { display:none; }
  .process-dial { grid-column:1; height:330px; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:30px; }
  .product-grid { grid-template-columns:1fr; }
  .product-card,.card-wide { grid-column:1; min-height:520px; }
  .client-grid { grid-template-columns:1fr; }
  .client-card-wide { grid-column:1; }
  .star-service { padding:90px 22px 100px; }
  .star-service:after { font-size:46px; }
  .star-stats { grid-template-columns:1fr; }
  .star-stats > div { border-right:0; border-bottom:1px solid var(--line); }
  .star-stats > div:last-child { border-bottom:0; }
  .star-how-grid { grid-template-columns:1fr; }
  .mig-side { padding:32px 26px; min-height:0; }
  .mig-side h3 { font-size:24px; }
  .card-wide { min-height:650px; }
  .card-wide .card-content { max-width:75%; }
  .custom-visual { width:85%; right:7%; top:13%; bottom:auto; height:290px; }
  .principle-list div { grid-template-columns:45px 1fr 40px; padding:20px 0; }
  .principle-list p { grid-column:2; }.principle-list b{grid-column:3;grid-row:1}
  .contact { grid-template-columns:1fr; padding-top:90px; }
  .contact-form { transform:none; padding:22px; }
  .form-bottom { align-items:flex-start; flex-direction:column; }
  .submit-btn { width:100%; justify-content:space-between; }
  footer { grid-template-columns:1fr; }
  .footer-brand,.footer-meta,footer>p { grid-column:1; text-align:left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .cursor-glow { display:none; }
}