*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050812;color:#f5f8ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}.page-glow{position:fixed;pointer-events:none;filter:blur(90px);opacity:.24;z-index:-1;border-radius:999px}.glow-one{width:42vw;height:42vw;background:#145dff;top:-18vw;right:-12vw}.glow-two{width:38vw;height:38vw;background:#6a2cff;top:45vh;left:-22vw}.section-shell{width:min(1180px,calc(100% - 44px));margin-inline:auto}.site-header{width:min(1240px,calc(100% - 28px));height:76px;display:flex;align-items:center;gap:34px;position:sticky;top:12px;margin:12px auto 0;padding:0 20px;border:1px solid rgba(159,191,255,.14);background:rgba(5,8,18,.72);backdrop-filter:blur(18px);border-radius:20px;z-index:30;box-shadow:0 18px 50px rgba(0,0,0,.2)}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.18em}.brand-orb,.footer-brand img{width:32px;height:32px;border-radius:50%;object-fit:cover}.desktop-nav{display:flex;gap:28px;margin-left:auto}.desktop-nav a,.footer-links a{color:#9caac6;text-decoration:none;font-size:14px;transition:.25s}.desktop-nav a:hover,.footer-links a:hover{color:#fff}.nav-cta{color:#06101c;background:#68ddff;text-decoration:none;font-size:13px;font-weight:750;padding:11px 16px;border-radius:12px}.menu-button{display:none;margin-left:auto;background:none;border:0;width:38px;height:38px;position:relative}.menu-button span{position:absolute;width:20px;height:1.5px;background:#fff;left:9px;transition:.25s}.menu-button span:first-child{top:14px}.menu-button span:last-child{top:22px}.hero{min-height:720px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px;padding:80px 0 74px}.eyebrow,.section-kicker{font-size:11px;letter-spacing:.22em;color:#6ce3ff;font-weight:800}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow span{width:22px;height:1px;background:#6ce3ff}.hero h1{font-size:clamp(52px,6vw,86px);line-height:.96;letter-spacing:-.055em;margin:22px 0 24px;max-width:760px}.hero-lead{color:#9eabc2;font-size:18px;line-height:1.7;max-width:650px}.hero-actions{display:flex;gap:12px;margin:34px 0 38px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:14px;padding:0 20px;text-decoration:none;font-weight:750;font-size:14px;border:1px solid transparent;cursor:pointer}.button.primary{background:linear-gradient(135deg,#66e0ff,#7d69ff);color:#06101a;box-shadow:0 12px 38px rgba(74,145,255,.24)}.button.secondary{border-color:rgba(167,188,255,.2);color:#e8eeff;background:rgba(255,255,255,.03)}.hero-proof{display:flex;gap:36px;flex-wrap:wrap}.hero-proof div{display:flex;flex-direction:column;gap:5px}.hero-proof strong{font-size:13px}.hero-proof span{color:#65738f;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.hero-visual{display:flex;align-items:center;justify-content:center}.orb-stage{position:relative;width:min(470px,82vw);aspect-ratio:1;display:grid;place-items:center}.hero-orb{width:72%;height:72%;object-fit:contain;position:relative;z-index:3;filter:drop-shadow(0 0 48px rgba(66,175,255,.45));animation:floatOrb 7s ease-in-out infinite}.orb-halo{position:absolute;border-radius:50%;border:1px solid rgba(87,188,255,.18)}.halo-a{inset:7%;box-shadow:inset 0 0 50px rgba(65,124,255,.08);animation:spin 18s linear infinite}.halo-b{inset:17%;border-color:rgba(176,97,255,.2);animation:spinBack 13s linear infinite}.orb-stage:after{content:"";position:absolute;width:55%;height:18%;background:rgba(39,93,255,.24);filter:blur(45px);bottom:7%;border-radius:50%}.orb-status{position:absolute;bottom:5%;z-index:4;font-size:10px;letter-spacing:.16em;color:#99a9c7;padding:10px 13px;border:1px solid rgba(128,182,255,.16);border-radius:999px;background:rgba(9,15,30,.72);backdrop-filter:blur(12px)}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5cf0b8;box-shadow:0 0 16px #5cf0b8;margin-right:8px}.statement{padding:95px 0 90px;border-top:1px solid rgba(155,181,232,.08);border-bottom:1px solid rgba(155,181,232,.08)}.statement h2,.section-heading h2,.continuity h2,.access-inner h2{font-size:clamp(36px,4.2vw,58px);line-height:1.04;letter-spacing:-.045em;margin:15px 0 22px}.statement p{font-size:21px;line-height:1.7;color:#96a5c0;max-width:900px}.device-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:100px 0}.feature-card{position:relative;min-height:610px;border:1px solid rgba(136,174,255,.13);border-radius:28px;padding:36px;background:linear-gradient(150deg,rgba(16,25,48,.88),rgba(7,11,23,.88));overflow:hidden}.feature-card:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:#226dff;filter:blur(90px);opacity:.16;top:-120px;right:-80px}.card-label{font-size:10px;letter-spacing:.22em;color:#6ce3ff;font-weight:800}.feature-card :is(h2,h3){font-size:32px;letter-spacing:-.035em;margin:15px 0 14px;max-width:460px}.feature-card p{color:#8d9ab3;line-height:1.65;max-width:500px}.availability{position:absolute;left:36px;bottom:30px;font-size:9px;letter-spacing:.16em;font-weight:800;padding:8px 10px;border-radius:999px}.availability.live{color:#67e5b8;border:1px solid rgba(103,229,184,.18);background:rgba(103,229,184,.06)}.mini-ui{position:absolute;left:10%;right:10%;bottom:82px;height:250px;border-radius:22px;border:1px solid rgba(145,182,255,.14);background:linear-gradient(145deg,#0d1429,#070b16);box-shadow:0 24px 65px rgba(0,0,0,.42);overflow:hidden}.phone-ui{left:21%;right:21%;height:300px;border-radius:34px;padding:34px 26px}.mini-orb-wrap{display:flex;justify-content:center;margin-bottom:22px}.mini-orb-wrap img{width:95px;height:95px;object-fit:contain}.mini-line{height:8px;width:66%;border-radius:99px;background:#1c2943;margin:10px auto}.mini-line.wide{width:88%}.mini-pill{width:max-content;margin:28px auto 0;padding:10px 14px;border-radius:99px;border:1px solid rgba(92,216,255,.22);font-size:9px;letter-spacing:.18em;color:#64dcff}.pc-ui{height:276px}.pc-topbar{height:35px;display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid rgba(164,188,235,.08)}.pc-topbar span{width:7px;height:7px;border-radius:50%;background:#253250}.pc-content{display:grid;grid-template-columns:72px 1fr;height:calc(100% - 35px)}.pc-rail{border-right:1px solid rgba(164,188,235,.08)}.pc-chat{padding:45px 28px}.message-chip{font-size:10px;margin-top:28px;border:1px solid rgba(94,217,255,.18);padding:12px 13px;border-radius:12px;color:#7ddfff;background:rgba(49,156,255,.05)}.capabilities{padding:105px 0}.section-heading{display:flex;justify-content:space-between;gap:70px;align-items:end;margin-bottom:52px}.section-heading>p{max-width:470px;color:#8795ae;line-height:1.65}.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(151,178,231,.12);border-left:1px solid rgba(151,178,231,.12)}.capability{min-height:260px;padding:28px;border-right:1px solid rgba(151,178,231,.12);border-bottom:1px solid rgba(151,178,231,.12);position:relative}.capability h3{margin:52px 0 12px;font-size:20px}.capability p{color:#8290aa;line-height:1.6;font-size:14px}.cap-number{font-size:10px;color:#54617a}.future{background:rgba(116,61,255,.025)}.future-tag{position:absolute;top:28px;right:28px;font-size:8px;letter-spacing:.15em;color:#9f8dff}.continuity{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:115px 0}.continuity-copy p{color:#8f9db6;line-height:1.7;font-size:17px}.flow{display:flex;align-items:center;gap:13px;margin-top:34px}.flow span{font-size:9px;letter-spacing:.16em;color:#7fdfff}.flow i{height:1px;width:35px;background:linear-gradient(90deg,#274c72,#65dcff)}.continuity-panel{border:1px solid rgba(126,172,255,.14);background:linear-gradient(145deg,rgba(14,22,43,.94),rgba(6,10,20,.96));border-radius:25px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.35)}.panel-top{font-size:9px;letter-spacing:.15em;color:#7f8eaa;margin-bottom:36px}.chat{max-width:82%;padding:14px 16px;border-radius:17px;margin:14px 0;font-size:13px;line-height:1.45}.user-chat{margin-left:auto;background:#1b2b52;color:#eaf3ff;border-bottom-right-radius:5px}.lux-chat{display:flex;align-items:center;gap:11px;background:#0b1223;border:1px solid rgba(136,180,255,.1);border-bottom-left-radius:5px}.lux-chat img{width:26px;height:26px}.panel-status{margin-top:34px;border-top:1px solid rgba(149,177,231,.1);padding-top:16px;color:#61dcb9;font-size:9px;letter-spacing:.13em}.roadmap{padding:110px 0}.roadmap-track{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid rgba(145,176,235,.14);padding-top:30px}.milestone{position:relative;padding:0 28px 0 0}.milestone:after{content:"";position:absolute;top:-34px;left:0;right:0;height:1px;background:rgba(145,176,235,.08)}.milestone-dot{position:absolute;top:-39px;left:0;width:11px;height:11px;border-radius:50%;background:#243047;border:2px solid #050812}.milestone.done .milestone-dot{background:#58e6b6;box-shadow:0 0 17px rgba(88,230,182,.65)}.milestone.next .milestone-dot{background:#61dfff;box-shadow:0 0 17px rgba(97,223,255,.65)}.milestone-state{font-size:8px;letter-spacing:.16em;color:#60708d}.milestone.done .milestone-state{color:#55dbaa}.milestone.next .milestone-state{color:#63dcff}.milestone h3{font-size:17px;margin:13px 0 9px}.milestone p{font-size:12px;line-height:1.55;color:#7f8ca4}.early-access{padding:60px 0 120px}.access-inner{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:48px;border:1px solid rgba(143,184,255,.14);border-radius:28px;background:linear-gradient(135deg,rgba(14,27,57,.8),rgba(11,10,31,.8));position:relative;overflow:hidden}.access-inner:after{content:"";position:absolute;width:350px;height:350px;border-radius:50%;background:#2d59ff;filter:blur(110px);opacity:.15;right:-90px;top:-170px}.access-inner>div{position:relative;z-index:2}.access-inner p{color:#8f9db6;line-height:1.65;max-width:700px}.access-actions{display:flex;flex-direction:column;gap:10px;align-items:center;min-width:260px}.notify-note{font-size:11px;color:#6ce3ff;min-height:16px}.site-footer{padding:0 0 36px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:25px;color:#66738d;font-size:12px}.footer-brand{font-size:13px}.footer-links{display:flex;gap:20px;justify-content:flex-end}.copyright{grid-column:1/-1;border-top:1px solid rgba(147,176,229,.08);padding-top:22px;margin-top:12px}.mobile-menu{display:none}.privacy-main{padding:110px 0}.privacy-main h1{font-size:56px;letter-spacing:-.05em}.privacy-main article{max-width:820px}.privacy-main h2{margin-top:42px}.privacy-main p,.privacy-main li{color:#95a3bb;line-height:1.75}@keyframes floatOrb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.018)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinBack{to{transform:rotate(-360deg)}}@media(max-width:900px){.desktop-nav,.nav-cta{display:none}.menu-button{display:block}.hero{grid-template-columns:1fr;padding-top:65px}.hero-copy{text-align:left}.hero-visual{margin-top:-25px}.hero-proof{gap:20px}.device-grid{grid-template-columns:1fr}.capability-grid{grid-template-columns:1fr 1fr}.continuity{grid-template-columns:1fr;gap:35px}.roadmap-track{grid-template-columns:1fr 1fr;row-gap:46px}.section-heading{display:block}.section-heading>p{margin-top:20px}.access-inner{display:block}.access-actions{align-items:flex-start;margin-top:26px}.site-footer{grid-template-columns:1fr}.footer-links{justify-content:flex-start}.mobile-menu{position:fixed;z-index:29;inset:0;background:rgba(4,7,15,.96);backdrop-filter:blur(18px);padding:120px 28px 28px;display:flex;flex-direction:column;gap:28px;transform:translateY(-105%);transition:.35s}.mobile-menu.open{transform:translateY(0)}.mobile-menu a{color:white;text-decoration:none;font-size:28px;font-weight:700;letter-spacing:-.03em}}@media(max-width:620px){.section-shell{width:min(100% - 28px,1180px)}.site-header{height:66px}.hero{min-height:auto;padding:70px 0}.hero h1{font-size:49px}.hero-lead{font-size:16px}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.hero-proof{display:grid;grid-template-columns:1fr 1fr}.orb-stage{width:100%}.device-grid{padding:70px 0}.feature-card{min-height:570px;padding:28px}.phone-ui{left:15%;right:15%}.availability{left:28px}.capabilities,.roadmap{padding:78px 0}.capability-grid{grid-template-columns:1fr}.continuity{padding:80px 0}.roadmap-track{grid-template-columns:1fr}.milestone{padding-bottom:12px}.access-inner{padding:30px 24px}.access-actions{min-width:0}.access-actions .button{width:100%}.site-footer{padding-bottom:25px}.privacy-main h1{font-size:44px}}
/* =========================================================
LUX WEBSITE v0.2 — PREMIUM PASS
========================================================= */
body{
background:
radial-gradient(circle at 76% 29%, rgba(31,92,220,.19), transparent 31%),
radial-gradient(circle at 16% 86%, rgba(93,39,190,.18), transparent 31%),
#050812;
}
.site-header{
height:74px;
top:14px;
padding:0 22px;
border-color:rgba(131,174,255,.12);
background:rgba(4,8,18,.80);
box-shadow:
0 20px 50px rgba(0,0,0,.23),
inset 0 1px 0 rgba(255,255,255,.025);
}
.deluxevo-brand{
flex:0 0 auto;
height:54px;
display:flex;
align-items:center;
}
.deluxevo-logo{
display:block;
width:170px;
max-height:52px;
object-fit:contain;
object-position:left center;
filter:drop-shadow(0 0 12px rgba(62,147,255,.18));
}
.desktop-nav{
margin-left:auto;
}
.desktop-nav a{
font-size:13px;
letter-spacing:.005em;
}
.nav-cta{
background:linear-gradient(135deg,#69e0ff,#69c5ff);
box-shadow:0 10px 28px rgba(71,197,255,.18);
}
.hero{
min-height:720px;
grid-template-columns:1.08fr .92fr;
gap:34px;
padding-top:78px;
}
.hero-copy{
position:relative;
z-index:3;
}
.hero h1{
max-width:760px;
font-size:clamp(54px,5.6vw,84px);
line-height:.99;
letter-spacing:-.058em;
margin-top:26px;
text-wrap:balance;
}
.hero-lead{
max-width:610px;
color:#a3aec3;
font-size:18px;
line-height:1.72;
letter-spacing:-.008em;
}
.hero-actions{
margin-top:32px;
}
.hero-actions .button{
min-height:51px;
border-radius:13px;
padding-inline:22px;
}
.button.primary{
background:linear-gradient(135deg,#67ddff 0%,#6ab8ff 46%,#806bff 100%);
box-shadow:
0 13px 34px rgba(59,133,255,.26),
inset 0 1px 0 rgba(255,255,255,.34);
}
.button.secondary{
background:rgba(255,255,255,.022);
border-color:rgba(157,184,241,.17);
box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.hero-proof{
gap:42px;
margin-top:2px;
}
.hero-proof strong{
font-size:12px;
color:#f1f5ff;
}
.hero-proof span{
color:#697894;
}
.hero-visual{
position:relative;
min-height:570px;
}
.hero-visual:before{
content:"";
position:absolute;
width:470px;
height:470px;
border-radius:50%;
background:
radial-gradient(circle, rgba(40,149,255,.18), rgba(36,76,196,.07) 42%, transparent 70%);
filter:blur(8px);
}
.orb-stage{
width:min(500px,83vw);
}
.orb-stage:before{
content:"";
position:absolute;
inset:2%;
border-radius:50%;
background:
radial-gradient(circle at 50% 50%, rgba(35,130,255,.10), transparent 54%),
conic-gradient(from 45deg, transparent, rgba(83,203,255,.09), transparent 32%, rgba(154,83,255,.09), transparent 62%);
filter:blur(12px);
animation:spin 22s linear infinite;
}
.hero-orb{
width:77%;
height:77%;
mix-blend-mode:screen;
border-radius:34%;
filter:
drop-shadow(0 0 28px rgba(50,158,255,.34))
drop-shadow(0 0 72px rgba(79,72,255,.23));
animation:floatOrb 7s ease-in-out infinite;
}
.halo-a{
inset:3%;
border-color:rgba(87,188,255,.15);
}
.halo-b{
inset:13%;
border-color:rgba(176,97,255,.12);
}
.orb-status{
bottom:7%;
color:#9caac5;
border-color:rgba(128,182,255,.14);
background:rgba(7,13,27,.80);
box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.orb-caption{
position:absolute;
bottom:1.5%;
z-index:4;
color:#53617b;
font-size:8px;
letter-spacing:.18em;
font-weight:750;
}
.statement{
position:relative;
}
.statement:before{
content:"";
position:absolute;
left:0;
top:0;
width:160px;
height:1px;
background:linear-gradient(90deg,#65e0ff,transparent);
}
.feature-card{
box-shadow:
0 24px 70px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.02);
}
.capability{
transition:background .25s,border-color .25s,transform .25s;
}
.capability:hover{
background:rgba(26,48,88,.16);
border-color:rgba(117,192,255,.20);
}
@media(max-width:900px){
.deluxevo-logo{
width:148px;
max-height:46px;
}
}
@media(max-width:620px){
.site-header{
padding-inline:15px;
}
.deluxevo-logo{
width:132px;
max-height:43px;
}
.hero h1{
font-size:48px;
}
}
/* =========================================================
LUX WEBSITE v0.3 — PRODUCT SECTION PASS
========================================================= */
.statement{
padding:82px 0 78px;
}
.statement-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:80px;
align-items:start;
margin-top:16px;
}
.statement h2{
margin:0;
max-width:780px;
font-size:clamp(43px,4.5vw,66px);
line-height:1.02;
}
.statement-copy{
padding-top:7px;
}
.statement-copy p{
margin:0;
font-size:18px;
line-height:1.75;
color:#9aa7bf;
}
.statement-points{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:26px;
}
.statement-points span{
border:1px solid rgba(107,190,255,.14);
background:rgba(66,145,255,.045);
color:#79dfff;
border-radius:999px;
padding:8px 11px;
font-size:8px;
font-weight:800;
letter-spacing:.15em;
}
.device-grid{
gap:20px;
padding:74px 0 102px;
}
.feature-card{
min-height:680px;
padding:34px;
background:
radial-gradient(circle at 78% 16%, rgba(39,100,255,.13), transparent 32%),
linear-gradient(150deg,rgba(15,24,47,.96),rgba(7,11,23,.96));
}
.feature-topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.feature-card .availability{
position:static;
font-size:8px;
padding:7px 9px;
}
.feature-card :is(h2,h3){
margin-top:24px;
font-size:34px;
line-height:1.12;
}
.feature-card>p{
max-width:520px;
font-size:15px;
line-height:1.7;
}
.device-showcase{
position:absolute;
left:34px;
right:34px;
bottom:72px;
height:350px;
display:flex;
align-items:flex-end;
justify-content:center;
}
.phone-showcase:before,
.pc-showcase:before{
content:"";
position:absolute;
width:65%;
height:45%;
bottom:2%;
border-radius:50%;
background:rgba(34,103,255,.18);
filter:blur(52px);
}
.phone-frame{
position:relative;
width:205px;
height:390px;
border-radius:39px;
padding:8px;
border:1px solid rgba(166,197,255,.24);
background:linear-gradient(150deg,#222a3b,#070a11 46%,#151d2c);
box-shadow:
0 26px 55px rgba(0,0,0,.48),
inset 0 0 0 1px rgba(255,255,255,.045);
transform:perspective(900px) rotateY(-4deg) rotateX(2deg);
}
.phone-speaker{
position:absolute;
top:14px;
left:50%;
width:48px;
height:5px;
margin-left:-24px;
border-radius:99px;
background:#161b26;
z-index:3;
}
.phone-screen{
height:100%;
border-radius:32px;
overflow:hidden;
padding:24px 16px 18px;
background:
radial-gradient(circle at 50% 35%, rgba(18,109,231,.30), transparent 34%),
radial-gradient(circle at 30% 90%, rgba(105,45,194,.20), transparent 30%),
#050914;
text-align:center;
}
.phone-status{
display:flex;
justify-content:space-between;
color:#6e7b91;
font-size:7px;
}
.phone-label{
margin-top:42px;
color:#7cdfff;
font-size:7px;
letter-spacing:.18em;
font-weight:800;
}
.device-orb{
display:block;
width:115px;
height:115px;
object-fit:contain;
margin:20px auto 8px;
filter:drop-shadow(0 0 24px rgba(47,158,255,.45));
}
.phone-state{
display:inline-block;
padding:7px 10px;
border:1px solid rgba(91,211,255,.16);
border-radius:999px;
color:#6edfff;
font-size:7px;
letter-spacing:.17em;
}
.phone-prompt{
margin-top:38px;
color:#e6edfb;
font-size:11px;
line-height:1.5;
}
.pc-window{
position:relative;
width:95%;
height:300px;
border-radius:18px;
border:1px solid rgba(142,177,244,.17);
background:#080d18;
overflow:hidden;
box-shadow:0 30px 65px rgba(0,0,0,.46);
transform:perspective(1100px) rotateY(3deg) rotateX(1deg);
}
.pc-window-bar{
height:39px;
display:flex;
align-items:center;
gap:7px;
padding:0 13px;
background:#0c1322;
border-bottom:1px solid rgba(153,181,234,.08);
}
.pc-window-bar span{
width:7px;
height:7px;
border-radius:50%;
background:#26344f;
}
.pc-window-bar strong{
margin-left:auto;
margin-right:auto;
font-size:8px;
letter-spacing:.16em;
color:#71809b;
}
.pc-window-body{
display:grid;
grid-template-columns:72px 1fr;
height:calc(100% - 39px);
}
.pc-window-body aside{
border-right:1px solid rgba(153,181,234,.08);
padding:18px 13px;
}
.pc-mini-orb{
width:35px;
height:35px;
margin:auto auto 22px;
}
.pc-mini-orb img{
width:100%;
height:100%;
object-fit:contain;
}
.pc-window-body aside i{
display:block;
height:6px;
width:70%;
margin:13px auto;
border-radius:99px;
background:#172238;
}
.pc-conversation{
padding:28px 25px;
}
.pc-system-line{
font-size:7px;
color:#5bdeb7;
letter-spacing:.15em;
margin-bottom:24px;
}
.pc-bubble{
max-width:78%;
border-radius:13px;
padding:10px 12px;
margin-bottom:12px;
font-size:9px;
line-height:1.4;
}
.pc-bubble.user{
margin-left:auto;
background:#1a2b50;
color:#f2f5ff;
border-bottom-right-radius:4px;
}
.pc-bubble.lux{
background:#0d1527;
border:1px solid rgba(117,166,255,.1);
color:#b8c4d8;
border-bottom-left-radius:4px;
}
.pc-result-row{
display:grid;
grid-template-columns:auto auto;
gap:8px 18px;
width:70%;
margin-top:25px;
padding-top:14px;
border-top:1px solid rgba(150,180,238,.08);
font-size:7px;
color:#6d7b95;
}
.pc-result-row b{
color:#5de1b7;
text-align:right;
}
.feature-meta{
position:absolute;
left:34px;
right:34px;
bottom:27px;
display:flex;
gap:14px;
flex-wrap:wrap;
}
.feature-meta span{
color:#57657f;
font-size:7px;
letter-spacing:.15em;
font-weight:800;
}
@media(max-width:900px){
.statement-grid{
grid-template-columns:1fr;
gap:28px;
}
.device-showcase{
left:25px;
right:25px;
}
}
@media(max-width:620px){
.statement{
padding-top:66px;
padding-bottom:60px;
}
.statement h2{
font-size:40px;
}
.device-grid{
padding-top:56px;
}
.feature-card{
min-height:640px;
padding:26px;
}
.device-showcase{
left:18px;
right:18px;
bottom:75px;
height:320px;
}
.phone-frame{
transform:none;
}
.pc-window{
width:100%;
transform:none;
}
.feature-meta{
left:26px;
right:26px;
}
}
/* =========================================================
LUX WEBSITE v0.4 — FULL HOMEPAGE PREMIUM PASS
========================================================= */
:root{
--lux-cyan:#67e0ff;
--lux-blue:#4f8cff;
--lux-violet:#8469ff;
--lux-mint:#5ce1b7;
--lux-text:#f5f8ff;
--lux-muted:#93a0b8;
--lux-line:rgba(146,177,235,.11);
--lux-card:rgba(10,16,31,.78);
}
body:before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-2;
background:
linear-gradient(rgba(255,255,255,.008) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.008) 1px, transparent 1px);
background-size:64px 64px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 82%);
}
.site-header{
width:min(1260px,calc(100% - 30px));
border-radius:18px;
}
.deluxevo-logo{
width:186px;
}
.hero{
padding-bottom:66px;
}
.hero h1{
max-width:790px;
}
.statement{
overflow:hidden;
}
.statement-grid{
align-items:center;
}
.statement-copy p{
max-width:560px;
}
.device-grid{
padding-top:58px;
}
.feature-card{
border-radius:25px;
}
.phone-card{
background:
radial-gradient(circle at 27% 90%, rgba(98,52,212,.18), transparent 30%),
radial-gradient(circle at 78% 13%, rgba(39,100,255,.16), transparent 30%),
linear-gradient(150deg,rgba(15,24,47,.96),rgba(7,11,23,.96));
}
.pc-card{
background:
radial-gradient(circle at 78% 80%, rgba(27,101,218,.15), transparent 31%),
radial-gradient(circle at 85% 12%, rgba(65,93,229,.13), transparent 30%),
linear-gradient(150deg,rgba(15,24,47,.96),rgba(7,11,23,.96));
}
.phone-frame{
margin-bottom:-44px;
}
.pc-window{
margin-bottom:6px;
}
.capabilities{
position:relative;
padding:108px 0 116px;
}
.capabilities:before{
content:"";
position:absolute;
left:50%;
top:12%;
width:70vw;
height:420px;
transform:translateX(-50%);
border-radius:50%;
background:rgba(44,84,219,.07);
filter:blur(110px);
pointer-events:none;
}
.premium-heading{
position:relative;
z-index:2;
}
.premium-heading h2{
max-width:760px;
}
.premium-capability-grid{
position:relative;
z-index:2;
gap:12px;
border:0;
grid-template-columns:repeat(3,1fr);
}
.premium-capability-grid .capability{
min-height:280px;
overflow:hidden;
border:1px solid var(--lux-line);
border-radius:20px;
background:
linear-gradient(145deg,rgba(15,23,43,.75),rgba(7,11,22,.82));
padding:26px;
}
.premium-capability-grid .capability:hover{
transform:translateY(-4px);
background:
linear-gradient(145deg,rgba(20,31,57,.9),rgba(8,13,25,.9));
}
.premium-capability-grid .capability.spotlight{
background:
radial-gradient(circle at 82% 12%,rgba(55,147,255,.14),transparent 32%),
linear-gradient(145deg,rgba(16,26,49,.92),rgba(8,12,23,.9));
}
.cap-top{
display:flex;
align-items:center;
justify-content:space-between;
}
.cap-state{
font-size:7px;
font-weight:850;
letter-spacing:.16em;
padding:6px 8px;
border-radius:999px;
}
.live-state{
color:#5ce1b7;
border:1px solid rgba(92,225,183,.16);
background:rgba(92,225,183,.05);
}
.roadmap-state{
color:#9e8cff;
border:1px solid rgba(158,140,255,.17);
background:rgba(158,140,255,.05);
}
.premium-capability-grid .capability h3{
margin-top:55px;
font-size:22px;
letter-spacing:-.025em;
}
.cap-accent{
position:absolute;
left:26px;
right:26px;
bottom:0;
height:1px;
background:linear-gradient(90deg,var(--lux-cyan),transparent 72%);
opacity:.35;
}
.future .cap-accent{
background:linear-gradient(90deg,var(--lux-violet),transparent 72%);
}
.continuity{
position:relative;
padding:118px 0 124px;
border-top:1px solid var(--lux-line);
border-bottom:1px solid var(--lux-line);
}
.continuity:before{
content:"";
position:absolute;
width:420px;
height:420px;
right:2%;
top:13%;
border-radius:50%;
background:rgba(46,121,255,.11);
filter:blur(110px);
pointer-events:none;
}
.continuity-copy,
.premium-panel{
position:relative;
z-index:2;
}
.premium-flow{
margin-top:31px;
}
.continuity-proof{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:34px;
}
.continuity-proof div{
min-height:78px;
border:1px solid rgba(133,175,255,.10);
border-radius:14px;
padding:13px;
background:rgba(255,255,255,.018);
}
.continuity-proof strong{
display:block;
color:#6ddfff;
font-size:11px;
margin-bottom:8px;
}
.continuity-proof span{
color:#7d8ca7;
font-size:10px;
line-height:1.4;
}
.premium-panel{
padding:28px;
background:
radial-gradient(circle at 87% 12%,rgba(54,126,255,.12),transparent 33%),
linear-gradient(145deg,rgba(14,22,43,.96),rgba(6,10,20,.98));
}
.panel-secure{
margin-left:auto;
color:#5ce1b7;
}
.handoff-strip{
display:grid;
grid-template-columns:1fr 80px 1fr;
align-items:center;
gap:12px;
margin:6px 0 30px;
padding:17px;
border-radius:15px;
border:1px solid rgba(139,178,247,.09);
background:rgba(4,9,19,.46);
}
.handoff-device{
display:flex;
align-items:center;
gap:10px;
}
.handoff-device:last-child{
justify-content:flex-end;
text-align:right;
}
.tiny-orb{
width:34px;
height:34px;
border-radius:12px;
background:#080e1b;
display:grid;
place-items:center;
border:1px solid rgba(104,187,255,.12);
}
.tiny-orb img{
width:27px;
height:27px;
object-fit:contain;
}
.handoff-device b{
display:block;
font-size:8px;
letter-spacing:.13em;
color:#dfe8f9;
}
.handoff-device small{
display:block;
margin-top:3px;
font-size:6px;
letter-spacing:.12em;
color:#667590;
}
.handoff-line{
display:flex;
align-items:center;
}
.handoff-line i{
position:relative;
width:100%;
height:1px;
background:linear-gradient(90deg,rgba(85,132,255,.25),#69ddff,rgba(85,132,255,.25));
}
.handoff-line i:after{
content:"";
position:absolute;
right:0;
top:-2px;
width:5px;
height:5px;
border-radius:50%;
background:#69ddff;
box-shadow:0 0 12px #69ddff;
}
.premium-panel .chat{
max-width:86%;
}
.premium-panel .panel-status{
display:flex;
gap:16px;
justify-content:space-between;
color:#5ce1b7;
}
.roadmap{
padding:116px 0 120px;
}
.roadmap-shell{
position:relative;
margin-top:20px;
padding:42px 26px 30px;
border:1px solid rgba(143,177,238,.10);
border-radius:24px;
background:
radial-gradient(circle at 76% 24%,rgba(40,96,218,.10),transparent 31%),
rgba(8,13,25,.52);
}
.roadmap-progress{
position:absolute;
left:27px;
right:27px;
top:34px;
height:2px;
background:#172238;
}
.progress-line{
position:absolute;
inset:0;
}
.progress-fill{
position:absolute;
left:0;
top:0;
bottom:0;
width:70%;
background:linear-gradient(90deg,#5ce1b7,#60dfff,#776fff);
box-shadow:0 0 16px rgba(94,210,255,.35);
}
.premium-roadmap{
border:0;
padding-top:26px;
}
.premium-roadmap .milestone:after{
display:none;
}
.premium-roadmap .milestone-dot{
top:-34px;
}
.premium-roadmap .milestone-state{
display:inline-block;
margin-top:4px;
}
.premium-roadmap .milestone h3{
font-size:18px;
margin-top:14px;
}
.premium-roadmap .milestone p{
max-width:190px;
}
.early-access{
padding:24px 0 112px;
}
.premium-access{
min-height:360px;
padding:52px;
align-items:stretch;
background:
radial-gradient(circle at 85% 14%,rgba(63,121,255,.17),transparent 34%),
radial-gradient(circle at 12% 100%,rgba(104,60,213,.16),transparent 35%),
linear-gradient(135deg,rgba(14,27,57,.88),rgba(9,9,27,.92));
}
.access-copy{
max-width:680px;
}
.access-copy h2{
max-width:620px;
}
.access-trust{
display:flex;
align-items:center;
gap:11px;
margin-top:30px;
}
.access-trust span{
font-size:8px;
font-weight:800;
letter-spacing:.16em;
color:#667792;
}
.access-trust i{
width:22px;
height:1px;
background:#263852;
}
.access-card{
width:min(360px,100%);
border:1px solid rgba(142,182,255,.13);
border-radius:20px;
padding:28px;
background:rgba(5,10,21,.62);
backdrop-filter:blur(12px);
box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.access-card-label{
font-size:8px;
letter-spacing:.17em;
color:#67e0ff;
font-weight:850;
}
.access-card :is(strong,h3){
display:block;
margin:20px 0 10px;
font-size:24px;
line-height:1.16;
letter-spacing:-.025em;
}
.access-card p{
margin:0 0 22px;
font-size:13px;
line-height:1.55;
}
.access-card .button{
width:100%;
}
.access-card .notify-note{
display:block;
margin-top:10px;
text-align:center;
}
.site-footer{
padding-top:32px;
grid-template-columns:1fr 1fr 1fr;
align-items:start;
}
.deluxevo-footer img{
width:170px;
height:auto;
border-radius:0;
object-fit:contain;
}
.footer-brand-block p{
margin:12px 0 0;
color:#5e6c84;
}
.footer-center{
display:flex;
flex-direction:column;
gap:7px;
text-align:center;
}
.footer-center strong{
color:#bac5d9;
font-size:12px;
}
.footer-center span{
color:#5e6d87;
font-size:10px;
}
.footer-links{
flex-wrap:wrap;
align-items:center;
}
.copyright{
color:#526079;
}
.reveal{
opacity:0;
transform:translateY(18px);
transition:
opacity .7s ease,
transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible{
opacity:1;
transform:none;
}
@media(max-width:1000px){
.premium-capability-grid{
grid-template-columns:1fr 1fr;
}
.continuity-proof{
grid-template-columns:1fr;
}
.premium-roadmap{
grid-template-columns:1fr 1fr;
row-gap:48px;
}
.progress-fill{
width:55%;
}
}
@media(max-width:900px){
.deluxevo-logo{
width:156px;
}
.premium-access{
gap:28px;
}
.access-card{
width:100%;
}
.site-footer{
grid-template-columns:1fr;
}
.footer-center{
text-align:left;
}
}
@media(max-width:620px){
.premium-capability-grid{
grid-template-columns:1fr;
}
.capabilities,
.continuity,
.roadmap{
padding-top:78px;
padding-bottom:82px;
}
.continuity-proof{
grid-template-columns:1fr;
}
.handoff-strip{
grid-template-columns:1fr;
}
.handoff-line{
height:18px;
justify-content:center;
}
.handoff-line i{
width:1px;
height:18px;
background:linear-gradient(#263852,#69ddff);
}
.handoff-line i:after{
right:-2px;
top:auto;
bottom:0;
}
.handoff-device:last-child{
justify-content:flex-start;
text-align:left;
}
.premium-panel .panel-status{
flex-direction:column;
gap:7px;
}
.premium-roadmap{
grid-template-columns:1fr;
}
.roadmap-progress{
display:none;
}
.premium-roadmap .milestone-dot{
top:-8px;
left:-3px;
}
.premium-roadmap .milestone{
border-left:1px solid rgba(117,165,240,.11);
padding:0 0 24px 22px;
}
.premium-access{
padding:30px 24px;
}
.access-trust{
flex-wrap:wrap;
}
.deluxevo-footer img{
width:150px;
}
}
/* =========================================================
LUX WEBSITE v0.5 — CLARITY + ROADMAP + CONTINUITY DETAIL
========================================================= */
/* Higher contrast for small wording */
.section-kicker,
.card-label,
.eyebrow,
.availability,
.cap-number,
.cap-state,
.milestone-state,
.phase-label,
.node-kicker,
.detail-icon,
.difference-label,
.feature-meta span,
.orb-caption,
.phone-label,
.phone-state,
.pc-system-line,
.panel-top,
.panel-status,
.flow-state,
.roadmap-item>span{
text-shadow:0 0 12px rgba(84,210,255,.12);
}
.section-kicker,
.card-label,
.eyebrow{
color:#7ee7ff;
font-size:12px;
}
.feature-meta span{
color:#8796b2;
font-size:9px;
}
.availability{
font-size:9px !important;
color:#78e8c5 !important;
border-color:rgba(105,232,196,.28) !important;
background:rgba(73,204,166,.08) !important;
}
.orb-caption{
color:#7d8ba5;
font-size:9px;
}
.phone-label,
.phone-state{
font-size:8px;
color:#86e7ff;
}
.pc-system-line{
font-size:8px;
color:#72e5c0;
}
.cap-number{
color:#8797b5;
font-size:11px;
}
.cap-state{
font-size:8px;
}
.panel-top,
.panel-status{
font-size:10px;
}
.hero-proof span{
color:#8493ae;
}
.hero-proof strong{
font-size:13px;
}
.statement-points span{
font-size:9px;
color:#89e6ff;
border-color:rgba(108,206,255,.23);
}
/* Deluxevo branding */
.deluxevo-brand{
min-width:310px;
gap:15px;
}
.deluxevo-logo{
width:224px;
max-height:58px;
filter:
brightness(1.22)
contrast(1.14)
drop-shadow(0 0 10px rgba(65,164,255,.36))
drop-shadow(0 0 24px rgba(89,74,255,.18));
}
.brand-divider{
width:1px;
height:27px;
background:linear-gradient(transparent,rgba(120,199,255,.35),transparent);
}
.brand-product{
color:#8c9bb7;
font-size:8px;
line-height:1.2;
letter-spacing:.16em;
font-weight:800;
max-width:52px;
}
.site-header{
box-shadow:
0 22px 58px rgba(0,0,0,.30),
0 0 0 1px rgba(86,161,255,.035),
inset 0 1px 0 rgba(255,255,255,.03);
}
/* Phone-to-PC differentiation */
.how-it-works{
position:relative;
padding:118px 0 126px;
border-top:1px solid var(--lux-line);
}
.how-it-works:before{
content:"";
position:absolute;
width:640px;
height:460px;
left:50%;
top:31%;
transform:translate(-50%,-50%);
border-radius:50%;
background:rgba(39,91,225,.08);
filter:blur(120px);
pointer-events:none;
}
.difference-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.difference-card{
position:relative;
min-height:450px;
overflow:hidden;
padding:32px;
border:1px solid rgba(145,177,236,.11);
border-radius:24px;
background:linear-gradient(145deg,rgba(12,18,34,.80),rgba(6,10,20,.92));
}
.difference-card.conventional{
opacity:.85;
}
.difference-card.lux-way{
border-color:rgba(91,190,255,.20);
background:
radial-gradient(circle at 85% 12%,rgba(43,132,255,.15),transparent 34%),
radial-gradient(circle at 8% 100%,rgba(110,64,222,.10),transparent 35%),
linear-gradient(145deg,rgba(13,23,44,.95),rgba(7,11,22,.98));
}
.difference-glow{
position:absolute;
width:260px;
height:260px;
border-radius:50%;
right:-100px;
top:-120px;
background:#3e85ff;
filter:blur(95px);
opacity:.17;
}
.difference-label{
position:relative;
color:#8a9ab7;
font-size:9px;
font-weight:850;
letter-spacing:.17em;
}
.lux-way .difference-label{
color:#79e3ff;
}
.difference-card h3{
position:relative;
margin:19px 0 28px;
font-size:31px;
line-height:1.1;
letter-spacing:-.035em;
}
.difference-steps{
position:relative;
display:grid;
gap:10px;
}
.difference-steps div{
display:grid;
grid-template-columns:35px 1fr;
align-items:center;
gap:12px;
min-height:51px;
padding:10px 13px;
border:1px solid rgba(145,177,236,.08);
border-radius:13px;
background:rgba(255,255,255,.016);
}
.lux-way .difference-steps div{
border-color:rgba(89,188,255,.10);
background:rgba(42,103,207,.035);
}
.difference-steps b{
color:#64748e;
font-size:9px;
letter-spacing:.1em;
}
.lux-way .difference-steps b{
color:#69ddff;
}
.difference-steps span{
color:#a1aec3;
font-size:13px;
line-height:1.45;
}
.difference-note{
position:relative;
margin:23px 0 0;
padding-top:20px;
border-top:1px solid rgba(145,177,236,.09);
color:#7f8da6;
font-size:12px;
line-height:1.6;
}
.strong-note{
color:#aebbd0;
}
.pc-flow-card{
position:relative;
z-index:2;
margin-top:20px;
padding:28px;
border-radius:24px;
border:1px solid rgba(101,188,255,.15);
background:
radial-gradient(circle at 50% 100%,rgba(38,95,207,.10),transparent 43%),
linear-gradient(150deg,rgba(10,18,35,.92),rgba(5,9,18,.96));
box-shadow:0 28px 75px rgba(0,0,0,.20);
}
.pc-flow-top{
display:flex;
align-items:center;
gap:7px;
padding-bottom:22px;
border-bottom:1px solid rgba(143,176,237,.09);
color:#9aa9c1;
font-size:9px;
font-weight:800;
letter-spacing:.16em;
}
.flow-state{
margin-left:auto;
color:#72e4c0;
font-size:8px;
}
.pc-flow-grid{
display:grid;
grid-template-columns:1fr 90px 1fr 90px 1fr 90px 1fr;
gap:10px;
align-items:center;
padding-top:26px;
}
.flow-node{
min-height:156px;
padding:19px;
border:1px solid rgba(144,178,241,.10);
border-radius:17px;
background:rgba(255,255,255,.018);
}
.core-node{
border-color:rgba(97,210,255,.17);
background:rgba(43,116,219,.04);
}
.pc-node{
border-color:rgba(91,226,184,.15);
}
.result-node{
border-color:rgba(129,103,255,.16);
}
.node-kicker{
display:block;
color:#72ddff;
font-size:8px;
font-weight:850;
letter-spacing:.16em;
margin-bottom:18px;
}
.flow-node strong{
display:block;
color:#eef4ff;
font-size:14px;
line-height:1.42;
}
.flow-node small{
display:block;
margin-top:13px;
color:#7887a1;
font-size:10px;
line-height:1.5;
}
.flow-arrow{
text-align:center;
}
.flow-arrow span{
display:block;
margin-bottom:10px;
color:#6f7f9a;
font-size:7px;
font-weight:800;
letter-spacing:.12em;
}
.flow-arrow i{
position:relative;
display:block;
height:1px;
background:linear-gradient(90deg,rgba(64,101,159,.25),#62dfff,rgba(64,101,159,.25));
}
.flow-arrow i:after{
content:"";
position:absolute;
right:0;
top:-3px;
width:7px;
height:7px;
border-radius:50%;
background:#62dfff;
box-shadow:0 0 14px rgba(98,223,255,.7);
}
.return-arrow i{
background:linear-gradient(90deg,rgba(65,97,158,.25),#8276ff,rgba(65,97,158,.25));
}
.return-arrow i:after{
background:#8276ff;
box-shadow:0 0 14px rgba(130,118,255,.7);
}
.continuity-detail-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-top:20px;
}
.detail-card{
min-height:210px;
padding:24px;
border:1px solid rgba(141,176,238,.10);
border-radius:18px;
background:rgba(8,13,25,.58);
}
.detail-icon{
display:inline-grid;
place-items:center;
width:34px;
height:34px;
border-radius:10px;
border:1px solid rgba(101,208,255,.15);
color:#6ee0ff;
font-size:9px;
font-weight:850;
}
.detail-card h3{
margin:28px 0 10px;
font-size:17px;
letter-spacing:-.02em;
}
.detail-card p{
margin:0;
color:#8998b2;
font-size:12px;
line-height:1.62;
}
/* Expanded roadmap */
.roadmap-phases{
display:grid;
gap:20px;
}
.roadmap-phase{
overflow:hidden;
border:1px solid rgba(143,176,237,.11);
border-radius:24px;
background:rgba(7,12,24,.62);
}
.phase-now{
background:
radial-gradient(circle at 82% 18%,rgba(45,148,113,.07),transparent 30%),
rgba(7,12,24,.65);
}
.phase-next{
border-color:rgba(93,190,255,.17);
background:
radial-gradient(circle at 82% 18%,rgba(45,119,234,.11),transparent 31%),
rgba(7,12,24,.70);
}
.phase-future{
background:
radial-gradient(circle at 82% 18%,rgba(107,74,216,.08),transparent 31%),
rgba(7,12,24,.65);
}
.phase-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
padding:25px 28px;
border-bottom:1px solid rgba(143,176,237,.09);
}
.phase-header>div{
display:flex;
align-items:center;
gap:13px;
}
.phase-number{
color:#6ddfff;
font-size:11px;
font-weight:850;
}
.phase-label{
color:#91a2bf;
font-size:9px;
font-weight:850;
letter-spacing:.15em;
}
.phase-header :is(strong,h3){
color:#dce5f5;
font-size:14px;
}
.phase-items{
display:grid;
grid-template-columns:repeat(5,1fr);
}
.phase-next .phase-items{
grid-template-columns:repeat(4,1fr);
}
.future-grid{
grid-template-columns:repeat(4,1fr);
}
.roadmap-item{
position:relative;
min-height:225px;
padding:27px 24px;
border-right:1px solid rgba(143,176,237,.08);
border-bottom:1px solid rgba(143,176,237,.06);
}
.roadmap-item:nth-child(5n){
border-right:0;
}
.phase-next .roadmap-item:nth-child(4n),
.future-grid .roadmap-item:nth-child(4n){
border-right:0;
}
.roadmap-item>span{
display:inline-block;
color:#6d7d98;
font-size:8px;
font-weight:850;
letter-spacing:.16em;
}
.roadmap-item.done>span{
color:#63dcb6;
}
.roadmap-item.next>span{
color:#69dcff;
}
.roadmap-item.future>span{
color:#9f8cff;
}
.roadmap-item :is(h3,h4){
margin:42px 0 10px;
color:#edf3ff;
font-size:18px;
line-height:1.25;
letter-spacing:-.025em;
}
.roadmap-item p{
margin:0;
color:#8291aa;
font-size:12px;
line-height:1.58;
}
.roadmap-item:after{
content:"";
position:absolute;
left:24px;
right:24px;
bottom:0;
height:1px;
opacity:.25;
}
.roadmap-item.done:after{
background:linear-gradient(90deg,#55ddb5,transparent);
}
.roadmap-item.next:after{
background:linear-gradient(90deg,#61dcff,transparent);
}
.roadmap-item.future:after{
background:linear-gradient(90deg,#9078ff,transparent);
}
/* Better general readability */
.feature-card>p,
.section-heading>p,
.statement-copy p,
.continuity-copy p,
.access-inner p{
color:#a4b0c5;
}
.capability p,
.roadmap-item p,
.detail-card p{
color:#919fb7;
}
.footer-center span,
.footer-brand-block p,
.copyright{
color:#7887a0;
}
@media(max-width:1180px){
.deluxevo-brand{
min-width:250px;
}
.deluxevo-logo{
width:190px;
}
.brand-product{
display:none;
}
.brand-divider{
display:none;
}
.desktop-nav{
gap:20px;
}
.pc-flow-grid{
grid-template-columns:1fr 50px 1fr;
}
.pc-flow-grid .flow-arrow:nth-of-type(2),
.pc-flow-grid .flow-arrow:nth-of-type(3){
display:none;
}
.pc-flow-grid .pc-node,
.pc-flow-grid .result-node{
margin-top:12px;
}
.phase-items,
.phase-next .phase-items,
.future-grid{
grid-template-columns:repeat(2,1fr);
}
.roadmap-item,
.roadmap-item:nth-child(5n),
.phase-next .roadmap-item:nth-child(4n),
.future-grid .roadmap-item:nth-child(4n){
border-right:1px solid rgba(143,176,237,.08);
}
.roadmap-item:nth-child(2n){
border-right:0;
}
}
@media(max-width:900px){
.difference-grid{
grid-template-columns:1fr;
}
.continuity-detail-grid{
grid-template-columns:1fr 1fr;
}
.pc-flow-grid{
grid-template-columns:1fr;
}
.flow-arrow{
height:36px;
display:flex;
flex-direction:column;
justify-content:center;
}
.flow-arrow i{
width:1px;
height:22px;
margin:auto;
background:linear-gradient(#29405f,#62dfff);
}
.flow-arrow i:after{
right:-3px;
top:auto;
bottom:0;
}
.flow-state{
display:none;
}
}
@media(max-width:620px){
.how-it-works{
padding:78px 0 84px;
}
.difference-card{
min-height:0;
padding:25px;
}
.difference-card h3{
font-size:27px;
}
.continuity-detail-grid{
grid-template-columns:1fr;
}
.phase-header{
display:block;
}
.phase-header :is(strong,h3){
display:block;
margin-top:13px;
}
.phase-items,
.phase-next .phase-items,
.future-grid{
grid-template-columns:1fr;
}
.roadmap-item,
.roadmap-item:nth-child(2n){
border-right:0;
}
.deluxevo-logo{
width:154px;
}
}
/* =========================================================
LUX WEBSITE v0.6 — VISIBILITY + DIFFERENTIATION
========================================================= */
/* Fix sticky header covering anchor headings */
#why-lux,
#devices,
#how-it-works,
#capabilities,
#roadmap,
#early-access{
scroll-margin-top:118px;
}
/* Header / Deluxevo stronger */
.site-header{
min-height:78px;
}
.deluxevo-logo{
width:238px;
max-height:61px;
filter:
brightness(1.32)
contrast(1.19)
saturate(1.08)
drop-shadow(0 0 12px rgba(61,174,255,.42))
drop-shadow(0 0 28px rgba(95,76,255,.24));
}
.brand-product{
max-width:none;
color:#b0bfd7;
font-size:9px;
line-height:1.25;
letter-spacing:.17em;
}
.brand-divider{
background:linear-gradient(transparent,rgba(126,205,255,.52),transparent);
}
/* General readability: no tiny grey text disappearing into navy */
.feature-card p,
.difference-card p,
.difference-steps span,
.detail-card p,
.roadmap-item p,
.flow-node small,
.section-heading>p,
.statement-copy p,
.continuity-copy p,
.access-card p,
.site-footer p{
color:#aeb9cc;
}
.feature-meta span,
.phone-status,
.footer-center span,
.copyright{
color:#91a0ba;
}
.difference-card.conventional{
opacity:1;
}
.difference-card.conventional .difference-label{
color:#9bacC5;
}
.difference-card.conventional .difference-steps b{
color:#8392ac;
}
.difference-card.conventional .difference-steps span{
color:#b2bdd0;
}
.difference-note{
color:#9eabc1;
}
/* Make the beginning of PHONE-PC impossible to hide under header */
.how-it-works{
padding-top:138px;
}
.how-it-works .premium-heading{
padding-top:10px;
}
.how-it-works .section-kicker{
display:block;
margin-bottom:14px;
font-size:12px;
color:#86e9ff;
}
/* Strong differentiator strip */
.difference-strip{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin:-15px 0 26px;
}
.difference-strip span{
display:flex;
align-items:center;
min-height:58px;
padding:12px 14px;
border:1px solid rgba(99,201,255,.17);
border-radius:13px;
background:rgba(35,92,177,.055);
color:#9feaff;
font-size:9px;
line-height:1.45;
font-weight:850;
letter-spacing:.10em;
}
/* Plain English distinction */
.plain-english-difference{
position:relative;
z-index:2;
display:grid;
grid-template-columns:220px 1fr;
gap:28px;
align-items:start;
margin:18px 0 20px;
padding:22px 24px;
border:1px solid rgba(113,202,255,.18);
border-radius:17px;
background:
linear-gradient(135deg,rgba(23,58,111,.23),rgba(9,14,27,.78));
}
.plain-english-difference strong{
color:#7fe6ff;
font-size:12px;
line-height:1.5;
letter-spacing:.02em;
}
.plain-english-difference span{
color:#c0cada;
font-size:14px;
line-height:1.7;
}
.plain-english-difference b{
color:#f4f7ff;
}
/* Increase readability in the working flow */
.pc-flow-top{
color:#b4c0d2;
font-size:10px;
}
.flow-state{
font-size:9px;
color:#7aebc7;
}
.flow-node strong{
font-size:15px;
}
.flow-node small{
font-size:11px;
}
.flow-arrow span{
color:#93a3bc;
font-size:8px;
}
/* Roadmap readability + status legend */
.roadmap-status-legend{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:-10px 0 22px;
}
.roadmap-status-legend span{
padding:8px 11px;
border-radius:999px;
font-size:8px;
font-weight:850;
letter-spacing:.15em;
}
.legend-working{
color:#72e6bf;
border:1px solid rgba(91,221,177,.22);
background:rgba(91,221,177,.06);
}
.legend-next{
color:#76e2ff;
border:1px solid rgba(96,210,255,.22);
background:rgba(96,210,255,.06);
}
.legend-future{
color:#ad9cff;
border:1px solid rgba(148,126,255,.22);
background:rgba(148,126,255,.06);
}
.phase-label{
color:#aebbd0;
font-size:10px;
}
.roadmap-item>span{
font-size:9px;
}
.roadmap-item :is(h3,h4){
font-size:19px;
}
.roadmap-item p{
font-size:13px;
}
/* Mobile */
@media(max-width:1180px){
.deluxevo-logo{
width:205px;
}
.difference-strip{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:900px){
.how-it-works{
padding-top:105px;
}
.plain-english-difference{
grid-template-columns:1fr;
gap:8px;
}
.brand-product,
.brand-divider{
display:none;
}
}
@media(max-width:620px){
.deluxevo-logo{
width:166px;
}
.difference-strip{
grid-template-columns:1fr;
}
.difference-strip span{
min-height:48px;
}
}
/* =========================================================
LUX WEBSITE v0.7 — PATENT PENDING / IP
========================================================= */
#patent{
scroll-margin-top:118px;
}
.hero-patent-badge{
display:inline-flex;
align-items:center;
gap:9px;
margin-top:18px;
padding:8px 11px;
border:1px solid rgba(112,220,255,.20);
border-radius:999px;
background:rgba(53,128,218,.055);
color:#a9eaff;
font-size:9px;
font-weight:850;
letter-spacing:.13em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.patent-pulse{
width:7px;
height:7px;
border-radius:50%;
background:#6ae4ff;
box-shadow:0 0 14px rgba(106,228,255,.85);
}
.patent-section{
position:relative;
padding:118px 0 116px;
border-top:1px solid var(--lux-line);
}
.patent-section:before{
content:"";
position:absolute;
left:50%;
top:42%;
width:720px;
height:520px;
transform:translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(circle,rgba(47,112,244,.11),rgba(96,57,218,.055) 42%,transparent 70%);
filter:blur(70px);
pointer-events:none;
}
.patent-shell{
position:relative;
z-index:2;
display:grid;
grid-template-columns:.88fr 1.12fr;
gap:58px;
align-items:center;
padding:46px;
border:1px solid rgba(113,197,255,.16);
border-radius:28px;
background:
radial-gradient(circle at 82% 16%,rgba(47,129,255,.13),transparent 31%),
radial-gradient(circle at 6% 100%,rgba(113,61,225,.12),transparent 33%),
linear-gradient(145deg,rgba(12,21,41,.95),rgba(6,10,20,.97));
box-shadow:
0 32px 85px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.025);
}
.patent-title-row{
display:flex;
align-items:center;
gap:11px;
margin-top:22px;
flex-wrap:wrap;
}
.patent-status,
.patent-number{
display:inline-flex;
align-items:center;
min-height:31px;
padding:0 11px;
border-radius:999px;
font-size:9px;
font-weight:900;
letter-spacing:.14em;
}
.patent-status{
color:#75e6c0;
border:1px solid rgba(91,224,183,.23);
background:rgba(91,224,183,.07);
}
.patent-number{
color:#8ce7ff;
border:1px solid rgba(104,207,255,.20);
background:rgba(104,207,255,.055);
}
.patent-copy h2{
margin:22px 0 21px;
max-width:610px;
font-size:clamp(38px,4.1vw,58px);
line-height:1.03;
letter-spacing:-.047em;
}
.patent-lead{
margin:0;
max-width:610px;
color:#adb9cc;
font-size:17px;
line-height:1.75;
}
.patent-note{
margin:22px 0 0;
padding-top:20px;
border-top:1px solid rgba(143,177,237,.10);
color:#8392aa;
font-size:12px;
line-height:1.65;
}
.patent-visual{
position:relative;
min-height:475px;
display:flex;
flex-direction:column;
justify-content:center;
gap:35px;
}
.ip-core{
position:relative;
width:180px;
height:180px;
margin:0 auto;
display:grid;
place-items:center;
}
.ip-orb{
width:118px;
height:118px;
position:relative;
z-index:2;
object-fit:contain;
filter:
drop-shadow(0 0 24px rgba(64,177,255,.38))
drop-shadow(0 0 52px rgba(102,73,255,.24));
}
.ip-ring{
position:absolute;
border-radius:50%;
border:1px solid rgba(93,203,255,.16);
}
.ring-one{
inset:3px;
animation:spin 18s linear infinite;
}
.ring-two{
inset:24px;
border-color:rgba(157,99,255,.15);
animation:spinBack 13s linear infinite;
}
.ip-flow{
display:grid;
grid-template-columns:1fr 42px 1fr 42px 1fr;
align-items:center;
gap:8px;
}
.ip-node{
min-height:132px;
padding:16px;
border:1px solid rgba(139,177,243,.11);
border-radius:16px;
background:rgba(4,9,19,.46);
}
.ip-node span{
color:#70dfff;
font-size:8px;
font-weight:850;
}
.ip-node strong{
display:block;
margin:14px 0 8px;
color:#edf3ff;
font-size:10px;
line-height:1.4;
letter-spacing:.08em;
}
.ip-node small{
color:#8d9bb3;
font-size:9px;
line-height:1.5;
}
.ip-flow>i{
height:1px;
background:linear-gradient(90deg,rgba(74,106,165,.23),#68ddff,rgba(74,106,165,.23));
position:relative;
}
.ip-flow>i:after{
content:"";
position:absolute;
right:0;
top:-3px;
width:7px;
height:7px;
border-radius:50%;
background:#68ddff;
box-shadow:0 0 12px rgba(104,221,255,.75);
}
.patent-proof-row{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(4,1fr);
margin-top:16px;
border:1px solid rgba(139,176,239,.10);
border-radius:18px;
overflow:hidden;
background:rgba(7,12,24,.62);
}
.patent-proof-row article{
min-height:92px;
padding:20px;
border-right:1px solid rgba(139,176,239,.09);
}
.patent-proof-row article:last-child{
border-right:0;
}
.patent-proof-row span{
display:block;
color:#7787a3;
font-size:8px;
font-weight:850;
letter-spacing:.15em;
}
.patent-proof-row strong{
display:block;
margin-top:12px;
color:#e5edf9;
font-size:12px;
line-height:1.35;
}
.roadmap-item.patent-roadmap>span{
color:#81e6ff;
}
.roadmap-item.patent-roadmap:after{
background:linear-gradient(90deg,#62ddff,#8b71ff,transparent);
}
/* phase 1 now has six cards */
.phase-now .phase-items{
grid-template-columns:repeat(3,1fr);
}
.phase-now .roadmap-item:nth-child(3n){
border-right:0;
}
@media(max-width:1050px){
.patent-shell{
grid-template-columns:1fr;
}
.patent-visual{
min-height:0;
}
.phase-now .phase-items{
grid-template-columns:repeat(2,1fr);
}
.phase-now .roadmap-item:nth-child(3n){
border-right:1px solid rgba(143,176,237,.08);
}
.phase-now .roadmap-item:nth-child(2n){
border-right:0;
}
}
@media(max-width:800px){
.patent-proof-row{
grid-template-columns:1fr 1fr;
}
.patent-proof-row article:nth-child(2n){
border-right:0;
}
.ip-flow{
grid-template-columns:1fr;
}
.ip-flow>i{
width:1px;
height:24px;
margin:auto;
}
.ip-flow>i:after{
right:-3px;
top:auto;
bottom:0;
}
}
@media(max-width:620px){
.patent-section{
padding-top:82px;
padding-bottom:84px;
}
.patent-shell{
padding:27px 23px;
}
.patent-copy h2{
font-size:38px;
}
.patent-proof-row{
grid-template-columns:1fr;
}
.patent-proof-row article,
.patent-proof-row article:nth-child(2n){
border-right:0;
border-bottom:1px solid rgba(139,176,239,.08);
}
.phase-now .phase-items{
grid-template-columns:1fr;
}
.phase-now .roadmap-item,
.phase-now .roadmap-item:nth-child(2n),
.phase-now .roadmap-item:nth-child(3n){
border-right:0;
}
}
/* =========================================================
LUX WEBSITE v0.8 — LIVE SITE POLISH + EARLY ACCESS
========================================================= */
.access-contact{
margin-top:24px !important;
color:#9eacc2 !important;
font-size:13px !important;
}
.access-contact a,
.copyright a,
.privacy-main a{
color:#7fe4ff;
text-decoration:none;
}
.access-contact a:hover,
.copyright a:hover,
.privacy-main a:hover{
text-decoration:underline;
}
.signup-card{
width:min(390px,100%);
}
.early-access-form{
display:grid;
gap:16px;
margin-top:22px;
}
.form-field{
display:grid;
gap:7px;
}
.form-field label{
color:#c5d0e2;
font-size:11px;
font-weight:750;
letter-spacing:.02em;
}
.form-field input{
width:100%;
min-height:48px;
border:1px solid rgba(139,178,247,.16);
border-radius:12px;
outline:none;
padding:0 14px;
background:rgba(5,10,21,.72);
color:#f4f7ff;
font:inherit;
font-size:14px;
transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-field input::placeholder{
color:#6f7e98;
}
.form-field input:focus{
border-color:rgba(98,220,255,.48);
background:rgba(8,16,31,.94);
box-shadow:0 0 0 3px rgba(82,190,255,.07);
}
.consent-row{
display:grid;
grid-template-columns:18px 1fr;
gap:10px;
align-items:start;
color:#9eabc0;
font-size:11px;
line-height:1.55;
cursor:pointer;
}
.consent-row input{
width:16px;
height:16px;
margin-top:2px;
accent-color:#65dfff;
}
.consent-row a{
color:#7ee5ff;
}
.form-trap{
position:absolute !important;
left:-10000px !important;
width:1px !important;
height:1px !important;
overflow:hidden !important;
}
.signup-submit{
width:100%;
margin-top:4px;
}
.signup-submit:disabled{
opacity:.68;
cursor:wait;
}
.form-status{
min-height:20px;
color:#93a2ba;
font-size:11px;
line-height:1.5;
text-align:center;
}
.form-status.success{
color:#6fe3bd;
}
.form-status.error{
color:#ff9caa;
}
.form-status a{
color:#80e4ff;
}
.privacy-main{
padding-top:115px;
padding-bottom:92px;
}
.privacy-article{
max-width:900px;
}
.privacy-article h1{
max-width:820px;
}
.privacy-updated{
margin:-4px 0 38px !important;
color:#7f8ea8 !important;
font-size:12px !important;
}
.privacy-article h2{
margin-top:46px;
color:#edf3ff;
font-size:24px;
letter-spacing:-.025em;
}
.privacy-article p{
color:#a9b5c9;
font-size:16px;
line-height:1.78;
}
.privacy-contact-card{
margin-top:52px;
padding:26px;
border:1px solid rgba(111,200,255,.16);
border-radius:20px;
background:
radial-gradient(circle at 90% 0%,rgba(57,128,255,.12),transparent 38%),
rgba(8,14,27,.76);
}
.privacy-contact-card span{
display:block;
color:#76e1ff;
font-size:9px;
font-weight:850;
letter-spacing:.16em;
}
.privacy-contact-card strong{
display:block;
margin:13px 0 18px;
color:#f1f5ff;
font-size:22px;
}
.privacy-contact-card .button{
width:max-content;
}
.privacy-footer{
border-top:1px solid rgba(147,176,229,.08);
padding-top:34px;
}
/* Final mobile readability pass */
@media(max-width:620px){
body{
font-size:16px;
}
.hero-lead,
.statement-copy p,
.section-heading>p,
.feature-card>p,
.continuity-copy p,
.patent-lead,
.access-inner p{
font-size:15px !important;
line-height:1.72 !important;
color:#b1bdd0 !important;
}
.difference-steps span,
.roadmap-item p,
.detail-card p,
.flow-node small,
.capability p{
font-size:13px !important;
line-height:1.62 !important;
color:#aab6c9 !important;
}
.section-kicker,
.card-label,
.difference-label,
.phase-label,
.feature-meta span,
.cap-state,
.roadmap-item>span,
.node-kicker,
.orb-caption{
font-size:9px !important;
letter-spacing:.12em !important;
}
.hero-proof span{
font-size:10px !important;
color:#94a2bb !important;
}
.hero-proof strong{
font-size:13px !important;
}
.access-inner{
min-height:0;
}
.signup-card{
width:100%;
}
.form-field input{
min-height:52px;
font-size:16px;
}
.consent-row{
font-size:12px;
}
.privacy-main{
padding-top:92px;
}
.privacy-article h1{
font-size:42px;
}
.privacy-article p{
font-size:15px;
}
.privacy-contact-card strong{
font-size:18px;
}
}
/* v0.9 — everyday Lux homepage */
.everyday-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.everyday-card{min-height:250px;padding:27px;border:1px solid rgba(124,178,255,.13);border-radius:22px;background:radial-gradient(circle at 85% 8%,rgba(63,120,255,.13),transparent 36%),linear-gradient(150deg,rgba(14,23,45,.9),rgba(7,11,22,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:transform .25s,border-color .25s}
.everyday-card:hover{transform:translateY(-4px);border-color:rgba(104,208,255,.28)}
.everyday-card>b{display:inline-block;color:#68ddff;font-size:10px;letter-spacing:.15em}
.everyday-card h3{font-size:21px;line-height:1.22;margin:24px 0 12px;letter-spacing:-.025em}
.everyday-card p{color:#91a0ba;font-size:14px;line-height:1.65;margin:0 0 24px}
.everyday-card small{display:block;color:#596b89;font-size:7px;font-weight:800;letter-spacing:.14em;margin-top:auto}
@media(max-width:900px){.everyday-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.everyday-grid{grid-template-columns:1fr;gap:12px}.everyday-card{min-height:220px}.hero-patent-badge{display:none}}
/* v1.0 — mobile-first homepage polish */
@media(max-width:620px){
.section-shell{width:calc(100% - 32px)}
.site-header{width:calc(100% - 24px);top:8px;margin-top:8px;height:64px;border-radius:18px;padding:0 14px}
.site-header .deluxevo-brand{min-width:0}
.deluxevo-logo{width:145px;max-height:44px}
.menu-button{flex:0 0 40px}
.hero{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;padding:38px 0 64px!important;min-height:0!important}
.hero-copy{width:100%!important;min-width:0!important;display:contents}
.eyebrow{grid-row:1;font-size:9px;letter-spacing:.16em;margin-top:8px}
.hero-patent-badge{display:none!important}
.hero h1{grid-row:2;max-width:100%!important;width:100%!important;font-size:clamp(42px,11.2vw,52px)!important;line-height:1.02!important;letter-spacing:-.052em!important;margin:2px 0 0!important;text-wrap:balance}
.hero-visual{grid-row:3;width:100%!important;min-width:0!important;min-height:0!important;margin:-4px 0 0!important;overflow:visible}
.orb-stage{width:min(88vw,370px)!important;margin-inline:auto!important}
.hero-orb{width:76%;height:76%}
.hero-lead{grid-row:4;max-width:100%!important;width:100%!important;margin:0!important;font-size:16px!important;line-height:1.62!important}
.hero-actions{grid-row:5;display:grid!important;grid-template-columns:1fr!important;gap:10px;margin:4px 0 8px!important;width:100%}
.hero-actions .button{width:100%;min-height:52px}
.hero-proof{grid-row:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:4px}
.hero-proof div{min-width:0;padding:13px 10px;border:1px solid rgba(135,177,255,.10);border-radius:13px;background:rgba(255,255,255,.018)}
.hero-proof strong{font-size:12px!important;line-height:1.25}
.hero-proof span{font-size:8px!important;line-height:1.35;letter-spacing:.07em!important}
.statement{padding:64px 0}
.statement-grid{display:block;margin-top:14px}
.statement h2,.section-heading h2,.continuity h2,.access-inner h2{font-size:36px;line-height:1.06;letter-spacing:-.04em}
.statement-copy{padding-top:10px}
.statement-points{gap:7px;margin-top:20px}
.statement-points span{font-size:7px;padding:7px 9px}
.everyday-grid{margin-top:28px}
.everyday-card{min-height:0;padding:22px;border-radius:18px}
.everyday-card h3{font-size:20px;margin:18px 0 10px}
.everyday-card p{font-size:14px!important;line-height:1.6!important;margin-bottom:18px}
.device-grid{padding:64px 0;gap:14px}
.feature-card{min-height:620px;padding:22px;border-radius:20px}
.feature-card :is(h2,h3){font-size:28px}
.device-showcase{left:18px;right:18px;bottom:64px}
.capabilities,.roadmap{padding:64px 0}
.continuity{padding:64px 0}
.access-inner{padding:26px 20px;border-radius:20px}
.mobile-menu{padding:104px 24px 28px;gap:24px}
.mobile-menu a{font-size:25px}
.site-footer{gap:18px}
}
/* SEO semantics retain the existing display and image sizing. */
.phase-header h3{margin:0;font-weight:700}
.access-card h3{font-weight:700}
picture{display:contents}
picture>source{display:none}
.hero-orb{height:auto}
.hero-copy{min-width:0}
.deluxevo-logo{height:auto}
@media(max-width:620px){.phase-header h3{margin-top:13px}}