/* ============================================================================ AIDOOH landing kit — shared chrome for every 3D concept. Rules baked in: the 3D object is the hero, one headline, ONE sign-up button, no prices, no deep detail. Dark pages set data-mode="dark" on . ========================================================================== */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{overflow:hidden;color:#101521; font:400 15px/1.55 ui-sans-serif,system-ui,-apple-system,sans-serif} body[data-mode="dark"]{color:#fff;background:#05070c} canvas#gl{position:fixed;inset:0;display:block} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .ui{position:fixed;inset:0;z-index:5;pointer-events:none;display:flex;flex-direction:column} .ui > *{pointer-events:auto} /* ---------------------------------------------------------------- nav ---- */ .nav{height:76px;flex:none;display:flex;align-items:center;gap:12px;padding:0 34px} .brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:15.5px;letter-spacing:-.01em} .mark{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:10.5px; font-weight:800;color:#fff;background:linear-gradient(140deg,#FF7A3D,#FF5C8A); box-shadow:0 8px 20px -8px rgba(255,92,138,.8)} .links{display:flex;gap:26px;margin-left:40px} .links a{text-decoration:none;font-size:13.5px;font-weight:500;color:#5c6577} .links a:hover{color:#101521} body[data-mode="dark"] .links a{color:#aeb8cd} body[data-mode="dark"] .links a:hover{color:#fff} .sp{flex:1} .pill{font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:10px 20px;border-radius:999px; border:1px solid rgba(16,21,33,.15);background:rgba(255,255,255,.78);color:#101521; backdrop-filter:blur(12px);transition:.16s} .pill:hover{background:#fff} .pill.dark{background:#101521;color:#fff;border-color:#101521;box-shadow:0 14px 30px -14px rgba(16,21,33,.85)} .pill.dark:hover{background:#28324a} .pill.lg{padding:15px 28px;font-size:14.5px} body[data-mode="dark"] .pill{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)} body[data-mode="dark"] .pill:hover{background:rgba(255,255,255,.15)} body[data-mode="dark"] .pill.dark{background:linear-gradient(140deg,#FF7A3D,#FFA24E);color:#1a0d05; border-color:transparent;box-shadow:0 14px 36px -12px rgba(255,122,61,1)} body[data-mode="dark"] .pill.dark:hover{filter:brightness(1.08)} /* ------------------------------------------------------------- message --- */ .stage{flex:1;display:flex;padding:0 34px;pointer-events:none} .stage > *{pointer-events:auto} .stage.mid{align-items:center} .stage.top{align-items:flex-start;padding-top:min(4vh,30px)} .stage.centre{justify-content:center;text-align:center} .copy{width:min(44vw,520px)} .stage.centre .copy{width:min(74vw,900px)} .kick{font-size:11px;letter-spacing:.2em;font-weight:650;color:#7b8596} body[data-mode="dark"] .kick{color:#FFA76E} h1{margin-top:16px;font-size:clamp(36px,4.3vw,64px);line-height:1.0;letter-spacing:-.045em;font-weight:750} .stage.centre h1{font-size:clamp(40px,5.6vw,84px);line-height:.97} h1 em{font-style:normal;color:#FF7A3D} body[data-mode="dark"] h1{text-shadow:0 10px 60px rgba(0,0,0,.9)} body[data-mode="dark"] h1 em{background:linear-gradient(100deg,#FF7A3D,#FFC46B); -webkit-background-clip:text;background-clip:text;color:transparent} h1 mark{background:linear-gradient(180deg,transparent 58%,rgba(255,122,61,.34) 58%);color:inherit;padding:0 2px} .say{margin-top:20px;font-size:15.5px;line-height:1.7;color:#525b6b;max-width:34ch} .stage.centre .say{margin-left:auto;margin-right:auto;max-width:46ch;font-size:16.5px} body[data-mode="dark"] .say{color:#c2cbdd;text-shadow:0 2px 22px #000} .go{margin-top:28px;display:flex;gap:13px;align-items:center;flex-wrap:wrap} .stage.centre .go{justify-content:center} .micro{font-size:12.5px;color:#79839a} /* ---------------------------------------------------------------- foot --- */ .strip{flex:none;display:flex;align-items:center;gap:20px;padding:18px 34px 26px} .now{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#79839a} .now .dot{width:8px;height:8px;border-radius:50%;background:#16b364; box-shadow:0 0 0 4px rgba(22,179,100,.16);animation:pulse 1.9s infinite} body[data-mode="dark"] .now{color:#93a0b7} body[data-mode="dark"] .now .dot{background:#3ddc84;box-shadow:0 0 12px #3ddc84} .now b{color:#101521;font-weight:650} body[data-mode="dark"] .now b{color:#e6ecf7} @keyframes pulse{50%{opacity:.32}} .facts{margin-left:auto;display:flex;gap:32px} .fact b{display:block;font-size:19px;font-weight:750;letter-spacing:-.02em} .fact span{font-size:10.5px;letter-spacing:.16em;color:#79839a} .bar{flex:none;margin:0 34px 26px;display:flex;align-items:center;gap:18px;padding:14px 18px; border-radius:20px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(16px);box-shadow:0 26px 60px -34px rgba(20,28,50,.6);font-size:13px;color:#3d4553} body[data-mode="dark"] .bar{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12); color:#c2cbdd;box-shadow:none} .bar b{font-weight:650;color:#101521} body[data-mode="dark"] .bar b{color:#fff} .bar .right{margin-left:auto;display:flex;align-items:center;gap:18px} .bar .lbl{font-size:10.5px;letter-spacing:.16em;color:#9aa4b8} .steps{flex:none;display:flex;align-items:center;gap:10px;padding:0 34px 28px} .step{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;font-size:13px; background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);color:#3d4553; backdrop-filter:blur(14px);box-shadow:0 18px 40px -26px rgba(23,32,56,.55)} body[data-mode="dark"] .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#c2cbdd} .step i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center; background:#101521;color:#fff;font-size:10.5px;font-weight:700} body[data-mode="dark"] .step i{background:#FF7A3D;color:#1a0d05} .arrow{color:#aeb6c6;font-size:13px} .hint{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);font-size:10.5px; letter-spacing:.2em;color:#9aa4b8;pointer-events:none} /* --------------------------------------------------- labels pinned in 3D - */ .pin{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;transition:opacity .25s; background:rgba(255,255,255,.9);border:1px solid rgba(16,21,33,.08);border-radius:12px;padding:8px 12px; backdrop-filter:blur(14px);box-shadow:0 18px 34px -20px rgba(20,28,50,.6)} .pin:after{content:'';position:absolute;left:50%;bottom:-6px;width:11px;height:11px; transform:translateX(-50%) rotate(45deg);background:rgba(255,255,255,.9); border-right:1px solid rgba(16,21,33,.08);border-bottom:1px solid rgba(16,21,33,.08)} .pin b{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:#101521} .pin span{font-size:10.5px;color:#79839a} @media(max-width:980px){.links,.facts,.bar .right,.step,.arrow{display:none}.copy{width:auto}}