/* Raster refinement, 2026-10-09. Loaded after the legacy stylesheet. */
body{font-family:Arial,"Segoe UI",sans-serif}
.browser-frame{max-width:1440px}
.site{background-image:linear-gradient(180deg,rgba(1,8,18,.42),rgba(1,8,18,.88)),url('/assets/img/home/raster/djavdet-background.webp');background-size:cover;background-position:center}
.top{background:rgba(2,10,21,.72)}
.brandtitle{font-weight:700;line-height:1.12}
.hero{height:420px;background:linear-gradient(90deg,rgba(1,8,18,.5),transparent 66%),url('/assets/img/home/raster/hero-approved.webp') center 58%/cover no-repeat}
.hero:after{background:linear-gradient(90deg,rgba(1,8,18,.4),rgba(1,8,18,.18) 36%,transparent 55%);z-index:1}
.copy{top:25px;width:46%;z-index:10}
.hero h1{font-size:54px;line-height:.96;letter-spacing:-.035em;font-weight:700;margin:11px 0 18px}
.hero h1 span{color:#fff;text-shadow:none}
.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:400;color:#aeeeff}
.lead{font-size:17px;line-height:1.38;max-width:465px}
.cta{font-size:16px;font-weight:700;background:linear-gradient(110deg,#00b6ef,#18d9f3);padding:14px 30px;margin-top:20px;border:1px solid #20ddff;box-shadow:0 0 22px #00c9ff55}
.benefits{width:655px;margin-top:37px;gap:17px}
.benefit{font-size:11px;line-height:1.28;gap:10px}
.scene{inset:0;width:100%;height:100%;background:none!important;box-shadow:none;overflow:visible;pointer-events:none}
.scene:before,.scene:after,.mountains,.window-lines,.plant,.keyboard,.desk,.steps,.map,.flow,.idx{display:none}
.mainmon{display:none}
.watch{left:auto;right:0;top:auto;bottom:10px;width:530px;height:58px;transform:none;background:#01121de0;border-color:#145b78;box-shadow:0 4px 16px #0008;border-radius:5px}
.watch .monitor-head{height:18px;font-size:9px;color:#c0eaff}
.watch .rows{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:3px 8px}
.watch .r{display:flex;flex-wrap:wrap;gap:2px;font-size:8px;padding:0;border:0}
.watch .r>span{width:100%;color:#afd1df}
.watch .r em{font-style:normal;font-size:7px;margin-left:3px}
@media(max-width:1100px){.top{grid-template-columns:280px 1fr 120px}.nav{gap:20px}.brandtitle{font-size:16px}}
@media(max-width:1000px){.hero{height:610px;background-position:66% center}.copy{width:100%;top:28px}.hero h1{font-size:48px}.lead{max-width:460px}.benefits{width:min(620px,100%);margin-top:30px}.scene{top:0;opacity:1}.watch{width:min(530px,100%);right:0;bottom:12px}.hero:after{background:linear-gradient(90deg,#010917aa,transparent)}}
@media(max-width:600px){.hero{height:680px;background-position:64% center}.hero:after{background:linear-gradient(180deg,#010917b8 0,#01091775 62%,transparent)}.hero h1{font-size:clamp(30px,8vw,46px);line-height:1.04}.hero h1 span{white-space:normal}.eyebrow{font-size:9px;line-height:1.6}.lead{font-size:16px}.cta{font-size:14px;padding:13px 18px}.benefits{gap:16px 10px;max-width:400px}.top{grid-template-columns:1fr auto}.brandtitle{font-size:14px}.brandmark{width:40px}.brandmark svg{width:38px}.acts{gap:12px}.login{padding:0 14px}.watch{height:83px}.watch .rows{grid-template-columns:repeat(3,1fr);row-gap:5px}}

/* Hero correction after the live capture */
.site{background-image:linear-gradient(180deg,rgba(1,8,18,.74),rgba(1,8,18,.91)),url('/assets/img/home/raster/djavdet-background.webp')}
.benefit{font-size:12px}
.benefit-icon{flex:none}
/* Stage 2: cinematic Djavdet banner */
.banner{min-height:122px;border-radius:9px;grid-template-columns:120px 1fr 205px;padding:10px 20px;background-image:linear-gradient(90deg,rgba(1,11,24,.60),rgba(1,11,24,.36) 55%,rgba(1,11,24,.12)),url('/assets/img/home/raster/djavdet-background.webp');background-position:center 56%;background-size:cover;border-color:#17bdea;box-shadow:inset 0 0 24px #002e5840,0 0 20px #008cff14}
.banner:after{display:none}
.diamond{transform:none;width:98px;height:98px;border:0;background:none;box-shadow:none;margin:0;z-index:2}
.diamond img{width:100%;height:100%;object-fit:contain;display:block}
.btitle{gap:18px}.btitle h2{font-size:28px;font-weight:700}.soon{font-size:11px;padding:5px 13px;background:#00121cc9;box-shadow:0 0 10px #00dfff33}
.bcopy p{font-size:14px;line-height:1.4;color:#e7edf4;max-width:740px}
.more{font-size:14px;font-weight:600;padding:13px 20px;background:#001d33aa;border:1px solid #3fdbff;border-radius:10px;box-shadow:0 0 15px #00bfff55}
@media(max-width:1000px){.banner{grid-template-columns:90px 1fr;gap:12px}.diamond{width:82px;height:82px}.more{grid-column:2;justify-self:start}.bcopy p{font-size:13px}.btitle h2{font-size:25px}}
@media(max-width:600px){.banner{grid-template-columns:62px 1fr;padding:16px 12px}.diamond{width:60px;height:60px}.btitle{gap:10px;flex-wrap:wrap}.btitle h2{font-size:23px}.soon{font-size:9px}.more{padding:10px 16px}}

/* Stage 3: raster direction icons and textured cards */
.diamond{width:108px;height:108px}
.head{margin:15px 0 10px;align-items:center}
.head h2{font-size:26px;font-weight:700}
.head p{font-size:14px;margin-top:4px}
.head a{font-size:13px}
.card{min-height:232px;padding:14px 18px;border-radius:9px;border:1px solid #16c3ed;background-image:linear-gradient(180deg,rgba(2,18,35,.90),rgba(0,18,31,.95)),url('/assets/img/home/raster/hero-approved.webp');background-size:cover;background-position:70% 48%;box-shadow:inset 0 0 28px #007ab91c}
.card:nth-child(2n){background-position:90% 48%}
.card:before{display:none}
.card .ic{width:44px;height:44px;filter:none;text-shadow:none;margin:0 0 5px -5px}
.card .ic img{display:block;width:44px;height:44px;object-fit:contain}
.card h3{font-size:17px;font-weight:700;line-height:1.15;margin-bottom:7px}
.card p{font-size:14px;line-height:1.32;color:#eef4f9;min-height:58px}
.card a{font-size:14px;font-weight:600;margin-top:auto}
.spark,.chartline,.mini-candles{height:43px;margin:10px 0 12px}
.benefit-icon img{width:38px;height:38px;object-fit:contain;display:block}
.benefit-icon{width:38px;height:38px;filter:none}
@media(max-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.head{gap:16px}.head p{font-size:13px}.benefits{max-width:650px}}
@media(max-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.head{align-items:start;flex-direction:column;gap:8px}.card h3{font-size:16px}.card p{font-size:13px}.benefit{font-size:11px}}
@media(max-width:420px){.cards{grid-template-columns:1fr}.card{min-height:220px}.card p{min-height:40px}}

/* Stage 3 correction: preserve the reference's compact five-card row */
.card{padding:12px 18px;min-height:232px}
.card h3{font-size:16px}
.card p{font-size:13.5px;min-height:56px}
.card .ic{width:42px;height:42px;margin-bottom:3px}
.card .ic img{width:42px;height:42px}
.card .spark,.card .chartline,.card .mini-candles{margin-top:8px;margin-bottom:10px}
.benefits{width:690px;grid-template-columns:155px 155px 155px 170px;gap:18px}
/* Stage 4: raster bottom principles */
.foot{margin:15px 0 8px;gap:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.f{padding:9px 14px;font-size:13px;line-height:1.35;gap:12px;border-color:#1387af}
.fi{width:42px;height:42px;display:block;flex:none}
.fi:before{display:none}
.fi img{display:block;width:42px;height:42px;object-fit:contain}
@media(max-width:1000px){.benefits{width:min(650px,100%);grid-template-columns:repeat(2,minmax(0,1fr));max-width:450px}.foot{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}.f:nth-child(2){border-right:0}.f{font-size:12px}}
@media(max-width:600px){.foot{grid-template-columns:1fr;margin-top:20px}.f{border-right:0;border-bottom:1px solid #10506a;padding:12px}.f:last-child{border-bottom:0}.benefits{max-width:390px}}

/* Stage 5: reference proportions and quieter surfaces */
.card{background-image:linear-gradient(180deg,rgba(1,20,37,.95),rgba(0,18,30,.96)),url('/assets/img/home/raster/djavdet-background.webp');background-position:right center}
.head{margin-top:14px;margin-bottom:10px}
.benefits{grid-template-columns:155px 162px 162px 176px;gap:12px;width:691px}
.benefit{gap:8px;font-size:11.5px}
.spark{gap:2px}
.spark i{min-width:0;background:linear-gradient(#06bbef,#0474b4);box-shadow:none}
.mini-candles{gap:3px;align-items:center}
.mini-candles i,.mini-candles i.r{flex:1 1 0;min-width:0;display:block;padding:0;border:0;margin:0;border-radius:0}
.mini-candles i:before{top:-4px;bottom:-4px}
.chartline polyline{stroke-width:1.25;filter:none}
.card a{font-size:13px}
.top .brandmark{filter:drop-shadow(0 0 6px #00dfff40)}
a:focus-visible,button:focus-visible{outline:2px solid #a2efff;outline-offset:5px}
@media(max-width:1000px){.benefits{width:min(450px,100%);grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:600px){.hero .benefits{gap:20px 10px}.benefit{font-size:11px}.hero .watch{opacity:.97}.bcopy p{line-height:1.5}.card{min-height:235px}}

/* Correction from the actual 390px mobile capture */
@media(max-width:600px){
.browser-frame{width:100%;max-width:100%;border-left:0;border-right:0}
.shell{width:calc(100% - 28px)}
.brand{gap:8px;min-width:0}
.brandtitle{font-size:13px}.brandmark{width:34px}.brandmark svg{width:32px}
.acts{gap:10px}.login{height:34px;padding:0 12px;font-size:13px}
.banner{grid-template-columns:60px minmax(0,1fr);gap:12px;padding:16px 12px}
.banner .diamond{width:60px;height:60px;align-self:start;margin-top:4px}
.bcopy{min-width:0}.btitle h2{font-size:22px}
.bcopy p{font-size:13px}
.banner .more{grid-column:1 / -1;justify-self:start;margin-left:72px}
.card{min-width:0}
}