/* HUGGYME hero v2: actual six-face CSS 3D solid, not a skewed 2D rectangle.
   AppFront architecture untouched. Responsive scene never uses fixed-width 520px overflow. */
:root { --cube-edge: 236px; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  align-items: center;
  min-height: 724px;
  height: auto;
}
.hero-copy { width: 100%; padding-top: 12px; }
.hero h1 { white-space: normal; font-size: clamp(44px, 4.15vw, 69px); }
.hero-visual {
  position: relative; width: 100%; height: 670px;
  left: auto; top: auto; transform: none;
  pointer-events: none; overflow: visible;
}
.scene-stage { position: absolute; inset: 0; pointer-events: none; }
.scene-stage .cosmos-svg { inset: 0; width: 100%; height: 100%; }
.scene-stage .visual-glow { inset: 11% 4% 7%; }
.hero-visual .cube-wrap {
  left: 50%; top: 49%; width: var(--cube-edge); height: var(--cube-edge);
  perspective: 1000px; perspective-origin: 50% 39%;
  transform: translate(-50%, -50%);
  filter: none; animation: cubeOrbitFloat 8s ease-in-out infinite;
  isolation: auto;
}
.cube-aura {
  position: absolute; inset: -55%; pointer-events: none;
  background: radial-gradient(circle,rgba(76,177,255,.29),rgba(39,122,235,.085) 37%,transparent 69%);
  filter: blur(32px);
}
.cube-3d {
  --angle-x: -22deg;
  --angle-y: -33deg;
  position: relative; z-index: 3;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--angle-x)) rotateY(var(--angle-y));
  animation: cubeLook 12s ease-in-out infinite alternate;
  will-change: transform;
}
.cube-face {
  position: absolute; inset: 0; display: block;
  box-sizing: border-box;
  border: 1.5px solid rgba(168,225,255,.89);
  border-radius: 7px;
  background-color: rgba(8,28,53,.87);
  backface-visibility: visible;
  box-shadow: inset 0 0 35px rgba(71,162,250,.19), inset 0 0 3px rgba(209,247,255,.65), 0 0 13px rgba(65,175,255,.45);
  overflow: hidden;
}
.cube-face::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(117deg,rgba(233,249,255,.22),transparent 25% 72%,rgba(75,166,245,.20)),
    repeating-linear-gradient(0deg,transparent 0 23px,rgba(100,192,255,.045) 24px,transparent 25px),
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(100,192,255,.045) 24px,transparent 25px);
  pointer-events: none;
}
.cube-face::after {
  content:''; position:absolute; inset:0;
  border: 1px solid rgba(160,226,255,.28); border-radius: inherit;
  box-shadow: inset 0 0 19px rgba(124,207,255,.20);
  pointer-events: none;
}
/* Six independent planes, projected in real 3D. Each edge joins in 3-space. */
.cube-face.face-front {
  transform: translateZ(calc(var(--cube-edge) / 2));
  background: radial-gradient(ellipse at 57% 14%,rgba(29,109,183,.32),transparent 75%),linear-gradient(155deg,rgba(15,46,81,.95),rgba(3,12,27,.93));
}
.cube-face.face-right {
  transform: rotateY(90deg) translateZ(calc(var(--cube-edge) / 2));
  background:linear-gradient(100deg,rgba(7,31,64,.87),rgba(1,10,23,.96));
}
.cube-face.face-left { transform: rotateY(-90deg) translateZ(calc(var(--cube-edge) / 2)); }
.cube-face.face-top {
  transform: rotateX(90deg) translateZ(calc(var(--cube-edge) / 2));
  background: radial-gradient(circle at 55% 52%,rgba(170,231,255,.32),transparent 55%),
              linear-gradient(25deg,rgba(33,110,186,.89),rgba(18,58,99,.79) 60%,rgba(109,183,245,.55));
  border-color: rgba(198,239,255,.98);
  box-shadow: inset 0 0 37px rgba(165,224,255,.25), 0 0 24px rgba(117,208,255,.48);
}
.cube-face.face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-edge) / 2)); background:#061423; }
.cube-face.face-back { transform: rotateY(180deg) translateZ(calc(var(--cube-edge) / 2)); background:#061322; }
.face-inner {
  height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap: 10px; position:relative; z-index:2;
  background: radial-gradient(ellipse at 50% 75%,rgba(58,132,231,.12),transparent 70%);
}
.face-inner .cube-logo { width: 53px; height: 66px; margin: 0; color:#35b8ff; filter:drop-shadow(0 0 12px rgba(68,181,255,.48)); }
.face-inner .cube-wordmark { font-size: 25px; letter-spacing: -.6px; line-height:1; font-weight:700; text-shadow:0 0 12px rgba(141,210,255,.7); }
.cube-caption { font-size:7px; letter-spacing:2.8px; color:#8fcfff; }
.face-trace {position:absolute;inset:19px; border:1px solid rgba(116,202,255,.17); transform:rotate(15deg) scale(.8); box-shadow:0 0 30px rgba(42,164,255,.16)}
.side-mark { position:absolute; font-size: 90px; font-weight:900; color:rgba(111,193,255,.14); top:60px; left:90px; }
.top-core { position:absolute; width:34%;height:34%;top:33%;left:33%; border:1px solid rgba(213,243,255,.55); transform:rotate(45deg); box-shadow:0 0 30px 13px rgba(144,222,255,.33),inset 0 0 35px rgba(155,228,255,.19); }
.cube-inner-core {
  position:absolute; width:54%;height:54%; top:23%;left:23%;
  transform:translateZ(0); border:1px solid rgba(125,212,255,.35);
  box-shadow:0 0 35px 16px rgba(59,150,246,.14),inset 0 0 35px 12px rgba(35,146,245,.17);
  border-radius:18px; pointer-events:none;
}
.cube-ground-glow {
  position:absolute; z-index:-1; width:125%;height:34%; left:-12.5%;top:109%; border-radius:50%;
  transform:rotateX(75deg);
  background:radial-gradient(ellipse,rgba(64,180,255,.5),rgba(24,107,209,.12) 43%,transparent 75%);
  filter:blur(15px); pointer-events:none;
}
@keyframes cubeOrbitFloat {
  0%,100% { transform:translate(-50%,-50%); }
  50% { transform:translate(-50%,-54%); }
}
@keyframes cubeLook {
  0% { transform:rotateX(-22deg) rotateY(-33deg); }
  50% { transform:rotateX(-20deg) rotateY(-28deg); }
  100% { transform:rotateX(-24deg) rotateY(-35deg); }
}
.hero-visual .orbit-product {
  pointer-events:auto; backdrop-filter: blur(13px);
  min-height:95px;
}
.hero-visual .orbit-product-body strong { white-space: normal; line-height:1.22; }
.hero-visual .orbit-product-body small { white-space:normal; }
.hero-visual .orbit-product-body > span { white-space:normal; }
.hero-visual .product-platform {width:223px;top:86px;left:39%;transform:rotate(2deg);border-color:rgba(89,171,252,.73)}
.hero-visual .product-ago {width:208px;top:265px;left:2%;transform:rotate(-5deg)}
.hero-visual .product-play {width:206px;top:270px;right:0;left:auto;transform:rotate(5deg)}
.hero-visual .product-eye {width:244px;bottom:52px;left:50%;transform:translateX(-50%) rotate(1deg)}
.product-soon,.tile-soon {display:inline-block; color:#cba9fa!important;font-weight:700;letter-spacing:1.35px;font-size:9px!important;}
.hero .metric:last-child { min-width:0; }
.products-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tile-soon { align-self:flex-start; margin-top:auto; padding-top:20px; }
.investor-section { padding:94px 0; border-block:1px solid rgba(103,157,204,.15);background:radial-gradient(ellipse at 29% 50%,rgba(75,74,169,.20),transparent 47%),linear-gradient(130deg,#080d17,#0d1725); }
.investor-layout {display:grid;grid-template-columns:minmax(250px,34%) minmax(0,1fr);gap:10%;align-items:center;}
.investor-content h2 {font-size:clamp(32px,3.7vw,55px);letter-spacing:-1.6px;font-weight:450;line-height:1.13;margin:20px 0;max-width:700px}
.investor-content>p:not(.eyebrow) {color:#aebbd0;font-size:16px;line-height:1.75;max-width:700px;margin-bottom:28px;}
.investor-visual {position:relative; width:min(100%,310px);aspect-ratio:1;margin:auto;display:grid;place-items:center;}
.investor-visual::before,.investor-visual::after {content:'';position:absolute;border:1px solid rgba(144,124,255,.32);inset:13%;transform:rotate(45deg);box-shadow:0 0 50px rgba(102,93,220,.1);}
.investor-visual::after {inset:29%;transform:rotate(0deg);border-color:rgba(122,194,255,.37)}
.investor-node {font-size:40px;letter-spacing:4px;font-weight:600;color:#b7c8ff;text-shadow:0 0 40px rgba(133,126,255,.55)}
.investor-line {position:absolute;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(96,177,255,.7),transparent)}
.investor-line-a {transform:rotate(45deg)}.investor-line-b {transform:rotate(-45deg)}

/* On unfolded Fold & portrait tablets, stack the stage and use real document-flow cards. */
@media(max-width:1000px) {
  .site-header {height:78px}
  .header-inner {position:relative}
  .primary-nav {position:absolute;top:72px;left:0;right:0;display:none;flex-direction:column;gap:0;align-items:stretch;padding:9px;background:#0b1929f5;border:1px solid #466e9a88;border-radius:14px;z-index:80;}
  .primary-nav.open {display:flex}.primary-nav a {padding:12px 14px;font-size:14px}
  .nav-cta {display:none}.mobile-toggle {display:flex}
  .hero,.hero-inner {min-height:0;height:auto}
  .hero-inner {display:flex;flex-direction:column;align-items:stretch;padding-top:91px;padding-bottom:42px}
  .hero-copy {padding:0;width:100%;max-width:690px}
  .hero h1 {font-size:clamp(40px,6.5vw,66px)}
  .hero-visual { position:relative; width:100%; height:auto; top:auto;left:auto;transform:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:12px;margin-top:25px; }
  .hero-visual .scene-stage {position:relative;grid-column:1/-1;inset:auto;height:470px;width:100%; }
  .hero-visual .orbit-product {position:relative;top:auto;right:auto;bottom:auto;left:auto;transform:none;width:auto;min-width:0;height:100%;min-height:104px;display:flex;border-radius:13px;}
  .hero-visual .product-eye,.hero-visual .product-platform,.hero-visual .product-ago,.hero-visual .product-play {top:auto;right:auto;bottom:auto;left:auto;transform:none;width:auto}
  .hero-visual .orbit-product-body {min-width:0}
  .hero-visual .cube-wrap {top:46%}
  .products-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .investor-layout {grid-template-columns:230px 1fr;gap:4%}
}
@media(max-width:600px) {
  :root {--cube-edge: 188px;}
  .hero-inner {padding-top:68px;padding-bottom:40px;}
  .hero h1 {font-size:clamp(35px,9.2vw,52px);letter-spacing:-1.5px;line-height:1.12}
  .hero .eyebrow {font-size:10px;letter-spacing:1.5px}
  .hero-description {font-size:14px;line-height:1.65}
  .hero-buttons {flex-wrap:wrap}
  .hero-visual {margin-top:11px;gap:9px;}
  .hero-visual .scene-stage {height: min(98vw,388px);min-height:310px;}
  .hero-visual .cube-wrap {top:44%;}
  .scene-stage .cosmos-svg {height:100%;width:100%}
  .hero-visual .orbit-product {padding:11px 9px;gap:8px;min-height:100px;align-items:center;}
  .hero-visual .orbit-product-icon {width:25px;flex:0 0 25px}
  .hero-visual .orbit-product-icon .ico {width:25px;height:25px}
  .hero-visual .orbit-product-body {gap:3px}
  .hero-visual .orbit-product-body strong {font-size:12.5px;line-height:1.2;}
  .hero-visual .orbit-product-body small {font-size:10.5px;line-height:1.3;}
  .hero-visual .orbit-product-body>span {font-size:9px;line-height:1.3;}
  .face-inner .cube-logo {width:45px;height:55px}
  .face-inner .cube-wordmark {font-size:21px}
  .cube-caption {font-size:5.5px;letter-spacing:2px}
  .investor-section {padding:67px 0}
  .investor-layout {grid-template-columns:1fr;gap:25px}
  .investor-visual {width:190px}
  .investor-content h2 {font-size:35px}
  .products-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:380px) {
  :root {--cube-edge: 166px;}
  .hero-visual .scene-stage {height:316px}
  .hero-visual .orbit-product {padding:8px 7px;gap:6px}
  .hero-visual .orbit-product-icon {width:21px;flex-basis:21px}
  .hero-visual .orbit-product-icon .ico {width:21px;height:21px}
  .hero-visual .orbit-product-body strong {font-size:11.5px}
  .hero-visual .orbit-product-body small {font-size:9px}
  .hero-visual .orbit-product-body>span {font-size:8.5px}
  .hero .hero-buttons .btn {min-width:0;font-size:11px}
  .cube-caption {display:none}
}
@media(prefers-reduced-motion:reduce) {
  .hero-visual .cube-wrap, .cube-3d {animation:none!important;}
}
/* Keep orbit product controls clear of decorative section navigation. */
.hero .side-rail { display: none; }
@media(min-width:1001px) {
  .hero-visual .product-platform { top:60px; }
  .hero-visual .product-play { right:2%;top:275px; }
}
/* Fold unfolded and portrait tablets: use both halves of the viewport. */
@media(min-width:701px) and (max-width:1000px) {
  :root { --cube-edge: clamp(176px,21vw,214px); }
  .hero-inner { display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%); align-items:center;min-height:760px;padding-top:22px;padding-bottom:35px; }
  .hero-copy {max-width:none}
  .hero-copy .eyebrow {letter-spacing:1.4px;font-size:10px}
  .hero h1 {font-size:clamp(38px,5.3vw,57px);line-height:1.13}
  .hero-description {font-size:14px;max-width:330px}
  .hero-buttons {gap:9px}
  .hero-buttons .btn {font-size:12px;padding-inline:14px;min-width:0!important}
  .hero-metrics {width:100%}
  .hero-metrics .metric {min-width:0;padding-right:8px;margin-right:8px}
  .hero-metrics .metric span {font-size:10px;white-space:normal}
  .hero-visual {margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .hero-visual .scene-stage {height:430px}
  .hero-visual .cube-wrap {top:49%}
  .hero-visual .orbit-product {min-height:96px;padding:10px;gap:7px}
  .hero-visual .orbit-product-icon {width:24px;flex-basis:24px}
  .hero-visual .orbit-product-icon .ico {width:24px;height:24px}
  .hero-visual .orbit-product-body strong {font-size:12px}
  .hero-visual .orbit-product-body small {font-size:10px}
  .hero-visual .orbit-product-body>span {font-size:9px}
}