:root{--bg:#090c12;--panel:#101620;--line:#223044;--blue:#20b8ff;--violet:#6f5cff;--text:#eef4fb;--muted:#8291a5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,Segoe UI,Arial,sans-serif;background-image:radial-gradient(circle at 80% 6%,rgba(32,184,255,.08),transparent 23%),radial-gradient(circle at 15% 70%,rgba(111,92,255,.055),transparent 25%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:auto,auto,32px 32px,32px 32px}.noise{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}header{height:82px;position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;padding:0 5vw;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(6,9,14,.78);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:white}.brand img{width:42px;height:48px;object-fit:contain}.brand b,.brand small{display:block;letter-spacing:.14em}.brand b{font-size:13px}.brand small{font-size:8px;color:#7d91a7;margin-top:3px}nav{display:flex;gap:30px;margin:auto}nav a{font-size:11px;color:#8291a5;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;transition:.2s}nav a:hover{color:#fff}.head-actions{display:flex;align-items:center;gap:10px}#lang{border:1px solid #2a394c;background:#0e141e;color:#a8b7c9;border-radius:8px;padding:9px 10px;cursor:pointer}.portal-btn,.primary{background:linear-gradient(135deg,var(--blue),#168fe0);border:1px solid rgba(255,255,255,.12);color:white;text-decoration:none;border-radius:9px;padding:11px 16px;font-weight:750;font-size:12px;box-shadow:0 8px 28px rgba(32,184,255,.14)}main{overflow:hidden}.hero{min-height:850px;padding:150px 7vw 80px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;max-width:1600px;margin:auto}.eyebrow,.num{font-size:10px;letter-spacing:.18em;color:#71859a;font-weight:800}.eyebrow{display:flex;align-items:center;gap:10px;color:#75d8ff}.eyebrow i{width:24px;height:1px;background:var(--blue);box-shadow:0 0 10px var(--blue)}h1{font-size:clamp(55px,6.2vw,104px);line-height:.88;letter-spacing:-.065em;margin:24px 0 28px;font-weight:900}h1 em,h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #5ed0ff;text-shadow:0 0 25px rgba(32,184,255,.1)}.hero-copy>p{max-width:690px;color:#93a3b6;font-size:17px;line-height:1.75}.cta{display:flex;gap:12px;margin:34px 0 42px}.primary{padding:14px 20px;font-size:13px;display:inline-flex;gap:25px;align-items:center}.secondary{padding:14px 20px;color:#b9c5d2;border:1px solid #29384b;border-radius:9px;text-decoration:none;font-size:13px;background:rgba(16,22,32,.7)}.trust{display:flex;gap:0;border-top:1px solid #1c2837;padding-top:25px;max-width:650px}.trust span{padding:0 28px;border-right:1px solid #1d2a39}.trust span:first-child{padding-left:0}.trust b,.trust small{display:block}.trust b{font-size:16px}.trust small{font-size:9px;color:#607287;margin-top:4px;text-transform:uppercase;letter-spacing:.08em}.hero-visual{height:650px;position:relative;display:grid;place-items:center}.orb{position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid rgba(32,184,255,.13);box-shadow:0 0 0 45px rgba(32,184,255,.02),0 0 0 90px rgba(111,92,255,.018),inset 0 0 120px rgba(32,184,255,.045)}.hero-logo{width:min(390px,70%);filter:drop-shadow(0 0 38px rgba(32,184,255,.35));animation:float 5s ease-in-out infinite}.data-card{position:absolute;background:rgba(10,15,23,.88);border:1px solid #284157;border-radius:10px;padding:13px 16px;box-shadow:0 14px 35px rgba(0,0,0,.3);min-width:155px}.data-card small,.data-card b{display:block}.data-card small{font-size:8px;color:#5d7389;letter-spacing:.13em}.data-card b{font-size:11px;margin-top:5px;color:#bdeeff}.data-card i{position:absolute;width:6px;height:6px;border-radius:50%;background:#38e5bd;right:13px;top:15px;box-shadow:0 0 9px #38e5bd}.data-card span{font-size:9px;color:#667b91}.c1{top:24%;left:2%}.c2{bottom:23%;right:-2%}.trace{position:absolute;border-color:rgba(32,184,255,.3);border-style:solid}.t1{width:130px;height:80px;border-width:1px 1px 0 0;top:18%;right:8%}.t2{width:100px;height:100px;border-width:0 0 1px 1px;bottom:14%;left:10%}.ticker{overflow:hidden;border-top:1px solid #182433;border-bottom:1px solid #182433;background:#0c1119;padding:14px 0;white-space:nowrap}.ticker div{font-size:10px;letter-spacing:.17em;color:#52667b;word-spacing:20px}.ticker i{color:var(--blue);font-style:normal}.section{max-width:1500px;margin:auto;padding:120px 7vw}.section-intro{display:grid;grid-template-columns:.5fr 1.5fr 1fr;gap:50px;align-items:start;margin-bottom:55px}h2{font-size:clamp(42px,5vw,76px);line-height:.98;letter-spacing:-.055em;margin:0;font-weight:850}.section-intro p,.dyno-copy p,.portal-head p{color:#8393a7;line-height:1.75;margin:4px 0 0}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{min-height:290px;padding:26px;background:linear-gradient(180deg,rgba(20,27,39,.95),rgba(12,17,25,.96));border:1px solid #223044;border-radius:14px;position:relative;overflow:hidden;transition:.25s}.card:hover{transform:translateY(-5px);border-color:#31516c;box-shadow:0 20px 50px rgba(0,0,0,.25)}.card:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(32,184,255,.55),transparent)}.card>span{position:absolute;right:20px;top:18px;color:#33485d;font-size:11px}.icon{width:48px;height:48px;border:1px solid rgba(32,184,255,.24);background:rgba(32,184,255,.06);display:grid;place-items:center;border-radius:11px;color:#7ad9ff;font-size:24px;margin-bottom:55px}.card h3{font-size:19px}.card p{color:#75869a;font-size:13px;line-height:1.65}.dyno{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center}.dyno-panel{height:500px;background:linear-gradient(145deg,#101925,#0b1018);border:1px solid #223448;border-radius:15px;position:relative;overflow:hidden}.graph{position:absolute;inset:50px 30px 40px}.graph svg{width:100%;height:100%;overflow:visible}.gridline{stroke:#1b2a39;stroke-width:1;fill:none}.curve{stroke:#20b8ff;stroke-width:4;fill:none;filter:drop-shadow(0 0 7px #20b8ff)}.curve.two{stroke:#705cff;stroke-width:2;opacity:.7}.dyno-stamp{position:absolute;right:35px;top:30px;font-size:11px;letter-spacing:.16em;text-align:right;color:#80ddff}.dyno-copy h2{margin:18px 0 25px}.checks{display:grid;gap:12px;margin-top:28px}.checks span{border-bottom:1px solid #1d2937;padding:0 0 12px;color:#20b8ff}.checks b{color:#a8b6c6;font-size:12px;margin-left:8px}.portal{padding-top:150px}.portal-head{text-align:center;max-width:850px;margin:0 auto 55px}.portal-head h2{margin:20px 0}.portal-head p{max-width:720px;margin:auto}.terminal{border:1px solid #284158;border-radius:14px;background:#080d13;box-shadow:0 35px 90px rgba(0,0,0,.35),0 0 70px rgba(32,184,255,.04);overflow:hidden}.terminal-top{height:45px;border-bottom:1px solid #1d2b3a;display:flex;align-items:center;gap:7px;padding:0 16px;color:#566b81;font-size:9px;letter-spacing:.12em}.terminal-top>span{width:7px;height:7px;border-radius:50%;background:#27384a}.terminal-top b{margin-left:12px}.terminal-top i{margin-left:auto;color:#38e5bd;font-style:normal}.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:13px;padding:42px}.flow>i{font-style:normal;color:#294158}.flow-step{padding:18px;border:1px solid #22364a;border-radius:10px;background:#0e151f}.flow-step small,.flow-step b,.flow-step span{display:block}.flow-step small{font-size:9px;color:#4e687f}.flow-step b{font-size:12px;margin:10px 0 5px}.flow-step span{font-size:9px;color:#65798d}.flow-step.active{border-color:#20b8ff;box-shadow:inset 0 0 20px rgba(32,184,255,.06)}.flow-step.done{border-color:#1b725e}.console{border-top:1px solid #1a2836;background:#05080c;padding:18px 25px;display:grid;gap:7px;font:10px Consolas,monospace;color:#4d6378}.console .cyan{color:#69d5ff}.console .green{color:#47dcb9}.portal-features{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;border:1px solid #1e2c3d;border-radius:12px;overflow:hidden}.portal-features div{padding:23px;border-right:1px solid #1e2c3d}.portal-features div:last-child{border:0}.portal-features b,.portal-features span{display:block}.portal-features b{color:#8cddff;font-size:18px}.portal-features span{font-size:10px;color:#63768a;margin-top:6px;text-transform:uppercase;letter-spacing:.08em}.workflow .section-intro{grid-template-columns:.5fr 1.5fr}.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #25374a}.steps article{padding:32px 25px;border-right:1px solid #1e2c3c;min-height:230px}.steps article>b{font:800 34px/1 Arial;color:#172b3b;-webkit-text-stroke:1px #2a536e}.steps h3{margin-top:45px}.steps p{font-size:12px;line-height:1.6;color:#718398}.tech{text-align:center}.tech h2{margin:20px 0 55px}.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #223144;border-radius:13px;overflow:hidden;text-align:left}.tech-grid div{padding:30px;border-right:1px solid #223144;background:rgba(15,21,31,.8)}.tech-grid div:last-child{border:0}.tech-grid small,.tech-grid b{display:block}.tech-grid small{font-size:9px;color:#20b8ff;letter-spacing:.13em;margin-bottom:20px}.tech-grid b{font-size:13px;line-height:1.7;color:#aab7c5}.final-cta{max-width:1400px;margin:50px auto 120px;border:1px solid #294055;border-radius:18px;background:radial-gradient(circle at 20% 50%,rgba(32,184,255,.12),transparent 30%),linear-gradient(135deg,#101824,#0c1119);min-height:470px;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;padding:60px 9%;position:relative;overflow:hidden}.final-cta>img{width:260px;filter:drop-shadow(0 0 35px rgba(32,184,255,.35));opacity:.9}.final-cta h2{font-size:70px;margin:15px 0}.final-cta p{color:#8092a6;max-width:570px;line-height:1.6;margin-bottom:30px}footer{border-top:1px solid #1c2938;padding:35px 6vw;display:flex;align-items:center;gap:30px;color:#53677b;font-size:10px}footer p{margin:auto}.reveal{opacity:0;transform:translateY(22px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}@keyframes float{50%{transform:translateY(-15px)}}@keyframes ticker{to{transform:translateX(-30%)}}@media(max-width:1000px){nav{display:none}.hero{grid-template-columns:1fr;padding-top:130px}.hero-visual{height:500px}.section-intro,.dyno{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}.flow{grid-template-columns:1fr;gap:8px}.flow>i{transform:rotate(90deg);text-align:center}.steps{grid-template-columns:1fr 1fr}.tech-grid{grid-template-columns:1fr 1fr}.final-cta{grid-template-columns:1fr}.final-cta>img{display:none}}@media(max-width:650px){header{padding:0 18px}.brand span{display:none}.portal-btn{padding:10px;font-size:10px}.hero{padding:120px 20px 60px;min-height:auto}.hero h1{font-size:52px}.hero-copy>p{font-size:14px}.cta{flex-direction:column}.trust{display:grid;grid-template-columns:1fr 1fr;gap:20px}.trust span{padding:0;border:0}.hero-visual{height:410px}.orb{width:330px;height:330px}.c1{left:0}.c2{right:0}.section{padding:80px 20px}.section-intro{gap:20px}.cards{grid-template-columns:1fr}.dyno-panel{height:340px}.portal{padding-top:90px}.flow{padding:22px}.portal-features{grid-template-columns:1fr 1fr}.portal-features div:nth-child(2){border-right:0}.steps{grid-template-columns:1fr}.steps article{min-height:auto}.tech-grid{grid-template-columns:1fr}.tech-grid div{border-right:0;border-bottom:1px solid #223144}.final-cta{margin:20px 20px 70px;padding:45px 25px}.final-cta h2{font-size:49px}footer{flex-direction:column;text-align:center}footer p{margin:0}}

/* V1.1 — seamless service ticker + dyno photography */
.ticker{padding:0;overflow:hidden}
.ticker .ticker-track{display:flex;width:max-content;will-change:transform;animation:aeTicker 34s linear infinite}
.ticker .ticker-track>span{display:block;flex:0 0 auto;padding:14px 0;font-size:10px;letter-spacing:.17em;color:#52667b;word-spacing:20px;white-space:nowrap}
.ticker .ticker-track>span+span{padding-left:20px}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes aeTicker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.dyno-photo{isolation:isolate;background:#080d13}
.dyno-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:transform .8s ease,filter .8s ease;filter:saturate(.9) contrast(1.04) brightness(.86)}
.dyno-photo:hover>img{transform:scale(1.018);filter:saturate(.98) contrast(1.05) brightness(.91)}
.dyno-photo-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,9,15,.08) 25%,rgba(4,9,15,.68) 100%),linear-gradient(90deg,rgba(4,9,15,.10),transparent 55%);box-shadow:inset 0 0 70px rgba(3,8,14,.4)}
.dyno-photo:after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(32,184,255,.12);border-radius:15px;box-shadow:inset 0 0 45px rgba(32,184,255,.035)}
.dyno-caption{position:absolute;left:30px;bottom:27px;display:grid;gap:6px;text-shadow:0 2px 14px #000}
.dyno-caption small{font-size:8px;letter-spacing:.18em;color:#72d8ff}
.dyno-caption b{font-size:12px;letter-spacing:.04em;color:#e9f6ff}
@media(prefers-reduced-motion:reduce){.ticker .ticker-track{animation:none}}
@media(max-width:650px){.dyno-photo>img{object-position:58% center}.dyno-caption{left:22px;bottom:20px}}

/* V1.2 — full-pass ticker + corrected dyno stacking */
.ticker{position:relative;height:43px;overflow:hidden;padding:0}
.ticker .ticker-track{position:absolute;left:0;top:0;display:block;width:max-content;animation:aeTickerFull 26s linear infinite;will-change:transform}
.ticker .ticker-track>span{display:block;padding:14px 0;white-space:nowrap}
.ticker .ticker-track>span:nth-child(2){display:none}
@keyframes aeTickerFull{
  0%{transform:translate3d(100vw,0,0)}
  100%{transform:translate3d(-100%,0,0)}
}
.dyno-photo{isolation:isolate}
.dyno-photo>img{z-index:0}
.dyno-photo-shade{z-index:1;pointer-events:none}
.dyno-photo:after{z-index:2}
.dyno-photo .dyno-stamp,.dyno-photo .dyno-caption{z-index:3}
@media(prefers-reduced-motion:reduce){.ticker .ticker-track{animation:none;transform:translate3d(0,0,0)}}

/* V1.3 — force the dyno media column to occupy its full grid track */
.dyno{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.dyno>.dyno-panel{
  display:block;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  justify-self:stretch;
  align-self:center;
}
.dyno>.dyno-copy{min-width:0}
.dyno-photo{contain:paint;isolation:isolate}
.dyno-photo>img{display:block;position:absolute;inset:0;width:100% !important;height:100% !important;max-width:none;object-fit:cover;object-position:center center}
@media(max-width:1000px){
  .dyno{grid-template-columns:minmax(0,1fr)}
  .dyno>.dyno-panel{width:100% !important}
}

/* V1.4 — development media wall: full dyno image + authentic WinOLS views */
.dyno{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:5vw;align-items:center}
.dev-media{min-width:0;width:100%;display:grid;gap:12px}
.dev-dyno{position:relative;width:100%;aspect-ratio:16/9;min-height:0;overflow:hidden;border:1px solid #263b50;border-radius:15px;background:#070b11;box-shadow:0 28px 65px rgba(0,0,0,.3)}
.dev-dyno>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center;background:#080d13;filter:saturate(.92) contrast(1.035) brightness(.86);z-index:0}
.dev-dyno-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,14,.03) 48%,rgba(5,9,14,.55) 100%);box-shadow:inset 0 0 55px rgba(0,0,0,.28)}
.dev-dyno:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:15px;box-shadow:inset 0 0 0 1px rgba(32,184,255,.08),inset 0 0 45px rgba(32,184,255,.025)}
.dev-dyno .dyno-stamp,.dev-dyno .dyno-caption{z-index:3}
.winols-strip{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:12px;min-width:0}
.winols-card{position:relative;margin:0;height:155px;min-width:0;overflow:hidden;border:1px solid #22384d;border-radius:11px;background:#070b11;box-shadow:0 14px 35px rgba(0,0,0,.2)}
.winols-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.86) brightness(.76) contrast(1.08);transition:.35s ease}
.winols-card:hover img{filter:saturate(.98) brightness(.9) contrast(1.05);transform:scale(1.012)}
.winols-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(3,7,12,.88));pointer-events:none}
.winols-card figcaption{position:absolute;z-index:2;left:14px;right:12px;bottom:11px;color:#66d3ff;font-size:7px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 2px 8px #000}
.winols-card figcaption b{display:block;color:#eaf5ff;font-size:10px;letter-spacing:.06em;margin-top:4px}
@media(max-width:1150px){.dyno{grid-template-columns:1fr}.dyno-copy{max-width:760px}.winols-card{height:145px}}
@media(max-width:650px){.dev-dyno{aspect-ratio:4/3}.winols-strip{grid-template-columns:1fr 1fr}.winols-card{height:130px}.winols-wide{grid-column:1/-1;height:165px}.dyno-stamp{right:20px;top:20px}.dyno-caption{left:20px;bottom:18px}}

/* V1.5 — larger development media, only genuine WinOLS captures */
#dyno.dyno{max-width:1600px;grid-template-columns:minmax(620px,1.45fr) minmax(420px,.8fr);gap:5vw;align-items:center}
#dyno .dev-media{width:100%;min-width:620px;display:grid;gap:16px}
#dyno .dev-dyno{width:100%;aspect-ratio:16/9;min-height:360px}
#dyno .dev-dyno>img{object-fit:contain;object-position:center}
#dyno .winols-strip{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;width:100%}
#dyno .winols-card{height:245px;border-radius:13px}
#dyno .winols-card img{object-fit:contain;background:#05080c;filter:saturate(.92) brightness(.84) contrast(1.06)}
#dyno .winols-card figcaption{font-size:8px;left:17px;bottom:14px}
#dyno .winols-card figcaption b{font-size:12px}
#dyno .dyno-copy{min-width:0;max-width:560px}
@media(max-width:1280px){#dyno.dyno{grid-template-columns:minmax(520px,1.2fr) minmax(380px,.8fr);gap:4vw}#dyno .dev-media{min-width:520px}#dyno .dev-dyno{min-height:300px}#dyno .winols-card{height:210px}}
@media(max-width:1050px){#dyno.dyno{grid-template-columns:1fr}#dyno .dev-media{min-width:0}#dyno .dyno-copy{max-width:760px}#dyno .dev-dyno{min-height:0}#dyno .winols-card{height:230px}}
@media(max-width:650px){#dyno .winols-strip{grid-template-columns:1fr}#dyno .winols-card{height:210px}#dyno .dev-dyno{aspect-ratio:16/10}}

/* V1.6 — wide desktop composition shared across the full showcase */
@media (min-width:1051px){
  .section{max-width:1680px;padding-left:5vw;padding-right:5vw}
  #expertise .section-intro{grid-template-columns:120px minmax(560px,1.65fr) minmax(330px,.72fr);gap:42px;margin-bottom:64px}
  #expertise .section-intro p{max-width:430px;font-size:15px}
  #expertise .cards{gap:20px}
  #expertise .card{min-height:320px;padding:30px}
  #expertise .card p{font-size:14px;line-height:1.7}
  #dyno.dyno{max-width:1680px;grid-template-columns:minmax(650px,1.36fr) minmax(470px,.84fr);gap:4.2vw;align-items:center}
  #dyno .dyno-copy{max-width:610px;justify-self:start}
  #portal.portal{max-width:1680px}
  #portal .portal-head{max-width:980px}
  #portal .portal-head p{max-width:820px;font-size:15px}
  #workflow .section-intro{grid-template-columns:120px minmax(0,1fr);gap:42px}
  #workflow .steps article{padding:36px 30px;min-height:245px}
  #workflow .steps p{font-size:13px}
  .tech-grid div{padding:34px 36px}
  .tech-grid b{font-size:14px}
  .final-cta{max-width:1510px;width:calc(100% - 10vw);padding-left:7%;padding-right:7%}
}
@media (min-width:1500px){
  #expertise .section-intro h2{font-size:clamp(64px,4.3vw,82px)}
  #expertise .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  #dyno .dev-dyno{min-height:390px}
  #dyno .winols-card{height:255px}
}

/* V1.7 — two authentic Bapro dyno photographs, natural integration */
#dyno .dyno-photo-pair{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,.72fr);gap:16px;width:100%;min-width:0}
#dyno .dyno-photo-pair .dev-dyno{aspect-ratio:auto;min-height:410px}
#dyno .dev-dyno-main>img{object-fit:cover;object-position:50% 62%;filter:saturate(.92) contrast(1.025) brightness(.84)}
#dyno .dev-dyno-detail>img{object-fit:cover;object-position:50% 56%;filter:saturate(.9) contrast(1.03) brightness(.8)}
#dyno .dyno-photo-pair .dev-dyno-shade{background:linear-gradient(180deg,rgba(4,9,15,.04) 42%,rgba(4,9,15,.55) 100%),linear-gradient(90deg,rgba(5,11,18,.08),transparent 55%);box-shadow:inset 0 0 48px rgba(0,0,0,.24)}
#dyno .dev-dyno-detail .dev-dyno-shade{background:linear-gradient(180deg,rgba(4,9,15,.03) 55%,rgba(4,9,15,.48) 100%);box-shadow:inset 0 0 45px rgba(0,0,0,.22)}
#dyno .detail-tag{position:absolute;z-index:3;left:18px;bottom:16px;color:#73d9ff;font-size:8px;font-weight:800;letter-spacing:.17em;text-shadow:0 2px 10px #000}
@media(max-width:1280px){#dyno .dyno-photo-pair .dev-dyno{min-height:350px}}
@media(max-width:1050px){#dyno .dyno-photo-pair{grid-template-columns:1.45fr .75fr}#dyno .dyno-photo-pair .dev-dyno{min-height:380px}}
@media(max-width:650px){#dyno .dyno-photo-pair{grid-template-columns:1fr;gap:12px}#dyno .dyno-photo-pair .dev-dyno{min-height:0;aspect-ratio:4/3}#dyno .dev-dyno-detail{aspect-ratio:16/10!important}#dyno .dev-dyno-main>img{object-position:50% 58%}}

/* V1.8 — proportional scaling for compact desktop / resized browser windows */
@media (max-width:1350px) and (min-width:1001px){
  .hero{max-width:1240px;min-height:720px;padding:125px 5vw 65px;grid-template-columns:1.12fr .88fr;gap:2vw}
  .hero h1{font-size:clamp(54px,5.45vw,74px);line-height:.9;margin:20px 0 24px}
  .hero-copy>p{max-width:620px;font-size:15px;line-height:1.65}
  .cta{margin:28px 0 34px}
  .trust{max-width:590px;padding-top:20px}
  .trust span{padding:0 22px}
  .hero-visual{height:520px}
  .orb{width:420px;height:420px}
  .hero-logo{width:min(285px,64%)}
  .data-card{transform:scale(.9)}
  .c1{left:1%;top:22%}.c2{right:-1%;bottom:20%}
  .t1{right:4%}.t2{left:6%}
}

@media (max-width:1120px) and (min-width:1001px){
  .hero{grid-template-columns:1.18fr .82fr;padding-left:4vw;padding-right:4vw}
  .hero h1{font-size:clamp(50px,5.25vw,61px)}
  .hero-visual{height:470px}
  .orb{width:370px;height:370px}
  .hero-logo{width:min(245px,62%)}
  .data-card{transform:scale(.82)}
}

/* Tablet/compact desktop: switch earlier to a balanced stacked hero instead of looking zoomed */
@media (max-width:1000px){
  .hero{max-width:820px;margin:auto;padding-left:34px;padding-right:34px;gap:10px}
  .hero h1{font-size:clamp(48px,8vw,72px)}
  .hero-copy>p{max-width:680px}
  .hero-visual{height:440px}
  .orb{width:390px;height:390px}
  .hero-logo{width:min(280px,60%)}
}

@media (max-width:650px){
  .hero{padding-left:20px;padding-right:20px}
  .hero h1{font-size:clamp(42px,13vw,54px)}
  .hero-visual{height:360px}
  .orb{width:min(310px,82vw);height:min(310px,82vw)}
  .hero-logo{width:min(220px,58vw)}
  .data-card{transform:scale(.82)}
}

/* v1.9 — compact desktop scaling. Keep the desktop composition, but scale it down
   progressively with the viewport instead of making a 1100–1300px window look zoomed. */
@media (max-width:1350px) and (min-width:901px){
  header{height:68px;padding-left:3.5vw;padding-right:3.5vw}
  .brand img{width:35px;height:40px}
  nav{gap:18px}
  nav a{font-size:9px}
  .portal-btn{padding:9px 12px;font-size:10px}

  .hero{
    width:100%;max-width:1180px;min-height:620px;
    padding:100px 4vw 45px;
    grid-template-columns:minmax(0,1.16fr) minmax(330px,.84fr);
    gap:1.5vw
  }
  .eyebrow{font-size:8px}
  .hero h1{font-size:clamp(46px,5.05vw,66px);line-height:.88;margin:17px 0 20px}
  .hero-copy>p{font-size:13px;line-height:1.6;max-width:590px}
  .cta{margin:24px 0 28px}
  .primary,.secondary{padding:11px 15px;font-size:11px}
  .trust{max-width:560px;padding-top:18px}
  .trust span{padding:0 20px}
  .trust b{font-size:13px}.trust small{font-size:7px}
  .hero-visual{height:430px}
  .orb{width:360px;height:360px;box-shadow:0 0 0 34px rgba(32,184,255,.02),0 0 0 68px rgba(111,92,255,.018),inset 0 0 90px rgba(32,184,255,.045)}
  .hero-logo{width:min(235px,58%)}
  .data-card{min-width:132px;padding:10px 12px}
  .data-card small{font-size:7px}.data-card b{font-size:9px}.data-card span{font-size:7px}
  .c1{top:22%;left:0}.c2{bottom:18%;right:0}
  .t1{width:100px;height:65px}.t2{width:80px;height:80px}

  .section{padding-top:90px;padding-bottom:90px}
  h2{font-size:clamp(38px,4.4vw,62px)}
  .section-intro{gap:34px;margin-bottom:42px}
  .card{min-height:255px;padding:22px}.icon{margin-bottom:38px}
  .final-cta h2{font-size:clamp(44px,5vw,62px)}
}

/* At compact laptop widths, stay two-column. The old 1000px breakpoint made the
   transition feel like browser zoom because the hero suddenly became very tall. */
@media (max-width:1000px) and (min-width:761px){
  nav{display:none}
  .hero{
    max-width:940px;min-height:570px;padding:92px 32px 42px;
    grid-template-columns:minmax(0,1.18fr) minmax(285px,.82fr);gap:10px
  }
  .hero h1{font-size:clamp(42px,5.7vw,55px)}
  .hero-copy>p{font-size:12px;line-height:1.55}
  .hero-visual{height:390px}
  .orb{width:310px;height:310px}
  .hero-logo{width:min(205px,58%)}
  .data-card{transform:scale(.88)}
  .c1{left:-4%}.c2{right:-4%}
}

/* Only genuinely narrow/tablet portrait widths stack the hero. */
@media (max-width:760px){
  .hero{grid-template-columns:1fr;max-width:680px;min-height:auto;padding-top:105px}
  .hero h1{font-size:clamp(42px,10vw,58px)}
  .hero-visual{height:390px}
}

/* v2.0 — true fluid hero scaling for resized desktop windows.
   This deliberately overrides the older overlapping hero breakpoints above. */
@media (max-width:1200px) and (min-width:701px){
  .hero{
    width:100%; max-width:none; min-height:0;
    padding:92px 3.2vw 44px;
    grid-template-columns:minmax(0,1.22fr) minmax(250px,.78fr);
    gap:2vw;
  }
  .hero-copy{min-width:0}
  .eyebrow{font-size:clamp(6px,.72vw,8px);letter-spacing:.14em}
  .hero h1{
    font-size:clamp(34px,5.15vw,58px)!important;
    line-height:.89; margin:18px 0 20px;
    letter-spacing:-.06em;
  }
  .hero-copy>p{font-size:clamp(10px,1.18vw,13px);line-height:1.58;max-width:54vw}
  .cta{margin:22px 0 26px;gap:10px}
  .primary,.secondary{padding:10px 14px;font-size:clamp(9px,.95vw,11px)}
  .trust{padding-top:17px;max-width:52vw}
  .trust span{padding:0 clamp(10px,1.7vw,19px)}
  .trust b{font-size:clamp(10px,1.15vw,13px)}
  .trust small{font-size:clamp(6px,.65vw,7px)}

  .hero-visual{height:clamp(300px,40vw,430px);min-width:0}
  .orb{width:clamp(250px,31vw,350px);height:clamp(250px,31vw,350px)}
  .hero-logo{width:clamp(150px,20vw,225px)!important;max-width:58%}
  .data-card{min-width:0;width:clamp(105px,12vw,132px);padding:9px 10px}
  .data-card small{font-size:clamp(5px,.58vw,7px)}
  .data-card b{font-size:clamp(7px,.78vw,9px)}
  .data-card span{font-size:clamp(6px,.62vw,7px)}
  .c1{top:21%;left:0}.c2{bottom:16%;right:0}
  .t1{width:clamp(65px,8vw,95px);height:clamp(45px,5.5vw,62px)}
  .t2{width:clamp(55px,7vw,78px);height:clamp(55px,7vw,78px)}
}

/* Small landscape / narrow desktop: shrink first, stack only when truly necessary. */
@media (max-width:900px) and (min-width:701px){
  header{height:60px}
  .hero{padding:78px 18px 34px;grid-template-columns:minmax(0,1.28fr) minmax(220px,.72fr);gap:8px}
  .hero h1{font-size:clamp(32px,5vw,43px)!important}
  .hero-copy>p{max-width:56vw;font-size:10.5px}
  .hero-visual{height:300px}
  .orb{width:240px;height:240px;box-shadow:0 0 0 24px rgba(32,184,255,.02),0 0 0 48px rgba(111,92,255,.018),inset 0 0 70px rgba(32,184,255,.045)}
  .hero-logo{width:150px!important}
  .data-card{width:104px;transform:none!important;padding:8px}
  .c1{left:1%;top:18%}.c2{right:0;bottom:14%}
  .trust{max-width:55vw}
}

@media (max-width:700px){
  .hero{grid-template-columns:1fr;max-width:none;min-height:auto;padding:95px 20px 50px}
  .hero h1{font-size:clamp(39px,12vw,56px)!important}
  .hero-copy>p{max-width:none}
  .trust{max-width:none}
  .hero-visual{height:360px}
}

/* v2.3 — definitive responsive hero fix.
   Important: no CSS zoom and no JS zoom. Each element follows the viewport. */
@media (min-width:701px) and (max-width:1415px){
  .hero{
    width:100%!important; max-width:100%!important; height:auto!important;
    min-height:clamp(540px,62vw,760px)!important;
    padding:clamp(86px,8vw,118px) clamp(24px,5.5vw,78px) clamp(38px,5vw,70px)!important;
    grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr)!important;
    gap:clamp(10px,2vw,32px)!important; margin:0 auto!important;
  }
  .hero-copy{min-width:0!important}
  .hero h1{font-size:clamp(42px,6.15vw,87px)!important;line-height:.88!important;margin:clamp(16px,1.8vw,24px) 0 clamp(18px,2vw,28px)!important}
  .eyebrow{font-size:clamp(7px,.72vw,10px)!important}
  .hero-copy>p{font-size:clamp(11px,1.2vw,17px)!important;line-height:1.7!important;max-width:100%!important}
  .cta{margin:clamp(20px,2.4vw,34px) 0 clamp(24px,3vw,42px)!important}
  .primary,.secondary{padding:clamp(9px,1vw,14px) clamp(12px,1.4vw,20px)!important;font-size:clamp(9px,.92vw,13px)!important}
  .trust{max-width:100%!important;padding-top:clamp(15px,1.8vw,25px)!important}
  .trust span{padding:0 clamp(10px,1.8vw,25px)!important}.trust span:first-child{padding-left:0!important}
  .trust b{font-size:clamp(11px,1.15vw,16px)!important}.trust small{font-size:clamp(6px,.64vw,9px)!important}
  .hero-visual{height:clamp(320px,42vw,594px)!important;min-width:0!important}
  .orb{width:clamp(250px,35vw,495px)!important;height:clamp(250px,35vw,495px)!important}
  .hero-logo{width:clamp(145px,25vw,354px)!important;max-width:62%!important;height:auto!important}
  .data-card{min-width:0!important;width:clamp(104px,11vw,155px)!important;padding:clamp(8px,.9vw,13px) clamp(9px,1.1vw,16px)!important}
  .data-card small{font-size:clamp(5px,.56vw,8px)!important}.data-card b{font-size:clamp(7px,.78vw,11px)!important}.data-card span{font-size:clamp(6px,.64vw,9px)!important}
  .c1{top:24%!important;left:2%!important}.c2{bottom:20%!important;right:0!important}
  .t1{width:clamp(65px,9vw,127px)!important;height:clamp(42px,5.5vw,78px)!important}
  .t2{width:clamp(55px,7vw,99px)!important;height:clamp(55px,7vw,99px)!important}
}
@media (min-width:701px) and (max-width:900px){
  .hero{grid-template-columns:minmax(0,1.12fr) minmax(230px,.88fr)!important;padding-left:18px!important;padding-right:18px!important}
  .hero-logo{width:clamp(145px,22vw,198px)!important}
  .orb{width:clamp(230px,31vw,279px)!important;height:clamp(230px,31vw,279px)!important}
}

/* v2.4 — FIX: actual glowing A logo on narrow/mobile windows.
   Root cause: below 700px the hero switches to one column, but .hero-logo fell back
   to the desktop base rule width:min(390px,70%), making the A grow relative to the viewport.
   Keep the visual compact and explicitly size the A at every narrow breakpoint. */
@media (max-width:700px){
  .hero-visual{
    height:clamp(245px,72vw,330px)!important;
    width:100%!important;
    max-width:420px!important;
    margin:0 auto!important;
  }
  .hero-logo{
    width:clamp(92px,28vw,128px)!important;
    max-width:none!important;
    height:auto!important;
  }
  .orb{
    width:clamp(205px,64vw,285px)!important;
    height:clamp(205px,64vw,285px)!important;
    box-shadow:0 0 0 22px rgba(32,184,255,.02),0 0 0 44px rgba(111,92,255,.018),inset 0 0 70px rgba(32,184,255,.045)!important;
  }
  .data-card{width:clamp(108px,34vw,138px)!important;min-width:0!important;padding:9px 10px!important}
  .data-card small{font-size:6px!important}.data-card b{font-size:8px!important}.data-card span{font-size:6px!important}
  .c1{left:2%!important;top:10%!important}.c2{right:1%!important;bottom:8%!important}
  .t1{width:70px!important;height:48px!important;right:5%!important;top:7%!important}
  .t2{width:65px!important;height:65px!important;left:5%!important;bottom:5%!important}
}
@media (max-width:420px){
  .hero-logo{width:96px!important}
  .orb{width:220px!important;height:220px!important}
  .hero-visual{height:255px!important}
  .data-card{width:112px!important}
}

/* V2.5 — HERO LOGO STABILITY
   The glowing A must NOT scale with viewport width on desktop.
   Keep a stable visual size; only shrink on genuinely narrow/mobile screens. */
@media (min-width:701px){
  .hero-visual .hero-logo{
    width:180px!important;
    max-width:180px!important;
    min-width:180px!important;
    height:auto!important;
  }
  .hero-visual .orb{
    width:440px!important;
    height:440px!important;
  }
}
@media (min-width:701px) and (max-width:1000px){
  .hero-visual .hero-logo{
    width:155px!important;
    max-width:155px!important;
    min-width:155px!important;
  }
  .hero-visual .orb{
    width:360px!important;
    height:360px!important;
  }
}
@media (max-width:700px){
  .hero-visual .hero-logo{
    width:120px!important;
    max-width:120px!important;
    min-width:0!important;
    height:auto!important;
  }
  .hero-visual .orb{
    width:280px!important;
    height:280px!important;
  }
}
@media (max-width:420px){
  .hero-visual .hero-logo{
    width:96px!important;
    max-width:96px!important;
  }
  .hero-visual .orb{
    width:235px!important;
    height:235px!important;
  }
}