/* KREVIXA v2.0 — reference-specific desktop and mobile experience.
   Page and cards are genuine interactive HTML, not a full screenshot. */
:root{--bg:#030313;--ink:#f8f6ff;--muted:#c1bce0;--purple:#ae16ff;--violet:#a54cff}
html{background:#050316;overflow-x:hidden}body{background:#030313;color:#f5f1ff;overflow-x:hidden}
.shell{display:block!important;min-height:100vh!important;background:#030313}
.main-area{width:100%!important;max-width:none!important;min-width:0!important;margin-left:0!important;overflow:visible!important;transition:margin-left .31s cubic-bezier(.22,.8,.24,1),width .31s cubic-bezier(.22,.8,.24,1)!important;position:relative}
.main-area main{max-width:none!important;width:100%!important}
.topbar{position:relative!important;z-index:22!important;display:flex!important;align-items:center!important;justify-content:space-between!important;height:80px!important;padding:0 clamp(20px,5.7vw,112px)!important;gap:clamp(12px,2.6vw,40px)!important;background:linear-gradient(90deg,#030310ee,#04031edd,#070320ef)!important;border:0!important;box-shadow:none!important;overflow:visible!important;white-space:nowrap}
.desktop-brand,.header-mobile-brand{display:flex;align-items:center;gap:8px;color:#fff;font-size:22px;font-weight:900;letter-spacing:.3px;flex:0 0 auto}
.desktop-brand img,.header-mobile-brand img{width:43px;height:43px;object-fit:contain;filter:drop-shadow(0 0 10px #7a27ff)}
.topbar>.crumb{display:none!important}
.top-nav-shortcuts{display:flex!important;align-items:center!important;justify-content:center!important;flex:1!important;min-width:0!important;gap:clamp(6px,1.7vw,28px)!important;white-space:nowrap}
.top-nav-shortcuts button{border:0!important;background:transparent!important;color:#e8e5ff!important;padding:15px 2px!important;font-size:clamp(11px,.95vw,15px)!important;white-space:nowrap!important;transition:color .16s;min-width:0}
.top-nav-shortcuts button:first-child{color:#fff!important;font-weight:850!important;text-shadow:0 0 12px #a743ff}
.top-nav-shortcuts button:hover{color:#d99aff!important}
.top-actions{display:flex!important;align-items:center!important;gap:12px!important;flex:0 0 auto!important}
.top-actions .preview-label,.top-actions #installApp,.top-actions #authNavButton{display:none!important}
.top-actions #topUpgrade{display:block!important;padding:12px 22px!important;background:linear-gradient(100deg,#ac14ec,#345bff)!important;color:#fff!important;box-shadow:0 0 25px #712aff7a!important;border-radius:12px!important;border:1px solid #b66cff50!important;font-size:13px!important}
.top-actions .avatar{width:44px!important;height:44px!important;border:1px solid #9b69e4!important;background:#0d0b2b!important;box-shadow:0 0 18px #9951ff35;color:#fff!important;font-size:18px!important}
.header-mobile-brand{display:none!important}
.sidebar-edge-trigger{position:fixed;z-index:96;left:0;top:19%;width:22px;height:82px;display:flex;align-items:center;justify-content:center;background:#070414d0;color:#bfa2ff;border:1px solid #713bb3;border-left:0;border-radius:0 12px 12px 0;box-shadow:0 0 11px #7525ef53;font-size:20px;cursor:pointer;transition:transform .3s,opacity .3s,background .2s}
.sidebar-edge-trigger:hover,.sidebar-edge-trigger:focus-visible{background:#4b178d;color:white;outline:2px solid #a663ff}
/* Desktop: sidebar exists only on hover; closing never obscures or shrinks the page. */
@media(min-width:901px){
 .sidebar{position:fixed!important;top:0!important;left:0!important;width:260px!important;min-width:260px!important;max-width:260px!important;height:100dvh!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;display:flex!important;transform:translateX(-105%)!important;transition:transform .31s cubic-bezier(.22,.8,.24,1)!important;padding:22px 16px!important;background:linear-gradient(180deg,#14092c,#09051c 77%,#100627)!important;z-index:95!important;box-shadow:13px 0 35px #13003d4a!important;border-right:1px solid #aa5cff6d!important}
 .sidebar .brand{display:flex!important;gap:7px!important;width:100%!important;height:auto!important;margin:0 0 20px!important;white-space:nowrap!important;padding:0 4px!important}
 .sidebar .brand img{height:37px!important;width:37px!important}.sidebar .brand span{font-size:21px!important;opacity:1!important;display:block!important}
 .sidebar .nav-caption{font-size:10px!important;height:auto!important;padding:0 9px!important;margin:0 0 8px!important;letter-spacing:1.5px!important}
 .sidebar .side-nav{display:flex!important;flex-direction:column!important;gap:4px!important;width:100%!important;overflow:visible!important;padding:0!important}
 .sidebar .side-nav .nav-link{width:100%!important;display:flex!important;font-size:12px!important;min-height:42px!important;flex:0 0 auto!important;gap:9px!important;white-space:normal!important;padding:9px 10px!important;border:0!important;overflow:visible!important}
 .sidebar .side-nav .nav-link .ni{font-size:19px!important;flex:0 0 26px!important}.sidebar .side-nav .new{display:inline-block!important;font-size:8px!important}
 .sidebar .sidebar-bottom{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;margin-top:auto}.sidebar-offer{padding:12px!important}.sidebar-offer p{font-size:10px!important}
 .sidebar .mobile-nav-close,.mobile-nav-backdrop{display:none!important}
 body.desktop-drawer-open .sidebar{transform:translateX(0)!important}
 body.desktop-drawer-open .main-area{margin-left:260px!important;width:calc(100% - 260px)!important}
 body.desktop-drawer-open .sidebar-edge-trigger{opacity:0!important;pointer-events:none!important;transform:translateX(260px)!important}
}
/* Use a wide, full-bleed cinematic hero: text and buttons remain real elements. */
#homePage.page{padding:0 clamp(18px,4.9vw,84px) 60px!important;position:relative;overflow:visible!important}
#homePage .neon-hero{display:block!important;position:relative!important;min-height:450px!important;margin:0 calc(-1 * clamp(18px,4.9vw,84px)) 0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#040315!important;overflow:hidden!important}
#homePage .hero-motion{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;background:radial-gradient(ellipse at 76% 30%,#280c67 0%,#080322 56%,#02030f)!important;z-index:0!important}
#homePage .hero-video{position:absolute!important;left:auto!important;right:0!important;top:0!important;bottom:0!important;width:63%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:saturate(1.22) contrast(1.12)!important}
#homePage .hero-motion-shade{position:absolute!important;inset:0!important;background:linear-gradient(90deg,#040311 0%,#030213 14%,#050317f0 32%,#05031693 48%,transparent 74%),linear-gradient(0deg,#050315 0%,transparent 14%)!important}
#homePage .hero-motion-orb{position:absolute!important;left:64%!important;top:5%!important;width:30%!important;height:70%!important;mix-blend-mode:screen!important;pointer-events:none!important}
#homePage .hero-intro{position:relative!important;z-index:2!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-height:450px!important;max-width:740px!important;width:61%!important;margin:0!important;padding:42px 0 28px clamp(28px,7.1vw,122px)!important;background:none!important}
#homePage .hero-intro .eyebrow{font-size:12px!important;letter-spacing:4px!important;color:#ba54ff!important;margin:0 0 15px!important}
#homePage .hero-intro h1{font-family:'Manrope','DM Sans',sans-serif!important;font-weight:900!important;font-size:clamp(44px,4.25vw,75px)!important;line-height:1.02!important;letter-spacing:-3.5px!important;color:#fff!important;margin:0 0 19px!important;overflow-wrap:normal!important;white-space:normal!important;text-shadow:0 3px 25px #01020f!important}
#homePage .hero-intro h1 em{font-style:normal!important;background:linear-gradient(95deg,#e1b2ff 2%,#ad64ff 45%,#ac10ef 100%)!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important}
#homePage .hero-intro>p:not(.eyebrow){font-size:clamp(13px,1.25vw,19px)!important;max-width:535px!important;line-height:1.6!important;color:#c6c7df!important;margin:0 0 25px!important}
#homePage .hero-buttons{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
#homePage .hero-buttons .primary{font-size:15px!important;padding:16px 26px!important;background:linear-gradient(95deg,#bd12ff,#326bff)!important;box-shadow:0 0 24px #931bff9e!important;border-radius:12px!important}
#homePage .hero-buttons .secondary{font-size:15px!important;padding:16px 22px!important;border:1px solid #74519cb4!important;border-radius:12px!important;color:#fff!important;background:#07071ba8!important}
#homePage .hero-caveat{font-size:10px!important;color:#bcb2df!important;margin:18px 0 0!important;letter-spacing:.2px!important}
#homePage .hero-photo,#homePage .hero-abilities{display:none!important}
#homePage .neon-features{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:13px!important;margin:0 0 24px!important;position:relative!important;z-index:2!important;align-items:stretch!important}
#homePage .neon-feature{border:1px solid #7c48cba8!important;background:linear-gradient(145deg,#141038dc,#09061b)!important;box-shadow:0 9px 22px #09051a7a,inset 0 0 14px #7021ce18!important;border-radius:16px!important;min-width:0!important;min-height:184px!important;display:flex!important;flex-direction:row!important;position:relative!important;padding:16px!important;overflow:hidden!important;isolation:isolate!important;transform:none}
#homePage .neon-feature>div{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;position:relative!important;z-index:2!important;min-width:0!important;width:66%!important}
#homePage .neon-feature .feature-icon{font-size:21px!important;color:#d9baff!important;border:1px solid #7f4ed4!important;background:#261251!important;border-radius:9px!important;display:grid!important;place-items:center!important;width:37px!important;height:37px!important;margin-bottom:9px!important}
#homePage .neon-feature h3{font-size:17px!important;font-weight:850!important;color:#fff!important;margin:0 0 7px!important;line-height:1.16!important}
#homePage .neon-feature p{font-size:11px!important;color:#c4bce2!important;line-height:1.5!important;margin:0 0 auto!important;max-width:230px!important}
#homePage .neon-feature button{font-size:10px!important;background:#0c0b2abf!important;color:#fff!important;border:1px solid #6c65bb80!important;border-radius:8px!important;padding:9px 10px!important;margin-top:11px!important;min-width:0!important;white-space:nowrap!important}
#homePage .neon-feature img{position:absolute!important;z-index:1!important;right:0!important;top:0!important;height:100%!important;width:53%!important;object-fit:cover!important;object-position:center!important;opacity:.99!important;mask-image:linear-gradient(90deg,transparent,black 35%)!important}
#homePage .neon-feature::after{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#0d092b 0%,transparent 84%);pointer-events:none}
#homePage .neon-section-head{margin:8px 0 15px!important;align-items:end!important}
#homePage .neon-section-head h2{font-size:29px!important;color:#fff!important;letter-spacing:-.9px!important}
#homePage .neon-section-head .eyebrow{font-size:11px!important;color:#b747f8!important;letter-spacing:2.8px!important}
#homePage .neon-section-head p{font-size:12px!important;color:#c5c1e0!important;margin-top:6px!important}
#homePage .neon-categories{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:11px!important}
#homePage .category-card{height:168px!important;overflow:hidden!important;border-radius:12px!important;border:1px solid #8249d8b9!important;position:relative!important;box-shadow:none!important}
#homePage .category-card img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important}
#homePage .category-card .tag{position:absolute!important;top:9px!important;left:9px!important;font-size:10px!important;z-index:3!important}
#homePage .category-card .cat-bottom{display:none!important}
#homePage .section-head .quiet-btn{border:1px solid #7c44bd!important;background:#08051c!important;color:#e2c7ff!important}
#homePage .neon-bottom-banner{margin-top:18px!important}
/* smaller notebooks still get one row of cards with balanced text */
@media(min-width:901px) and (max-width:1260px){
 .topbar{padding:0 3%!important}.top-nav-shortcuts{gap:10px!important}
 #homePage .hero-intro{padding-left:6%!important;width:62%!important}
 #homePage .hero-intro h1{font-size:clamp(36px,4.4vw,56px)!important}
 #homePage .neon-features{gap:8px!important}
 #homePage .neon-feature{padding:12px!important;min-height:180px!important}
 #homePage .neon-feature h3{font-size:13px!important}
 #homePage .neon-feature p{font-size:10px!important}
 #homePage .neon-feature>div{width:72%!important}
 #homePage .neon-feature img{width:53%!important}
}
/* tablet/mobile maintains natural full-width content; drawer is manual */
@media(max-width:900px){
 .sidebar-edge-trigger{display:none!important}
 .topbar{height:66px!important;padding:0 14px!important;display:flex!important;gap:8px!important;position:relative!important}
 .desktop-brand,.top-nav-shortcuts{display:none!important}
 .header-mobile-brand{display:flex!important;gap:4px!important;font-size:18px!important;min-width:0!important;margin:0 auto 0 0!important}
 .header-mobile-brand img{width:34px!important;height:34px!important}
 .topbar .mobile-menu-toggle{position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;width:42px!important;min-width:42px!important;height:42px!important;order:-1!important;flex:0 0 42px!important;grid-row:auto!important;grid-column:auto!important;margin:0 6px 0 0!important;border-radius:12px!important}
 .topbar .top-actions{display:flex!important;flex:0 0 auto!important;width:auto!important;margin-left:auto!important}
 .top-actions .avatar{width:37px!important;height:37px!important;font-size:15px!important}
 .top-actions #topUpgrade{display:none!important}
 #homePage.page{padding:0 12px 42px!important}
 #homePage .neon-hero{margin:0 -12px!important;min-height:610px!important}
 #homePage .hero-motion{background:#08031b!important}
 #homePage .hero-video-wide{display:none!important}
 #homePage .hero-video-portrait{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 25%!important}
 #homePage .hero-motion-shade{background:linear-gradient(0deg,#050216 4%,#080421dd 38%,#07041e78 73%,#070419a8 100%)!important}
 #homePage .hero-intro{padding:235px 21px 32px!important;justify-content:flex-end!important;min-height:610px!important;width:100%!important;max-width:none!important}
 #homePage .hero-intro h1{font-size:clamp(34px,9vw,54px)!important;letter-spacing:-1.8px!important}
 #homePage .hero-intro .eyebrow{font-size:10px!important;letter-spacing:2.4px!important}
 #homePage .hero-intro>p:not(.eyebrow){font-size:14px!important}
 #homePage .hero-buttons{width:100%!important;display:flex!important;gap:9px!important}
 #homePage .hero-buttons>button{flex:1 1 100%!important;max-width:none!important;text-align:center!important}
 #homePage .neon-features{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:10px!important}
 #homePage .neon-feature{min-height:205px!important;flex-direction:column!important}
 #homePage .neon-feature>div{width:100%!important;max-width:100%!important}
 #homePage .neon-feature img{top:0!important;right:0!important;width:60%!important;height:62%!important;opacity:.64!important}
 #homePage .neon-feature h3{font-size:14px!important}
 #homePage .neon-feature p{font-size:10px!important;max-width:85%!important}
 #homePage .neon-feature button{position:relative!important;font-size:10px!important;margin-top:16px!important}
 #homePage .neon-section-head h2{font-size:25px!important}
 #homePage .neon-categories{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 #homePage .category-card{height:165px!important}
}
@media(max-width:380px){#homePage .neon-feature{min-height:220px!important;padding:10px!important}#homePage .neon-feature p{max-width:100%!important}#homePage .neon-feature img{opacity:.3!important}#homePage .hero-intro h1{font-size:34px!important}}
@media(prefers-reduced-motion:reduce){.sidebar,.main-area,.sidebar-edge-trigger{transition:none!important}}

/* v2.0 polishing after visual checks: full bottle cap and readable mobile copy. */
@media(min-width:901px){
 #homePage .hero-video-wide{object-fit:fill!important}
 #homePage .neon-feature::after{background:linear-gradient(90deg,#0c0829 0%,#0c0829ed 36%,#0c082995 62%,transparent 91%)!important}
}
@media(max-width:900px){
 #homePage .hero-video-portrait{height:68%!important;top:0!important;bottom:auto!important;object-fit:cover!important;object-position:center top!important;mask-image:linear-gradient(#000 0%,#000 65%,transparent 100%)!important}
 #homePage .hero-motion-shade{background:linear-gradient(0deg,#050316 2%,#07031bf5 47%,#07031b8f 64%,#08041e5f 100%)!important}
 #homePage .hero-intro{padding-top:260px!important}
 #homePage .neon-feature::after{background:linear-gradient(90deg,#0b0926 0%,#0b0926ec 47%,#0b092669 76%,transparent)!important}
 #homePage .neon-feature img{opacity:.38!important}
 #homePage .neon-feature>div{z-index:3!important}
}