.hero-robot {
  --paper:#E9E7E3;
  --ink:#1B1713;
  --ink-dim:rgba(27,23,19,.66);
  --wine:#9E1D38;
  --screen:#0D0B0A;
  position:relative;
  height:100dvh;
  min-height:640px;
  overflow:hidden;
  margin:0;
  padding:0;
  box-sizing:border-box;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
}
.hero-robot *,
.hero-robot *::before,
.hero-robot *::after { margin:0; padding:0; box-sizing:border-box; }

.hero-robot .photo-layer { position:absolute; inset:0; overflow:hidden; }
.hero-robot .photo-anchor { position:absolute; top:-28%; left:50%; width:100%; aspect-ratio:1086/1448; transform:translateX(-50%); }
.hero-robot .photo { position:relative; width:100%; height:100%; transform-origin:50% 55%; transform-style:preserve-3d; transition:transform .35s cubic-bezier(.16,1,.3,1); will-change:transform; }
.hero-robot .photo img { width:100%; height:100%; display:block; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%); mask-image:linear-gradient(90deg,transparent 0,#000 14%); }
.hero-robot .scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(233,231,227,.92) 0%,rgba(233,231,227,.55) 30%,transparent 52%); }

.hero-robot .screen { position:absolute; z-index:1; left:29.35%; top:28.85%; width:36.55%; height:23.35%; padding:0; transform:none; border:0; border-radius:10% / 12%; overflow:hidden; background:var(--screen); box-shadow:inset 0 0 12px rgba(0,0,0,.9); }
.hero-robot .screen-depth { position:absolute; inset:-3%; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.hero-robot .face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:16%; opacity:0; transition:opacity .22s ease; }
.hero-robot .face.on { opacity:1; }
.hero-robot .face svg { width:56%; height:auto; max-height:70%; }
.hero-robot .photo .brand-icon { position:relative; z-index:1; display:block; width:40%; height:40%; max-width:none; object-fit:contain; object-position:center; transform:translateY(-3px); filter:drop-shadow(0 4px 0 rgba(255,255,255,.13)) drop-shadow(0 10px 5px rgba(0,0,0,.58)) drop-shadow(0 0 18px rgba(255,255,255,.12)); }
.hero-robot .face:not([data-face="eyes"])::before { content:""; position:absolute; width:52%; aspect-ratio:1; border-radius:34%; background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.1),rgba(255,255,255,.025) 46%,rgba(0,0,0,.14) 72%); box-shadow:inset 0 1px rgba(255,255,255,.12),0 16px 35px rgba(0,0,0,.24); }
.hero-robot .face[data-face="tiktok"] .brand-icon { filter:drop-shadow(-3px -2px 0 #25f4ee) drop-shadow(3px 3px 0 #fe2c55) drop-shadow(0 10px 5px rgba(0,0,0,.58)); }
.hero-robot .face[data-face="instagram"] .brand-icon { filter:drop-shadow(-3px 3px 0 #feda75) drop-shadow(3px -3px 0 #833ab4) drop-shadow(0 10px 5px rgba(0,0,0,.58)); }
.hero-robot .eye { width:20%; aspect-ratio:.78; position:relative; }
.hero-robot .eye i { display:block; width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 50% 42%,#FFFDF6 0%,#FFF3D8 55%,#F5DBA6 100%); box-shadow:0 0 14px rgba(255,244,214,.9),0 0 34px rgba(255,238,200,.4); animation:heroRobotBlink 4.6s infinite; }
.hero-robot .eye:nth-child(2) i { animation-delay:.05s; }
.hero-robot .scanlines { position:absolute; inset:0; pointer-events:none; opacity:.28; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.6) 2px 3px); }
.hero-robot .glass { position:absolute; inset:0; pointer-events:none; background:radial-gradient(130% 100% at 28% 12%,rgba(255,255,255,.16),transparent 46%); }
.hero-robot .flicker { position:absolute; inset:0; pointer-events:none; background:#fff; opacity:0; animation:heroRobotFlicker 7s infinite; }
.hero-robot .screen.glitch .face.on { animation:heroRobotGlitchA .32s steps(2) both; }
.hero-robot .screen.glitch::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,transparent 30%,rgba(255,80,120,.2) 32%,transparent 34%,transparent 60%,rgba(80,220,255,.16) 62%,transparent 64%); animation:heroRobotGlitchB .32s steps(3) both; }

.hero-robot .ui { position:relative; z-index:3; height:100dvh; display:flex; flex-direction:column; padding:0 clamp(20px,4.5vw,64px); }
.hero-robot .stage { flex:1; display:flex; flex-direction:column; justify-content:center; max-width:640px; }
.hero-robot .eyebrow { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); display:flex; align-items:center; gap:12px; opacity:0; animation:heroRobotUp .8s ease .5s forwards; }
.hero-robot .eyebrow::before { content:""; width:30px; height:2px; background:var(--wine); }
.hero-robot h1 { margin-top:18px; font-family:'Oswald',Arial Narrow,sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(42px,5.8vw,92px); line-height:.98; letter-spacing:-.01em; opacity:0; animation:heroRobotUp .9s ease .65s forwards; }
.hero-robot h1 .dot { color:var(--wine); }
.hero-robot .sub { margin-top:22px; max-width:440px; font-size:16.5px; font-weight:500; line-height:1.6; color:var(--ink-dim); opacity:0; animation:heroRobotUp .9s ease .85s forwards; }
.hero-robot .cta-row { margin-top:32px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; opacity:0; animation:heroRobotUp .9s ease 1.05s forwards; }
.hero-robot .btn { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--ink); border-radius:999px; padding:17px 28px; text-decoration:none; transition:.3s; }
.hero-robot .btn:hover { background:var(--wine); }
.hero-robot .ghost { font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:2px solid rgba(27,23,19,.28); padding-bottom:4px; transition:.3s; }
.hero-robot .ghost:hover { border-color:var(--wine); color:var(--wine); }
.hero-robot .stats { margin-top:42px; display:flex; gap:clamp(24px,3.6vw,52px); opacity:0; animation:heroRobotUp .9s ease 1.25s forwards; }
.hero-robot .stats b { font-weight:900; font-size:clamp(26px,2.6vw,40px); display:block; line-height:1; }
.hero-robot .stats span { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); display:block; margin-top:8px; }
.hero-robot .badge { position:absolute; right:18px; bottom:16px; z-index:5; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em; color:rgba(27,23,19,.4); }

@keyframes heroRobotBlink { 0%,92%,100%{transform:scaleY(1)} 95.5%{transform:scaleY(.06)} }
@keyframes heroRobotFlicker { 0%,96%,100%{opacity:0} 97%{opacity:.04} 98%{opacity:0} 99%{opacity:.02} }
@keyframes heroRobotGlitchA { 0%{transform:none;filter:none} 25%{transform:translateX(-6%) skewX(-2deg);filter:hue-rotate(35deg) brightness(1.7)} 50%{transform:translateX(5%);filter:hue-rotate(-30deg)} 75%{transform:translateX(-2%);filter:brightness(1.4)} 100%{transform:none;filter:none} }
@keyframes heroRobotGlitchB { 0%{transform:translateY(-30%)} 100%{transform:translateY(90%)} }
@keyframes heroRobotUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

@media (max-width:960px) {
  .hero-robot .ui { height:auto; min-height:100dvh; padding-bottom:44vh; }
  .hero-robot .photo-anchor { top:auto; bottom:-4%; width:100%; left:50%; transform:translateX(-50%); }
  .hero-robot .scrim { background:linear-gradient(180deg,rgba(233,231,227,.95) 34%,rgba(233,231,227,.5) 55%,transparent 75%); }
  .hero-robot .stage { padding-top:12vh; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-robot *,
  .hero-robot *::before,
  .hero-robot *::after { animation-duration:.001s !important; animation-delay:0s !important; transition:none !important; }
}