:root { --ink:#eff3f1; --muted:#9ba5a1; --line:rgba(255,255,255,.1); --panel:#242726; --blue:#159df0; --green:#3de07c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#181a19; }
body { min-width:320px; margin:0; background:radial-gradient(65% 45% at 77% 6%, rgba(21,157,240,.13), transparent 68%), #1d201f; color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.nav { width:min(1230px, calc(100% - 48px)); height:80px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; letter-spacing:.04em; }.brand strong { display:inline-block; font-family:"Avenir Next", "Futura", "Century Gothic", sans-serif; font-size:23px; font-weight:300; letter-spacing:.23em; line-height:1; transform:scaleY(.89); transform-origin:left center; }.brand i { width:1px; height:22px; background:#66706d; }.brand span { color:#9ea8a4; font-size:10px; font-weight:700; letter-spacing:.33em; }
.nav-links { display:flex; align-items:center; gap:24px; color:#aab4b0; font-size:12px; }.nav-links a:hover { color:white; }.nav-open { padding:9px 11px; border:1px solid rgba(21,157,240,.42); border-radius:5px; background:rgba(21,157,240,.11); color:#b2e0fa; }.nav-open b { margin-left:8px; color:#65cbff; }
.hero { width:min(1230px, calc(100% - 48px)); min-height:605px; margin:auto; display:grid; grid-template-columns: .92fr 1.08fr; gap:52px; align-items:center; padding:72px 0 68px; }.eyebrow { margin:0; color:#8d9894; font-size:10px; font-weight:700; letter-spacing:.14em; }.eyebrow i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(61,224,124,.6); }.hero h1 { margin:14px 0 20px; font-size:clamp(47px, 5.1vw, 75px); line-height:.96; letter-spacing:-.065em; }.hero h1 em { color:#91d9ff; font-style:normal; }.lead { max-width:505px; color:#b0bbb7; font-size:17px; line-height:1.55; }.hero-actions { display:flex; gap:10px; margin-top:30px; }.button { display:inline-flex; align-items:center; gap:20px; padding:13px 16px; border:1px solid var(--line); border-radius:6px; font-size:12px; font-weight:700; }.button.primary { color:white; background:#158fda; border-color:#21a8f7; box-shadow:0 9px 26px rgba(10,133,207,.2); }.button.primary span { font-size:18px; line-height:10px; }.button.secondary { color:#b9c4c0; background:#272b2a; }.proof { display:flex; flex-wrap:wrap; gap:15px; margin-top:34px; color:#7f8985; font-size:10px; }.proof span { padding-right:15px; border-right:1px solid var(--line); }.proof b { color:#dbe5e1; font-size:10px; letter-spacing:.07em; }
.hero-visual { position:relative; padding:15px 0 0 14px; }.hero-visual::before { position:absolute; inset:0 12px 25px 0; z-index:0; content:""; border:1px solid rgba(21,157,240,.2); border-radius:11px; background:linear-gradient(145deg, rgba(21,157,240,.08), transparent 48%); }.hero-visual img { position:relative; z-index:1; width:100%; display:block; border:1px solid rgba(255,255,255,.16); border-radius:8px; box-shadow:0 26px 60px rgba(0,0,0,.35); }.signal-chip { position:absolute; z-index:2; top:-2px; left:29px; padding:7px 9px; border:1px solid rgba(61,224,124,.36); border-radius:4px; color:#b5e9ca; background:#1e3028; font:9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.06em; }.signal-chip span { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--green); }.visual-caption { position:absolute; z-index:2; right:25px; bottom:10px; display:flex; gap:9px; align-items:center; padding:9px 10px; border:1px solid var(--line); border-radius:4px; background:rgba(22,25,24,.87); color:#8e9995; font:9px ui-monospace, SFMono-Regular, Menlo, monospace; }.visual-caption b { color:#e7eeeb; }.visual-caption i { color:#64ccff; font-size:14px; font-style:normal; }
.feature-band { display:grid; grid-template-columns:repeat(3, 1fr); width:min(1230px, calc(100% - 48px)); margin:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.feature-band article { min-height:225px; padding:30px 33px 30px 0; margin-right:28px; border-right:1px solid var(--line); }.feature-band article:last-child { border:0; margin:0; }.number { color:#55c5f9; font:11px ui-monospace, SFMono-Regular, Menlo, monospace; }.feature-band h2 { margin:15px 0 10px; font-size:19px; letter-spacing:-.035em; }.feature-band p { margin:0; color:#98a39e; font-size:13px; line-height:1.55; }
.workflow { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; width:min(1060px, calc(100% - 48px)); margin:0 auto; padding:110px 0; }.workflow h2 { margin:10px 0 0; font-size:46px; line-height:.98; letter-spacing:-.06em; }.workflow ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }.workflow li { display:grid; grid-template-columns:55px 1fr; gap:18px; padding:24px 0; border-bottom:1px solid var(--line); }.workflow li > span { color:#55c5f9; font:11px ui-monospace, SFMono-Regular, Menlo, monospace; }.workflow h3 { margin:0 0 7px; font-size:17px; }.workflow p { max-width:430px; margin:0; color:#969f9b; font-size:13px; line-height:1.5; }
.cta { width:min(1230px, calc(100% - 48px)); margin:0 auto 48px; display:flex; justify-content:space-between; align-items:center; gap:35px; padding:44px; border:1px solid rgba(21,157,240,.25); border-radius:10px; background:linear-gradient(105deg, rgba(21,157,240,.14), rgba(33,36,35,.92) 52%); }.cta h2 { margin:8px 0; font-size:31px; letter-spacing:-.05em; }.cta p:not(.eyebrow) { max-width:570px; margin:0; color:#9fa9a5; font-size:13px; line-height:1.5; }
footer { display:flex; justify-content:space-between; width:min(1230px, calc(100% - 48px)); margin:auto; padding:18px 0 30px; border-top:1px solid var(--line); color:#6f7975; font-size:10px; }

/* Deeper, high-contrast treatment shared with the KURU product family. */
:root { --ink:#f3f6f7; --muted:#9aa7ae; --line:rgba(168,202,237,.15); --panel:#0c111a; --blue:#086cff; --green:#35df87; }
html { background:#03050a; }
body { background:radial-gradient(74% 52% at 83% -8%, rgba(0,82,224,.25), transparent 62%), radial-gradient(42% 36% at 8% 38%, rgba(5,37,90,.17), transparent 74%), #05070d; }
.brand i { background:#506071; }.brand span { color:#a8b8c5; }
.nav-links { color:#aab8c3; }.nav-links a:hover { color:#fff; }.nav-open { border-color:rgba(45,128,255,.72); background:rgba(0,75,220,.26); color:#d4eaff; box-shadow:inset 0 0 20px rgba(0,92,255,.12), 0 0 20px rgba(0,82,230,.13); }.nav-open b { color:#63b6ff; }
.eyebrow { color:#8fa1b0; }.eyebrow i { box-shadow:0 0 13px rgba(53,223,135,.8); }.hero h1 em { color:#74bdff; }.lead { color:#b6c2cc; }
.button.primary { background:linear-gradient(135deg, #005adf, #087cff); border-color:#2f93ff; box-shadow:0 12px 32px rgba(0,75,230,.38), inset 0 1px 0 rgba(255,255,255,.16); }.button.secondary { color:#c1cdda; background:#0d131d; border-color:rgba(139,184,236,.24); }
.proof { color:#7f8d98; }.proof b { color:#e3edf3; }
.hero-visual::before { border-color:rgba(38,125,255,.5); background:linear-gradient(145deg, rgba(0,77,235,.22), rgba(4,10,25,.1) 48%, transparent); box-shadow:0 0 48px rgba(0,74,231,.12); }.hero-visual img { border-color:rgba(147,198,255,.3); box-shadow:0 30px 72px rgba(0,0,0,.62); filter:contrast(1.09) saturate(1.15); }
.signal-chip { border-color:rgba(53,223,135,.52); color:#c5f4d7; background:#08291f; }.visual-caption { border-color:rgba(96,157,237,.28); background:rgba(4,8,14,.92); color:#9bacbb; }.visual-caption b { color:#ecf5fb; }.visual-caption i { color:#50aeff; }
.number, .workflow li > span { color:#5eb7ff; }.feature-band p { color:#9baab5; }.workflow p { color:#a0adba; }
.cta { border-color:rgba(40,132,255,.5); background:linear-gradient(105deg, rgba(0,78,230,.34), rgba(5,11,22,.96) 55%); box-shadow:inset 0 1px 0 rgba(117,179,255,.12), 0 22px 55px rgba(0,0,0,.25); }.cta p:not(.eyebrow) { color:#adbac5; } footer { color:#718190; }
@media (max-width:760px) { .nav { width:calc(100% - 30px); height:68px; }.nav-links > a:not(.nav-open) { display:none; }.hero { width:calc(100% - 30px); grid-template-columns:1fr; gap:34px; padding:57px 0; }.hero h1 { font-size:52px; }.hero-visual { max-width:620px; }.feature-band { width:calc(100% - 30px); grid-template-columns:1fr; }.feature-band article { min-height:0; padding:26px 0; margin:0; border-right:0; border-bottom:1px solid var(--line); }.feature-band article:last-child { border-bottom:0; }.workflow { width:calc(100% - 30px); grid-template-columns:1fr; gap:35px; padding:70px 0; }.workflow h2 { font-size:41px; }.cta { width:calc(100% - 30px); display:block; padding:30px; }.cta .button { margin-top:25px; } footer { width:calc(100% - 30px); } }

/* The live desk itself is the KIDE hero: copy sits in the scene's dark left field. */
.hero { position:relative; display:flex; align-items:center; min-height:650px; margin-top:22px; padding:58px 62px; overflow:hidden; border:1px solid rgba(89,153,240,.28); border-radius:16px; background:#050810; box-shadow:0 26px 72px rgba(0,0,0,.36); }
.hero::before { position:absolute; z-index:1; inset:0; content:""; pointer-events:none; background:linear-gradient(90deg, rgba(3,6,12,.97) 0%, rgba(3,6,12,.89) 36%, rgba(3,6,12,.37) 63%, rgba(3,6,12,.05) 100%); }
.hero-copy { position:relative; z-index:2; max-width:560px; }
.hero-visual { position:absolute; z-index:0; inset:0; max-width:none; padding:0; }
.hero-visual::before { display:none; }
.hero-visual img { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; object-fit:cover; object-position:center; filter:contrast(1.07) saturate(1.08); }
.signal-chip { top:22px; right:26px; left:auto; }
.visual-caption { right:26px; bottom:22px; }
@media (max-width:760px) { .hero { display:block; min-height:610px; padding:302px 28px 36px; }.hero::before { background:linear-gradient(180deg, rgba(3,6,12,.04) 0%, rgba(3,6,12,.34) 40%, rgba(3,6,12,.97) 70%); }.hero-copy { max-width:none; }.hero-visual { display:block; } .hero h1 { font-size:48px; } }