:root{--bg:#070a0d;--bg2:#0d1217;--card:#0e151b;--line:#263039;--text:#f4f6f8;--muted:#aab3bb;--silver:#d6d8d9;--silver2:#bfc2c4;--accent:#8aa4ff;--cyan:#82d5ff;--purple:#b58cff;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#070a0d,#0a0f13 58%,#070a0d);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}.wrap{width:min(1280px,calc(100% - 42px));margin:auto}.narrow{width:min(900px,calc(100% - 42px))}.site-header{position:sticky;top:0;z-index:50;background:rgba(7,10,13,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}.header-inner{height:76px;display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;gap:13px;margin-right:auto;font-weight:800;letter-spacing:.04em}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border:1px solid #4b545b;border-radius:12px;background:linear-gradient(145deg,#151a1f,#090c0f);box-shadow:inset 0 1px rgba(255,255,255,.05)}.brand-name{font-size:13px}.main-nav ul{display:flex;list-style:none;gap:28px;margin:0;padding:0;font-size:14px}.main-nav a,.lang-switch a{color:#b8c0c6}.main-nav a:hover,.lang-switch a:hover,.lang-switch a.active{color:#fff}.lang-switch{display:flex;gap:12px;font-size:12px}.eyebrow{font-size:12px;letter-spacing:.18em;color:#9db5ff;font-weight:850;margin-bottom:16px}
.hero-showcase{position:relative;overflow:hidden;min-height:650px;background:#070a0d;display:flex;align-items:stretch}.hero-scene{position:absolute;inset:0;background-image:url(../img/hero-com.webp);background-size:cover;background-position:center center;transform:scale(1.015);filter:saturate(.96) contrast(1.02)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,7,10,.99) 0%,rgba(4,7,10,.95) 22%,rgba(4,7,10,.72) 35%,rgba(4,7,10,.22) 49%,rgba(4,7,10,.02) 70%),linear-gradient(180deg,rgba(3,5,8,.12),rgba(3,5,8,.05) 62%,rgba(3,5,8,.42));pointer-events:none}.hero-stage{position:relative;z-index:2;min-height:650px;display:flex;align-items:center;justify-content:space-between;gap:40px}.hero-copy{width:min(570px,48%);padding:68px 0 62px}.hero h1{font-size:clamp(66px,8vw,118px);line-height:.80;letter-spacing:-.072em;margin:0 0 30px;font-weight:900;text-shadow:0 3px 36px rgba(0,0,0,.34)}.hero h1 span{color:#fff}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#fff,#d3d6d9 56%,#8e99a7);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy p{font-size:19px;color:#c7ced4;max-width:560px;margin:0}.hero-actions{display:flex;gap:12px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:13px 20px;border-radius:11px;font-weight:760;font-size:14px;transition:.22s}.btn-primary{background:rgba(9,15,24,.84);border:1px solid rgba(125,160,255,.86);color:#f3f6ff;box-shadow:0 0 28px rgba(69,107,255,.16),inset 0 1px rgba(255,255,255,.06)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(69,107,255,.28)}.btn-ghost{border:1px solid rgba(255,255,255,.22);color:#e7ecef;background:rgba(3,7,11,.42);backdrop-filter:blur(8px)}.hero-meta{margin-top:25px;padding-left:18px;border-left:1px solid rgba(160,177,255,.65);display:flex;flex-direction:column;gap:3px;color:#c3cad1;font-size:9px;letter-spacing:.22em;font-weight:750}.hero-live{align-self:flex-start;margin-top:42px;display:flex;align-items:end;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(3,7,11,.38);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}.hero-live strong{font-size:42px;line-height:.8;letter-spacing:-.06em}.hero-live span{font-size:8px;letter-spacing:.14em;color:#b4bec6;line-height:1.35}
.silver-band{position:relative;background:linear-gradient(120deg,#d7d8d8,#bfc1c2 50%,#d8d9d8);color:#0d1216;border-top:1px solid #e3e4e4;border-bottom:1px solid #8d9296;box-shadow:inset 0 1px rgba(255,255,255,.85),inset 0 -1px rgba(0,0,0,.18)}.silver-band:before{content:"";position:absolute;inset:0;opacity:.16;background-image:repeating-linear-gradient(105deg,transparent 0 8px,rgba(0,0,0,.14) 9px,transparent 10px 18px);mix-blend-mode:multiply}.silver-grid{position:relative;display:grid;grid-template-columns:1.25fr repeat(3,1fr);align-items:center;min-height:230px}.silver-intro{padding:34px 34px 34px 0;border-right:1px solid rgba(20,24,27,.14)}.silver-intro h2{font-size:30px;line-height:1.02;letter-spacing:-.035em;margin:0 0 14px}.silver-intro p{margin:0;color:#343b40;max-width:340px;font-size:14px}.dark-eye{color:#565d61;margin-bottom:12px}.silver-item{min-height:145px;padding:28px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-right:1px solid rgba(20,24,27,.12)}.silver-item:last-child{border-right:0}.silver-icon{font-size:27px;margin-bottom:12px}.silver-item strong{font-size:13px;letter-spacing:.06em}.silver-item small{margin-top:6px;max-width:220px;color:#565d61;font-size:12px}.intro{padding:84px 0 72px;background:linear-gradient(180deg,#0b1116,#080d11)}.intro p{font-size:27px;line-height:1.48;color:#d5dadd;margin:0}.intro strong{color:#fff}.projects-section{padding:80px 0 100px}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}.section-head h2,.principle h2{font-size:46px;letter-spacing:-.045em;margin:0}.section-copy{color:#8f9aa2;margin:10px 0 0}.filters{display:flex;flex-wrap:wrap;gap:8px}.filter{background:#0d1318;border:1px solid #2d363d;color:#adb5bb;padding:9px 14px;border-radius:999px;cursor:pointer}.filter.active,.filter:hover{background:linear-gradient(180deg,#f2f3f3,#c8ccce);color:#0b0f12;border-color:#d3d6d8}.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.project-card{background:linear-gradient(180deg,#0f161c,#0a1014);border:1px solid rgba(255,255,255,.075);border-radius:22px;overflow:hidden;transition:.28s;box-shadow:0 18px 55px rgba(0,0,0,.18)}.project-card:hover{transform:translateY(-6px);border-color:#58636d;box-shadow:0 28px 70px rgba(0,0,0,.3)}.card-media{height:230px;display:block;overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover;display:block}.project-visual{height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 72% 28%,rgba(144,162,255,.22),transparent 28%),linear-gradient(145deg,#151d24,#0a0f13 65%)}.visual-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(black,transparent)}.visual-disc{position:absolute;width:150px;height:150px;border-radius:50%;right:34px;top:34px;border:1px solid rgba(255,255,255,.22);box-shadow:0 0 50px rgba(135,154,255,.13),inset 0 0 50px rgba(255,255,255,.04)}.visual-panel{position:absolute;width:118px;height:118px;right:50px;top:52px;border-radius:26px;background:linear-gradient(145deg,#d8dbdc,#8d9499 47%,#20272d 48%,#0c1115);transform:rotate(16deg);box-shadow:0 22px 50px rgba(0,0,0,.38)}.visual-mark{position:absolute;right:74px;top:89px;font-size:28px;font-weight:900;z-index:2;letter-spacing:-.05em}.visual-domain{position:absolute;left:18px;bottom:18px;font-size:11px;letter-spacing:.06em;color:#c2cad0}.visual-number{position:absolute;left:18px;top:16px;font-size:10px;color:#71808b;letter-spacing:.18em}.project-2 .project-visual,.project-8 .project-visual{background:radial-gradient(circle at 72% 28%,rgba(99,220,196,.2),transparent 28%),linear-gradient(145deg,#13201f,#09110f 65%)}.project-3 .project-visual,.project-7 .project-visual{background:radial-gradient(circle at 72% 28%,rgba(197,141,255,.20),transparent 28%),linear-gradient(145deg,#1b1822,#0c0a10 65%)}.project-4 .project-visual,.project-10 .project-visual{background:radial-gradient(circle at 72% 28%,rgba(103,175,255,.23),transparent 28%),linear-gradient(145deg,#131d28,#090e14 65%)}.project-5 .project-visual,.project-11 .project-visual{background:radial-gradient(circle at 72% 28%,rgba(255,190,115,.18),transparent 28%),linear-gradient(145deg,#211a13,#100d09 65%)}.project-6 .project-visual,.project-9 .project-visual{background:radial-gradient(circle at 72% 28%,rgba(255,107,107,.16),transparent 28%),linear-gradient(145deg,#211516,#100b0c 65%)}.card-body{padding:22px 22px 20px}.card-top{display:flex;align-items:start;justify-content:space-between;gap:12px}.card-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#6f7d86}.card-top h3{font-size:23px;line-height:1.05;margin:4px 0 0}.badge{font-size:9px;padding:5px 8px;border-radius:999px;background:#1a242a;color:#b8c2c8;white-space:nowrap}.badge.business{background:#4e35a6;color:#f0e9ff}.badge.experiment{background:#5b3922;color:#ffe1c6}.badge.web-project{background:#173f4d;color:#c7f0ff}.card-body p{color:#aab4bb;min-height:74px;margin:18px 0 12px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 20px}.tags span{font-size:9px;border:1px solid #29363e;color:#8fa0aa;border-radius:7px;padding:4px 7px}.card-link{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:750;border-top:1px solid #1d272e;padding-top:16px}.card-link span{font-size:16px}.principle{padding:90px 0 120px;background:linear-gradient(180deg,#080d11,#070a0d)}.principle-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;border-top:1px solid #273038;padding-top:68px}.principle p{font-size:21px;color:#b8c0c6;margin:0;max-width:690px}.site-footer{position:relative;overflow:hidden;min-height:460px;border-top:1px solid #242d34;color:#c5ccd1;background:#07090b}.footer-backdrop{position:absolute;inset:0;opacity:.62;background-image:linear-gradient(180deg,rgba(5,7,9,.42),rgba(5,7,9,.90)),url(../img/footer-com.webp);background-size:cover;background-position:center 48%}.footer-backdrop:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:44px 44px}.footer-desk{position:absolute;left:9%;right:8%;bottom:58px;height:16px;background:linear-gradient(180deg,#30363a,#111518);transform:skewX(-10deg);box-shadow:0 16px 40px #000}.footer-screen{position:absolute;bottom:74px;width:240px;height:145px;border:8px solid #191e22;border-bottom-width:18px;border-radius:8px;background:linear-gradient(145deg,#17222b,#0a0f13);box-shadow:0 0 34px rgba(130,150,255,.11)}.screen-one{right:25%;transform:rotate(-3deg)}.screen-two{right:8%;width:190px;height:120px;transform:rotate(4deg)}.footer-lamp{position:absolute;left:14%;bottom:72px;width:8px;height:175px;background:#252c31;transform:rotate(16deg);transform-origin:bottom}.footer-lamp:before{content:"";position:absolute;width:110px;height:40px;border-radius:50%;background:radial-gradient(ellipse,#dadde0,#5f666b 54%,#111 58%);top:-26px;left:-50px;box-shadow:0 0 70px rgba(240,242,244,.12)}.footer-content{position:relative;z-index:2;padding-top:74px;padding-bottom:24px}.footer-grid{display:flex;justify-content:space-between;gap:30px}.footer-grid strong{font-size:18px}.footer-grid p{margin:8px 0;color:#aab4bb}.footer-links{display:flex;gap:22px}.footer-statement{font-size:clamp(54px,8vw,108px);font-weight:900;letter-spacing:-.07em;line-height:.82;margin:92px 0 54px;text-shadow:0 3px 30px #000}.footer-statement span{color:#9fa7ad}.footer-bottom{font-size:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09);color:#8e989f}.page-shell{padding:80px 0 110px}.content-card{background:#0b1116;border:1px solid #222c33;border-radius:22px;padding:48px}.content-card h1{font-size:56px;letter-spacing:-.045em;margin:0 0 28px}.prose{font-size:18px;color:#c4ccd1}.prose h2{color:#fff;margin-top:38px}@media(max-width:980px){.hero-grid,.principle-grid{grid-template-columns:1fr}.hero-art{min-height:450px}.silver-grid{grid-template-columns:1fr 1fr}.silver-intro{grid-column:1/-1;border-right:0;border-bottom:1px solid rgba(20,24,27,.14);padding-right:0}.showcase-grid{grid-template-columns:repeat(2,1fr)}.main-nav{display:none}.section-head{align-items:start;flex-direction:column}}@media(max-width:650px){.wrap,.narrow{width:min(100% - 28px,1220px)}.brand-name{display:none}.header-inner{height:64px}.hero-showcase{padding-top:58px}.hero h1{font-size:58px}.hero-copy p{font-size:17px}.hero-actions{flex-direction:column;align-items:stretch}.hero-art{min-height:360px}.hero-art:before{inset:42px 4px 18px}.ring-a{width:240px;height:240px}.ring-b{width:170px;height:170px}.art-slab{width:130px;height:130px}.slab-b{width:98px;height:98px}.art-core span{font-size:36px}.art-note{font-size:9px;padding:8px 10px}.note-a{left:8px;top:58px}.note-b{right:0;top:92px}.note-c{left:0;bottom:70px}.note-d{right:8px;bottom:38px}.art-count{display:none}.silver-grid{grid-template-columns:1fr}.silver-intro{grid-column:auto}.silver-item{border-right:0;border-bottom:1px solid rgba(20,24,27,.12)}.intro{padding:58px 0}.intro p{font-size:21px}.showcase-grid{grid-template-columns:1fr}.section-head h2,.principle h2{font-size:36px}.card-body p{min-height:0}.footer-grid{flex-direction:column}.footer-statement{margin-top:120px}.screen-one{right:18%}.screen-two{right:-2%}.footer-lamp{left:16%}.content-card{padding:28px 22px}.content-card h1{font-size:42px}}

/* v0.4 showcase hero + image footer */
.footer-desk,.footer-screen,.footer-lamp{display:none!important}.footer-backdrop{opacity:.78;background-size:cover;background-position:center 55%}.footer-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,9,.40),rgba(5,7,9,.10) 48%,rgba(5,7,9,.38)),linear-gradient(180deg,rgba(4,6,8,.12),rgba(4,6,8,.74))}.footer-content{min-height:460px}.footer-statement{max-width:1050px}
@media(max-width:980px){.hero-showcase,.hero-stage{min-height:610px}.hero-scene{background-position:62% center}.hero-shade{background:linear-gradient(90deg,rgba(4,7,10,.98) 0%,rgba(4,7,10,.90) 30%,rgba(4,7,10,.48) 53%,rgba(4,7,10,.10) 74%),linear-gradient(180deg,rgba(3,5,8,.08),rgba(3,5,8,.30))}.hero-copy{width:56%;padding:56px 0}.hero h1{font-size:clamp(62px,9vw,92px)}.hero-copy p{font-size:17px}.hero-live{display:none}}
@media(max-width:650px){.hero-showcase,.hero-stage{min-height:680px}.hero-scene{background-position:68% center}.hero-shade{background:linear-gradient(90deg,rgba(4,7,10,.98) 0%,rgba(4,7,10,.93) 45%,rgba(4,7,10,.60) 70%,rgba(4,7,10,.30)),linear-gradient(180deg,rgba(3,5,8,.06),rgba(3,5,8,.50) 76%,rgba(3,5,8,.88))}.hero-stage{align-items:flex-end}.hero-copy{width:100%;padding:82px 0 48px}.hero h1{font-size:56px;max-width:360px}.hero-copy p{font-size:16px;max-width:420px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-meta{margin-bottom:2px}.footer-backdrop{background-position:60% center}}

/* v0.4.1 proportion pass: keep the showcase impact, reduce hero dominance */
.hero-showcase,.hero-stage{min-height:540px}
.hero-copy{width:min(520px,45%);padding:50px 0 46px}
.hero h1{font-size:clamp(58px,6.7vw,96px);line-height:.82;margin-bottom:24px}
.hero-copy p{font-size:17px;max-width:520px;line-height:1.52}
.hero-actions{margin-top:24px}
.hero-meta{margin-top:20px}
.hero-live{margin-top:28px;padding:8px 10px}
.hero-live strong{font-size:36px}
.hero-live span{font-size:7px}
@media(max-width:1100px){.hero-showcase,.hero-stage{min-height:520px}.hero-copy{width:49%;padding:44px 0}.hero h1{font-size:clamp(54px,7.2vw,82px)}.hero-copy p{font-size:16px}.hero-live{display:none}}
@media(max-width:980px){.hero-showcase,.hero-stage{min-height:500px}.hero-scene{background-position:63% center}.hero-copy{width:52%;padding:40px 0}.hero h1{font-size:clamp(52px,7.5vw,76px);margin-bottom:20px}.hero-copy p{font-size:16px;line-height:1.48}.hero-actions{margin-top:20px}.hero-meta{margin-top:17px}}
@media(max-width:650px){.hero-showcase,.hero-stage{min-height:610px}.hero-stage{align-items:flex-end}.hero-copy{width:100%;padding:70px 0 38px}.hero h1{font-size:52px;max-width:350px}.hero-copy p{font-size:15px;max-width:400px}.hero-actions{gap:9px}.hero-meta{margin-top:16px}}

/* v0.5.0 layout hierarchy + portfolio visual pass */
.site-header{position:relative;top:auto;background:#070a0d;backdrop-filter:none}
.header-inner{height:70px}
.wrap{width:min(1360px,calc(100% - 48px))}.wide-wrap{width:min(1480px,calc(100% - 48px));margin:auto}
.hero-showcase,.hero-stage{min-height:445px}
.hero-scene{transform:none;background-size:cover;background-position:center 48%}
.hero-shade{background:linear-gradient(90deg,rgba(4,7,10,.995) 0%,rgba(4,7,10,.97) 20%,rgba(4,7,10,.78) 31%,rgba(4,7,10,.28) 45%,rgba(4,7,10,.03) 68%),linear-gradient(180deg,rgba(3,5,8,.05),rgba(3,5,8,.14) 64%,rgba(3,5,8,.42))}
.hero-copy{width:min(470px,38%);padding:34px 0 32px}
.hero h1{font-size:clamp(54px,5.5vw,84px);line-height:.82;margin-bottom:18px}
.hero-copy p{font-size:16px;line-height:1.48;max-width:460px}
.hero-actions{margin-top:19px}.hero-meta{margin-top:16px}.hero-live{margin-top:24px;transform:scale(.9);transform-origin:top right}
.projects-section{padding:60px 0 84px;background:linear-gradient(180deg,#080d11,#090e12 65%,#080c10)}
.portfolio-intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:end;padding:0 0 28px;border-bottom:1px solid #242d34;margin-bottom:22px}
.portfolio-intro h2{font-size:48px;letter-spacing:-.045em;line-height:1;margin:0}.portfolio-intro p{font-size:21px;line-height:1.52;color:#b9c2c8;margin:0;max-width:760px}.portfolio-intro strong{color:#fff}
.compact-head{margin-bottom:26px;align-items:center}.compact-head .section-copy{margin:0}.showcase-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.project-card{border-radius:18px}.card-media{height:178px;background:#0c1115}.card-media img{transition:transform .35s ease,filter .35s ease;filter:saturate(.94) contrast(1.03)}.project-card:hover .card-media img{transform:scale(1.025);filter:saturate(1.02) contrast(1.05)}
.card-body{padding:18px 18px 17px}.card-top h3{font-size:20px}.card-body p{font-size:13px;line-height:1.55;min-height:61px;margin:14px 0 10px}.tags{margin:10px 0 15px}.card-link{padding-top:13px}.badge{font-size:8px}.card-kicker{font-size:8px}
.principle{padding:76px 0 88px}.principle-grid{padding-top:54px}.principle p{font-size:19px}
.prefooter-band .silver-grid{min-height:154px}.prefooter-band .silver-intro{padding:22px 28px 22px 0}.prefooter-band .silver-intro h2{font-size:25px;margin-bottom:9px}.prefooter-band .silver-intro p{font-size:12px}.prefooter-band .silver-item{min-height:110px;padding:18px}.prefooter-band .silver-icon{font-size:23px;margin-bottom:8px}.prefooter-band .silver-item small{font-size:11px}
.site-footer{min-height:360px}.footer-content{min-height:360px;padding-top:54px}.footer-statement{font-size:clamp(48px,6.2vw,82px);margin:64px 0 40px;max-width:900px}.footer-backdrop{background-position:center 52%}
@media(max-width:1260px){.showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-copy{width:43%}.hero h1{font-size:clamp(52px,6.2vw,78px)}}
@media(max-width:980px){.wrap,.wide-wrap{width:min(100% - 36px,1360px)}.hero-showcase,.hero-stage{min-height:430px}.hero-copy{width:50%;padding:28px 0}.hero h1{font-size:clamp(50px,7.1vw,70px)}.hero-scene{background-position:61% center}.portfolio-intro{grid-template-columns:1fr;gap:18px}.portfolio-intro p{font-size:18px}.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.prefooter-band .silver-grid{grid-template-columns:1fr 1fr}.prefooter-band .silver-intro{grid-column:1/-1;padding:22px 0;border-right:0;border-bottom:1px solid rgba(20,24,27,.14)}}
@media(max-width:650px){.header-inner{height:62px}.hero-showcase,.hero-stage{min-height:520px}.hero-stage{align-items:flex-end}.hero-copy{width:100%;padding:60px 0 30px}.hero h1{font-size:48px}.hero-scene{background-position:66% center}.projects-section{padding:46px 0 66px}.portfolio-intro h2{font-size:38px}.portfolio-intro p{font-size:17px}.showcase-grid{grid-template-columns:1fr}.card-media{height:205px}.prefooter-band .silver-grid{grid-template-columns:1fr}.prefooter-band .silver-intro{grid-column:auto}.site-footer{min-height:330px}.footer-content{min-height:330px}.footer-statement{font-size:46px;margin-top:74px}}


/* v0.5.1 hero framing pass: preserve source sharpness, anchor visual to the right */
.hero-showcase{min-height:420px;background:#070a0d}
.hero-stage{min-height:420px}
.hero-scene{
  inset:0 0 0 auto;
  width:min(1600px,82vw);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:right center;
  transform:none;
  filter:saturate(.98) contrast(1.025);
}
.hero-shade{
  background:
    linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.995) 18%,rgba(7,10,13,.94) 28%,rgba(7,10,13,.63) 40%,rgba(7,10,13,.18) 54%,rgba(7,10,13,0) 68%),
    linear-gradient(180deg,rgba(3,5,8,.02),rgba(3,5,8,.08) 72%,rgba(3,5,8,.24));
}
.hero-copy{width:min(445px,35%);padding:27px 0 26px}
.hero h1{font-size:clamp(50px,5vw,76px);margin-bottom:16px}
.hero-copy p{font-size:15px;max-width:430px}
.hero-actions{margin-top:17px}
.hero-meta{margin-top:14px}
.hero-live{margin-top:19px;transform:scale(.82);transform-origin:top right}
@media(max-width:1260px){
  .hero-showcase,.hero-stage{min-height:405px}
  .hero-scene{width:min(1360px,86vw)}
  .hero-copy{width:39%}
  .hero h1{font-size:clamp(49px,5.7vw,72px)}
}
@media(max-width:980px){
  .hero-showcase,.hero-stage{min-height:400px}
  .hero-scene{width:92vw;background-position:right center}
  .hero-shade{background:linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.98) 27%,rgba(7,10,13,.72) 46%,rgba(7,10,13,.18) 70%,rgba(7,10,13,0)),linear-gradient(180deg,rgba(3,5,8,.02),rgba(3,5,8,.16))}
  .hero-copy{width:46%;padding:24px 0}
  .hero h1{font-size:clamp(47px,6.8vw,66px)}
}
@media(max-width:650px){
  .hero-showcase,.hero-stage{min-height:505px}
  .hero-scene{width:100%;background-size:auto 78%;background-position:72% top}
  .hero-shade{background:linear-gradient(180deg,rgba(7,10,13,.08) 0%,rgba(7,10,13,.30) 42%,rgba(7,10,13,.92) 68%,#070a0d 100%),linear-gradient(90deg,rgba(7,10,13,.62),rgba(7,10,13,.12) 80%)}
  .hero-stage{align-items:flex-end}
  .hero-copy{width:100%;padding:190px 0 28px}
  .hero h1{font-size:46px}
}


/* v0.5.3 hero framing fix: sharp right-side scene, no central dead zone */
.hero-showcase,.hero-stage{min-height:405px}
.hero-scene{
  inset:0 0 0 auto;
  width:min(1600px,76vw);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center 58%;
  transform:none;
  filter:saturate(.98) contrast(1.025);
}
.hero-shade{
  background:
    linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.995) 15%,rgba(7,10,13,.96) 22%,rgba(7,10,13,.78) 29%,rgba(7,10,13,.42) 36%,rgba(7,10,13,.12) 45%,rgba(7,10,13,0) 56%),
    linear-gradient(180deg,rgba(3,5,8,.02),rgba(3,5,8,.06) 72%,rgba(3,5,8,.18));
}
.hero-copy{width:min(455px,38%);padding:24px 0}
.hero h1{font-size:clamp(50px,5vw,74px);margin-bottom:15px}
.hero-copy p{font-size:15px;max-width:440px}
.hero-live{display:none!important}
@media(max-width:1260px){
  .hero-showcase,.hero-stage{min-height:395px}
  .hero-scene{width:79vw;background-size:cover;background-position:center 58%}
  .hero-copy{width:41%}
}
@media(max-width:980px){
  .hero-showcase,.hero-stage{min-height:390px}
  .hero-scene{width:84vw;background-size:cover;background-position:center 58%}
  .hero-copy{width:47%;padding:22px 0}
  .hero-shade{background:linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.98) 23%,rgba(7,10,13,.78) 38%,rgba(7,10,13,.28) 55%,rgba(7,10,13,0) 72%),linear-gradient(180deg,rgba(3,5,8,.02),rgba(3,5,8,.16))}
}
@media(max-width:650px){
  .hero-showcase,.hero-stage{min-height:500px}
  .hero-scene{width:100%;background-size:auto 76%;background-position:72% top}
  .hero-shade{background:linear-gradient(180deg,rgba(7,10,13,.08) 0%,rgba(7,10,13,.30) 42%,rgba(7,10,13,.92) 68%,#070a0d 100%),linear-gradient(90deg,rgba(7,10,13,.62),rgba(7,10,13,.12) 80%)}
  .hero-copy{width:100%;padding:184px 0 26px}
  .hero h1{font-size:46px}
}


/* v0.5.4 hero scene pass: dedicated right-side visual, full scene visible */
.hero-showcase,.hero-stage{min-height:390px}
.hero-scene{
  inset:0 0 0 auto;
  width:min(1160px,64vw);
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-position:right center;
  transform:none;
  filter:saturate(.99) contrast(1.025);
}
.hero-shade{
  background:
    linear-gradient(90deg,#070a0d 0%,#070a0d 18%,rgba(7,10,13,.98) 27%,rgba(7,10,13,.84) 35%,rgba(7,10,13,.48) 44%,rgba(7,10,13,.14) 53%,rgba(7,10,13,0) 62%),
    linear-gradient(180deg,rgba(3,5,8,.02),rgba(3,5,8,.03) 74%,rgba(3,5,8,.12));
}
.hero-copy{width:min(470px,40%);padding:20px 0}
.hero h1{font-size:clamp(50px,4.85vw,72px);margin-bottom:14px}
.hero-copy p{font-size:15px;max-width:440px}
.hero-actions{margin-top:16px}.hero-meta{margin-top:13px}
@media(max-width:1260px){
  .hero-showcase,.hero-stage{min-height:382px}
  .hero-scene{width:66vw;background-size:auto 100%;background-position:right center}
  .hero-copy{width:42%}
}
@media(max-width:980px){
  .hero-showcase,.hero-stage{min-height:380px}
  .hero-scene{width:72vw;background-size:auto 100%;background-position:right center}
  .hero-copy{width:46%;padding:18px 0}
  .hero-shade{background:linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.98) 24%,rgba(7,10,13,.82) 39%,rgba(7,10,13,.28) 56%,rgba(7,10,13,0) 70%),linear-gradient(180deg,rgba(3,5,8,.02),rgba(3,5,8,.10))}
}
@media(max-width:650px){
  .hero-showcase,.hero-stage{min-height:500px}
  .hero-scene{width:100%;background-size:auto 70%;background-position:78% top}
  .hero-shade{background:linear-gradient(180deg,rgba(7,10,13,.06) 0%,rgba(7,10,13,.28) 40%,rgba(7,10,13,.94) 68%,#070a0d 100%),linear-gradient(90deg,rgba(7,10,13,.42),rgba(7,10,13,.05) 82%)}
  .hero-copy{width:100%;padding:178px 0 26px}
  .hero h1{font-size:46px}
}

/* v0.5.5 desktop-only hero balance: keep tablet framing, pull the scene left without heavy upscaling */
@media(min-width:1261px){
  .hero-scene{
    width:min(1320px,69vw);
    background-size:cover;
    background-position:center 58%;
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#070a0d 0%,#070a0d 16%,rgba(7,10,13,.985) 24%,rgba(7,10,13,.86) 32%,rgba(7,10,13,.54) 40%,rgba(7,10,13,.18) 49%,rgba(7,10,13,0) 59%),
      linear-gradient(180deg,rgba(3,5,8,.02),rgba(3,5,8,.03) 74%,rgba(3,5,8,.12));
  }
}


/* v0.5.6 desktop hero composition: extend scene left while preserving source detail */
@media(min-width:1261px){
  .hero-scene{
    width:76vw;
    right:0;
    background-size:auto 130%;
    background-position:right center;
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#070a0d 0%,#070a0d 13%,rgba(7,10,13,.99) 20%,rgba(7,10,13,.90) 28%,rgba(7,10,13,.64) 36%,rgba(7,10,13,.28) 44%,rgba(7,10,13,.06) 52%,rgba(7,10,13,0) 60%),
      linear-gradient(180deg,rgba(3,5,8,.02),rgba(3,5,8,.03) 74%,rgba(3,5,8,.10));
  }
}


/* v0.5.7 desktop hero architecture: real image layer, native ratio, soft left mask */
.hero-scene-img{display:none}
@media(min-width:1261px){
  .hero-showcase,.hero-stage{min-height:390px}
  .hero-scene{display:none}
  .hero-scene-img{
    display:block;
    position:absolute;
    z-index:0;
    top:50%;
    right:0;
    width:min(68vw,1280px);
    height:auto;
    max-height:390px;
    transform:translateY(-50%);
    object-fit:contain;
    object-position:right center;
    filter:saturate(.99) contrast(1.025);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 5%,rgba(0,0,0,.72) 13%,#000 22%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 5%,rgba(0,0,0,.72) 13%,#000 22%,#000 100%);
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.98) 18%,rgba(7,10,13,.72) 28%,rgba(7,10,13,.24) 37%,rgba(7,10,13,0) 46%),
      linear-gradient(180deg,rgba(3,5,8,.01),rgba(3,5,8,.03) 74%,rgba(3,5,8,.08));
  }
  .hero-copy{width:min(455px,34%);padding:20px 0}
  .hero h1{font-size:clamp(50px,4.65vw,70px)}
}

/* v0.5.8 desktop hero balance: reveal the scene earlier without pushing or heavily scaling it */
@media(min-width:1261px){
  .hero-scene-img{
    width:min(70vw,1340px);
    right:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.46) 3%,rgba(0,0,0,.88) 8%,#000 14%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.46) 3%,rgba(0,0,0,.88) 8%,#000 14%,#000 100%);
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.97) 15%,rgba(7,10,13,.66) 24%,rgba(7,10,13,.18) 32%,rgba(7,10,13,0) 39%),
      linear-gradient(180deg,rgba(3,5,8,.01),rgba(3,5,8,.03) 74%,rgba(3,5,8,.08));
  }
}

/* v0.5.9 desktop hero wide-asset pass */
@media(min-width:1261px){
  .hero-scene-img{
    width:min(74vw,1360px);
    max-height:390px;
    right:0;
    object-fit:contain;
    object-position:right center;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 3%,rgba(0,0,0,.92) 8%,#000 13%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 3%,rgba(0,0,0,.92) 8%,#000 13%,#000 100%);
  }
  .hero-shade{
    background:linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.96) 12%,rgba(7,10,13,.58) 21%,rgba(7,10,13,.12) 29%,rgba(7,10,13,0) 35%),linear-gradient(180deg,rgba(3,5,8,.01),rgba(3,5,8,.03) 74%,rgba(3,5,8,.08));
  }
}

/* v0.6.0 desktop hero master: balanced split, preserve English scene */
@media(min-width:1261px){
  .hero-showcase,.hero-stage{min-height:400px;height:400px}
  .hero-scene{display:none!important}
  .hero-scene-img{
    display:block;
    position:absolute;
    z-index:0;
    inset:0 0 0 auto;
    width:69vw;
    max-width:none;
    height:100%;
    max-height:none;
    transform:none;
    object-fit:cover;
    object-position:center 54%;
    filter:saturate(.99) contrast(1.025);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.36) 3%,rgba(0,0,0,.82) 8%,#000 14%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.36) 3%,rgba(0,0,0,.82) 8%,#000 14%,#000 100%);
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#070a0d 0%,#070a0d 17%,rgba(7,10,13,.94) 24%,rgba(7,10,13,.62) 31%,rgba(7,10,13,.18) 38%,rgba(7,10,13,0) 45%),
      linear-gradient(180deg,rgba(3,5,8,.01),rgba(3,5,8,.02) 76%,rgba(3,5,8,.08));
  }
  .hero-stage{align-items:center}
  .hero-copy{width:min(470px,34%);padding:18px 0}
  .hero h1{font-size:clamp(47px,4.25vw,65px);margin-bottom:14px}
  .hero-copy p{font-size:14.5px;max-width:445px}
  .hero-actions{margin-top:16px}
  .hero-meta{margin-top:13px}
}


/* v0.6.2 hero framing pass: keep the approved v0.6.0 artwork, only reduce and reframe it */
@media (min-width:1261px){
  .hero-showcase,.hero-stage{
    min-height:400px;
    height:400px;
  }
  .hero-scene{display:none!important}
  .hero-scene-img{
    display:block;
    position:absolute;
    z-index:0;
    top:50%;
    right:0;
    inset:auto 0 auto auto;
    width:66vw;
    max-width:none;
    height:auto;
    max-height:none;
    transform:translateY(-50%);
    object-fit:contain;
    object-position:right center;
    filter:saturate(.99) contrast(1.025);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.36) 3%,rgba(0,0,0,.84) 8%,#000 14%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.36) 3%,rgba(0,0,0,.84) 8%,#000 14%,#000 100%);
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#070a0d 0%,#070a0d 16%,rgba(7,10,13,.95) 23%,rgba(7,10,13,.62) 30%,rgba(7,10,13,.18) 37%,rgba(7,10,13,0) 44%),
      linear-gradient(180deg,rgba(3,5,8,.01),rgba(3,5,8,.02) 76%,rgba(3,5,8,.08));
  }
  .hero-stage{align-items:center}
  .hero-copy{width:min(470px,35%);padding:18px 0}
  .hero h1{font-size:clamp(50px,4.55vw,68px);margin-bottom:14px}
  .hero-copy p{font-size:14.5px;max-width:445px}
}


/* v0.6.3 desktop-only hero vertical alignment fix. Tablet/mobile intentionally unchanged. */
@media (min-width:1261px){
  .hero-scene-img{
    top:57%;
    width:66vw;
    right:0;
    transform:translateY(-50%);
  }
}

/* v0.6.4 desktop hero normalization: identical visual height on DE/COM; tablet/mobile unchanged */
@media (min-width:1261px){
  .hero-showcase,.hero-stage{min-height:400px;height:400px}
  .hero-scene-img{
    display:block;
    position:absolute;
    z-index:0;
    top:58%;
    right:0;
    inset:auto 0 auto auto;
    width:auto;
    height:350px;
    max-width:none;
    max-height:350px;
    transform:translateY(-50%);
    object-fit:contain;
    object-position:right center;
    filter:saturate(.99) contrast(1.025);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.34) 4%,rgba(0,0,0,.82) 10%,#000 16%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.34) 4%,rgba(0,0,0,.82) 10%,#000 16%,#000 100%);
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#070a0d 0%,#070a0d 18%,rgba(7,10,13,.95) 25%,rgba(7,10,13,.58) 32%,rgba(7,10,13,.14) 39%,rgba(7,10,13,0) 46%),
      linear-gradient(180deg,rgba(3,5,8,.01),rgba(3,5,8,.02) 78%,rgba(3,5,8,.08));
  }
}


/* v0.6.5 desktop hero reset: same source ratio and one authoritative geometry on DE + COM.
   Tablet/mobile rules remain untouched. */
@media (min-width:1261px){
  .hero-showcase,.hero-stage{
    min-height:400px!important;
    height:400px!important;
  }
  .hero-scene{display:none!important;}
  .hero-scene-img{
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    top:59%!important;
    right:0!important;
    bottom:auto!important;
    left:auto!important;
    inset:auto 0 auto auto!important;
    width:min(44vw,760px)!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    transform:translateY(-50%)!important;
    object-fit:contain!important;
    object-position:right center!important;
    filter:saturate(.99) contrast(1.025)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 4%,rgba(0,0,0,.88) 10%,#000 17%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 4%,rgba(0,0,0,.88) 10%,#000 17%,#000 100%)!important;
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#070a0d 0%,#070a0d 20%,rgba(7,10,13,.96) 27%,rgba(7,10,13,.62) 34%,rgba(7,10,13,.18) 41%,rgba(7,10,13,0) 48%),
      linear-gradient(180deg,rgba(3,5,8,.01),rgba(3,5,8,.02) 78%,rgba(3,5,8,.08))!important;
  }
  .hero-stage{align-items:center!important;}
}


/* v0.6.6 CANONICAL DESKTOP HERO
   Desktop is deliberately isolated from the accumulated legacy hero image rules.
   Tablet/mobile continue to use .hero-scene unchanged. */
.hero-desktop-visual{display:none}
@media (min-width:1261px){
  .hero-showcase,.hero-stage{
    min-height:400px!important;
    height:400px!important;
  }
  .hero-scene{display:none!important}
  .hero-scene-img{display:none!important}
  .hero-desktop-visual{
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    right:0!important;
    top:53%!important;
    width:auto!important;
    height:420px!important;
    max-width:none!important;
    max-height:none!important;
    transform:translateY(-50%)!important;
    object-fit:contain!important;
    object-position:right center!important;
    filter:saturate(.99) contrast(1.025)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 6%,#000 15%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 6%,#000 15%,#000 100%)!important;
  }
  .hero-shade{
    background:
      linear-gradient(90deg,#070a0d 0%,#070a0d 24%,rgba(7,10,13,.97) 31%,rgba(7,10,13,.70) 38%,rgba(7,10,13,.28) 44%,rgba(7,10,13,0) 51%),
      linear-gradient(180deg,rgba(3,5,8,.01),rgba(3,5,8,.015) 78%,rgba(3,5,8,.07))!important;
  }
  .hero-stage{align-items:center!important}
  .hero-copy{width:min(470px,35%)!important;padding:18px 0!important}
}


/* v0.7.0 CLEAN HERO REBUILD — isolated from all legacy hero rules */
.dr7-hero{position:relative;overflow:hidden;background:#070a0d;border-bottom:1px solid rgba(255,255,255,.045)}
.dr7-hero-grid{min-height:390px;display:grid;grid-template-columns:minmax(330px,.78fr) minmax(620px,1.42fr);gap:clamp(24px,4vw,68px);align-items:center;padding:28px 0 30px}
.dr7-hero-copy{position:relative;z-index:2;max-width:470px}
.dr7-hero-copy h1{font-size:clamp(54px,4.8vw,74px);line-height:.82;letter-spacing:-.068em;margin:0 0 16px;font-weight:900;text-shadow:0 3px 28px rgba(0,0,0,.28)}
.dr7-hero-copy h1 span{color:#fff}.dr7-hero-copy h1 em{font-style:normal;background:linear-gradient(90deg,#fff,#d3d6d9 56%,#8e99a7);-webkit-background-clip:text;background-clip:text;color:transparent}
.dr7-hero-copy p{font-size:15px;line-height:1.52;color:#c7ced4;max-width:455px;margin:0}
.dr7-hero-copy .hero-actions{margin-top:18px}.dr7-hero-copy .hero-meta{margin-top:14px}
.dr7-hero-media{position:relative;min-width:0;align-self:center;overflow:visible}
.dr7-hero-media:before{content:"";position:absolute;z-index:2;left:-1px;top:0;bottom:0;width:15%;background:linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.72) 34%,rgba(7,10,13,0) 100%);pointer-events:none}
.dr7-hero-media img{display:block;width:100%;height:auto;aspect-ratio:1280/589;object-fit:contain;object-position:center center;filter:saturate(.99) contrast(1.025);transform:none}
@media(min-width:1450px){.dr7-hero-grid{grid-template-columns:minmax(360px,.72fr) minmax(720px,1.48fr);min-height:400px}.dr7-hero-media{margin-right:-34px}.dr7-hero-copy h1{font-size:74px}}
@media(max-width:1180px){.dr7-hero-grid{grid-template-columns:minmax(320px,.85fr) minmax(540px,1.25fr);gap:28px;min-height:380px}.dr7-hero-copy h1{font-size:clamp(50px,5.7vw,68px)}}
@media(max-width:900px){.dr7-hero-grid{grid-template-columns:minmax(300px,.9fr) minmax(440px,1.1fr);gap:18px;min-height:365px;padding:22px 0 24px}.dr7-hero-copy h1{font-size:clamp(48px,6vw,62px)}.dr7-hero-copy p{font-size:14px}.dr7-hero-media:before{width:11%}}
@media(max-width:720px){.dr7-hero-grid{display:flex;flex-direction:column-reverse;align-items:stretch;gap:0;padding:0 0 28px;min-height:0}.dr7-hero-media{margin:0 -21px 18px;overflow:hidden}.dr7-hero-media:before{display:none}.dr7-hero-media img{width:100%;aspect-ratio:1280/589;object-fit:cover;object-position:center center}.dr7-hero-copy{max-width:none}.dr7-hero-copy h1{font-size:48px}.dr7-hero-copy p{font-size:15px}.dr7-hero-copy .hero-actions{flex-direction:column;align-items:flex-start;gap:9px}}

/* v0.7.2 TABLET HERO SCALE PASS — desktop and mobile intentionally untouched */
@media (min-width:721px) and (max-width:1180px){
  .dr7-hero-grid{
    grid-template-columns:minmax(300px,40%) minmax(0,60%);
    gap:0;
    min-height:500px;
    padding:24px 0 26px;
    align-items:stretch;
  }
  .dr7-hero-copy{
    align-self:center;
    max-width:500px;
    padding-right:16px;
  }
  .dr7-hero-copy h1{
    font-size:clamp(52px,6.4vw,72px);
    margin-bottom:18px;
  }
  .dr7-hero-copy p{
    font-size:15px;
    line-height:1.5;
    max-width:470px;
  }
  .dr7-hero-media{
    align-self:center;
    margin-left:-58px;
    margin-right:-34px;
    padding-top:0;
    overflow:visible;
  }
  .dr7-hero-media:before{
    width:11%;
    background:linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.62) 32%,rgba(7,10,13,0) 100%);
  }
  .dr7-hero-media img{
    width:124%;
    max-width:none;
    height:auto;
    aspect-ratio:1280/589;
    object-fit:contain;
    object-position:left center;
  }
}

/* v0.7.4 NORMALIZED HERO TABLET POSITION — same geometry on DE/COM; desktop/mobile untouched */
@media (min-width:721px) and (max-width:1180px){
  .dr7-hero-media{
    margin-left:-112px;
    margin-right:-34px;
  }
}


/* v0.7.5 TABLET HERO CROP PASS — preserve scale, crop more of the left side so the right side remains visible. Desktop/mobile untouched. */
@media (min-width:721px) and (max-width:1180px){
  .dr7-hero-media img{
    transform:translateX(-10%);
    transform-origin:center center;
  }
}


/* v0.7.6 TABLET HERO FINAL POSITION PASS — theme-specific tablet refinement; desktop/mobile untouched. */
@media (min-width:721px) and (max-width:1180px){
  .dr7-hero-copy{position:relative;z-index:3;padding-right:20px}
  .dr7-hero-media{position:relative;z-index:1;overflow:hidden;margin-left:-128px;margin-right:0}
  .dr7-hero-media:before{z-index:2;width:19%;background:linear-gradient(90deg,#070a0d 0%,rgba(7,10,13,.95) 22%,rgba(7,10,13,.80) 46%,rgba(7,10,13,.42) 66%,rgba(7,10,13,0) 100%)}
  .dr7-hero-media img{width:124%;max-width:none;transform:translateX(-16%);transform-origin:center center}
}


/* v0.8.0 PROJECT DETAIL SYSTEM */
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #1d272e;padding-top:15px;margin-top:4px}
.card-detail,.card-visit{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:780;line-height:1.2}
.card-detail{color:#f2f5f7}.card-detail:hover{color:#b9c9ff}.card-visit{color:#9fcfe0;text-align:right}.card-visit:hover{color:#d4f5ff}
.project-detail-shell{background:#070b0f}
.project-detail-hero{position:relative;overflow:hidden;padding:72px 0 68px;border-bottom:1px solid rgba(255,255,255,.07);background:radial-gradient(circle at 78% 42%,rgba(57,90,142,.15),transparent 34%),linear-gradient(180deg,#090e13,#070b0f)}
.project-detail-grid{display:grid;grid-template-columns:minmax(330px,.82fr) minmax(520px,1.18fr);gap:64px;align-items:center}
.project-detail-copy{position:relative;z-index:2}.project-back{display:inline-flex;margin-bottom:38px;color:#80909b;font-size:12px;font-weight:700}.project-back:hover{color:#fff}
.project-detail-copy h1{font-size:clamp(58px,6vw,92px);line-height:.88;letter-spacing:-.065em;margin:9px 0 22px;color:#f4f6f7}
.project-lead{font-size:20px;line-height:1.55;color:#b8c2c9;max-width:600px;margin:0}
.project-tags{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 0}.project-tags span{border:1px solid #293943;color:#9eb0bb;border-radius:999px;padding:6px 10px;font-size:10px}
.project-detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.project-detail-visual{position:relative;border:1px solid rgba(255,255,255,.10);border-radius:22px;overflow:hidden;background:#0c1217;box-shadow:0 32px 80px rgba(0,0,0,.34)}
.project-detail-visual:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(0,0,0,.18);pointer-events:none}.project-detail-visual img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.project-detail-content{padding:86px 0 104px}.project-content-grid{display:grid;grid-template-columns:270px minmax(0,760px);gap:92px;justify-content:center;align-items:start}
.project-facts{position:sticky;top:32px;border-top:1px solid #2a343b;padding-top:24px}.project-facts dl{margin:20px 0 0}.project-facts dl div{padding:14px 0;border-bottom:1px solid #1b252c}.project-facts dt{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#677680;margin-bottom:5px}.project-facts dd{margin:0;color:#cbd2d7;font-size:13px}.project-facts a{color:#bcd7e2}
.project-prose{font-size:18px;line-height:1.72;color:#bac3c9}.project-prose>p:first-child{font-size:23px;line-height:1.55;color:#e0e4e7}.project-prose h2{font-size:34px;line-height:1.1;letter-spacing:-.035em;color:#f3f5f6;margin:52px 0 17px}.project-prose h2:first-child{margin-top:0}.project-prose p{margin:0 0 20px}.project-prose ul{margin:18px 0 24px;padding-left:22px}.project-prose li{margin:8px 0}
.project-related{padding:74px 0 96px;border-top:1px solid rgba(255,255,255,.06);background:#080d11}.related-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:28px}.related-head h2{font-size:42px;letter-spacing:-.045em;margin:7px 0 0}.related-head>a{color:#9eb1bc;font-size:13px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.related-card{display:block;border:1px solid rgba(255,255,255,.075);border-radius:17px;overflow:hidden;background:#0d1419;transition:.2s}.related-card:hover{transform:translateY(-4px);border-color:#4d5e69}.related-card img{display:block;width:100%;height:150px;object-fit:cover}.related-card span{display:block;color:#f1f4f5;font-size:19px;font-weight:800;padding:17px 17px 5px}.related-card small{display:block;color:#8f9da6;font-size:12px;line-height:1.45;padding:0 17px 18px}
@media(max-width:980px){.project-detail-hero{padding:54px 0}.project-detail-grid{grid-template-columns:1fr;gap:34px}.project-detail-copy{max-width:720px}.project-detail-visual{max-width:820px}.project-content-grid{grid-template-columns:220px minmax(0,1fr);gap:48px}.project-prose{font-size:17px}}
@media(max-width:720px){.project-detail-hero{padding:38px 0 44px}.project-back{margin-bottom:28px}.project-detail-copy h1{font-size:52px}.project-lead{font-size:17px}.project-content-grid{grid-template-columns:1fr;gap:38px}.project-facts{position:static}.project-detail-content{padding:58px 0 68px}.project-prose>p:first-child{font-size:20px}.project-prose h2{font-size:29px;margin-top:40px}.related-grid{grid-template-columns:1fr}.related-head{align-items:start}.related-head h2{font-size:34px}}


/* v0.9.0 PROJECT ACCURACY + LANGUAGE + REAL SITE PREVIEWS */
.card-media .live-site-shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;background:#0b1014}
.card-badges{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.lang-badge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 7px;border-radius:999px;border:1px solid #34434d;background:#111920;color:#d7e0e5;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.lang-badge.lang-de{border-color:#59636c;background:#171d22;color:#eef1f3}.lang-badge.lang-en{border-color:#28586b;background:#0f2730;color:#bfeafb}
.badge.commercial{background:linear-gradient(180deg,#8d6a22,#5d4318);color:#fff2c5;border:1px solid rgba(255,217,118,.3)}
.project-hero-labels{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}.project-hero-labels .eyebrow{margin:0}
.commercial-flag{display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:999px;background:linear-gradient(180deg,#9b7225,#624719);border:1px solid rgba(255,218,123,.28);color:#fff0bd;font-size:8px;font-weight:850;letter-spacing:.12em}
.project-detail-visual img.live-site-shot{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;background:#0b1014}
.project-note{padding:14px 16px;border-left:2px solid #667781;background:#0b1217;color:#aeb8be}
.related-card img.live-site-shot{object-position:top center}
.related-title-row{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:17px 17px 5px!important}.related-title-row strong{font-size:19px;color:#f1f4f5}.related-title-row .lang-badge{flex:0 0 auto}


/* v0.10.0 language-first portfolio groups + Interactive category */
.project-language-group{margin-top:34px}.project-language-group+.project-language-group{margin-top:64px;padding-top:44px;border-top:1px solid rgba(255,255,255,.08)}
.language-group-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin:0 0 20px}.language-group-head>div{display:flex;align-items:center;gap:12px}.language-group-head h3{font-size:24px;letter-spacing:-.035em;margin:0}.language-group-code{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 8px;border:1px solid #34414a;border-radius:999px;color:#aeb8bf;font-size:9px;font-weight:850;letter-spacing:.14em}.language-group-head p{margin:0;color:#74818a;font-size:12px}.badge.interactive{background:#5b3922;color:#ffe1c6}.badge.interactive.commercial{background:#6b4a1f;color:#fff0cf}
@media(max-width:760px){.language-group-head{align-items:start;flex-direction:column;gap:8px}.project-language-group+.project-language-group{margin-top:48px;padding-top:34px}}


/* v0.11.0 deeper case studies, About and contact form */
.project-prose h3{font-size:21px;line-height:1.2;margin:30px 0 10px;color:#f3f5f6;letter-spacing:-.02em}
.project-highlight{margin:28px 0 34px;padding:20px 22px;border-left:2px solid #8fa8ff;background:linear-gradient(90deg,rgba(111,137,220,.12),rgba(111,137,220,.025));color:#cbd3d9;border-radius:0 12px 12px 0}
.project-highlight strong{color:#fff}.project-note{font-size:14px!important;color:#89969f!important;border-top:1px solid #202a31;padding-top:18px}
.about-lead{font-size:23px!important;line-height:1.5;color:#eef1f3!important;margin-bottom:32px!important}
.about-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:34px 0 46px}.about-stat-grid div{padding:18px;border:1px solid #263139;border-radius:14px;background:#0d1419}.about-stat-grid strong{display:block;color:#fff;font-size:20px}.about-stat-grid span{display:block;color:#8f9ca4;font-size:12px;line-height:1.45;margin-top:6px}
.about-cta{margin-top:48px;padding:24px;border:1px solid #28343c;border-radius:16px;background:linear-gradient(135deg,#0e161c,#0a1014);display:flex;align-items:center;justify-content:space-between;gap:20px}.about-cta strong{font-size:17px;color:#fff}.about-cta .btn{white-space:nowrap}
.dr-contact-form{margin-top:34px}.dr-contact-form label{display:block;margin-bottom:18px}.dr-contact-form label>span{display:block;margin-bottom:7px;font-size:13px;font-weight:700;color:#c9d1d6}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dr-contact-form input[type=text],.dr-contact-form input[type=email],.dr-contact-form textarea{width:100%;background:#080d11;border:1px solid #2a363e;border-radius:10px;color:#f4f6f7;padding:13px 14px;font:inherit;outline:none}.dr-contact-form textarea{resize:vertical;min-height:180px}.dr-contact-form input:focus,.dr-contact-form textarea:focus{border-color:#7893ff;box-shadow:0 0 0 3px rgba(120,147,255,.10)}.contact-consent{display:flex!important;align-items:flex-start;gap:9px}.contact-consent input{margin-top:4px}.contact-consent span{font-weight:400!important;color:#9ba7ae!important}.contact-note{font-size:12px;color:#71808a;margin-top:14px}.contact-status{padding:14px 16px;border-radius:10px;margin:0 0 20px}.contact-status.success{background:rgba(77,170,118,.12);border:1px solid rgba(77,170,118,.35);color:#bfe8cf}.contact-status.error{background:rgba(202,87,87,.12);border:1px solid rgba(202,87,87,.35);color:#efc1c1}.contact-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:760px){.about-stat-grid{grid-template-columns:1fr 1fr}.about-cta{align-items:flex-start;flex-direction:column}.contact-grid{grid-template-columns:1fr}.about-lead{font-size:20px!important}}

/* v0.12.0 legal/footer polish */
.footer-links{flex-wrap:wrap;justify-content:flex-end}.contact-consent a{color:#dfe8ff;text-decoration:underline;text-underline-offset:2px}.prose a{color:#dfe8ff;text-decoration:underline;text-underline-offset:2px}.prose h3{color:#eef2f4;margin-top:28px}
@media(max-width:650px){.footer-links{justify-content:flex-start;gap:14px 18px}}

/* v0.13.2 MOBILE POLISH: preserve full local screenshots + text-first hero */
@media(max-width:650px){
  .card-media{
    height:auto;
    aspect-ratio:16/9;
    background:#0b1014;
  }
  .card-media .live-site-shot{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center top;
    background:#0b1014;
  }
  .project-card:hover .card-media img{
    transform:none;
  }
  .dr7-hero-grid{
    flex-direction:column!important;
    gap:0!important;
    padding:26px 0 30px!important;
  }
  .dr7-hero-copy{
    order:1;
    padding-right:0!important;
  }
  .dr7-hero-media{
    order:2;
    margin:24px -14px 0!important;
    overflow:hidden;
  }
  .dr7-hero-media img{
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
}


/* v0.13.3 MOBILE NAVIGATION */
.mobile-menu-toggle,.mobile-menu{display:none}
@media(max-width:720px){
  .site-header{position:relative;z-index:80}
  .header-inner{min-height:86px}
  .main-nav{display:none!important}
  .header-inner>.lang-switch{display:none!important}
  .mobile-menu-toggle{display:inline-flex;width:52px;height:52px;flex:0 0 52px;border:1px solid #2d3840;border-radius:15px;background:#0d1318;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;cursor:pointer}
  .mobile-menu-toggle span{display:block;width:22px;height:2px;border-radius:3px;background:#f1f4f6;transition:transform .2s ease,opacity .2s ease}
  body.mobile-menu-open .mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0}
  body.mobile-menu-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{display:flex;position:fixed;z-index:1000;inset:0;background:rgba(5,8,11,.985);padding:110px 42px 40px;flex-direction:column;justify-content:flex-start;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease}
  body.mobile-menu-open{overflow:hidden}
  body.mobile-menu-open .mobile-menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .mobile-menu-close{position:absolute;top:23px;right:24px;width:52px;height:52px;border:1px solid #2d3840;border-radius:15px;background:#0d1318;color:#fff;font-size:35px;line-height:1;cursor:pointer}
  .mobile-menu-nav{display:flex;flex-direction:column;align-items:flex-start}
  .mobile-menu-nav a{display:block;width:100%;padding:13px 0;color:#f2f5f7;font-size:clamp(28px,8vw,38px);font-weight:820;letter-spacing:-.035em;border-bottom:1px solid rgba(255,255,255,.065)}
  .mobile-menu-nav a:hover{color:#a9bcff}
  .mobile-menu-rule{display:block;width:100%;height:18px;border-bottom:1px solid rgba(255,255,255,.13);margin-bottom:8px}
  .mobile-menu-nav .mobile-menu-rule~a{font-size:18px;font-weight:650;color:#aab5bd;letter-spacing:0}
  .mobile-menu-languages{display:flex;gap:10px;margin-top:28px}
  .mobile-menu-languages a{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:42px;border:1px solid #2d3942;border-radius:999px;color:#9daab2;font-weight:750}
  .mobile-menu-languages a.active{border-color:#6c86e8;color:#fff;background:#17213c}
}


/* v0.15.0 editorial polish */
.project-highlight{margin:28px 0 34px;padding:18px 20px;border:1px solid rgba(119,161,255,.22);border-left:3px solid #7ca1ff;border-radius:12px;background:linear-gradient(135deg,rgba(34,57,84,.34),rgba(13,20,25,.62));color:#cbd4da}.project-highlight strong{color:#fff}.project-note{margin-top:34px!important;padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0b1116;color:#89969e!important;font-size:14px!important}.about-platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 44px}.about-platform-grid>div{padding:22px;border:1px solid #263139;border-radius:15px;background:linear-gradient(145deg,#0e161c,#0a1014)}.about-platform-grid strong{display:block;color:#f4f6f7;font-size:18px;margin-bottom:8px}.about-platform-grid span{display:block;color:#98a4ab;line-height:1.55;font-size:14px}.project-related .related-card{position:relative}.related-card .related-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.related-card .related-title-row strong{min-width:0}.related-card .related-title-row .lang-badge{flex:0 0 auto;font-size:10px;padding:4px 7px;margin:0}.related-card small{min-height:52px}@media(max-width:720px){.about-platform-grid{grid-template-columns:1fr}.project-highlight{margin:22px 0 28px;padding:16px}.related-card small{min-height:0}}

/* v0.16.0 launch-closure */
.error-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 34px}.error-actions .btn{margin:0}
@media(max-width:640px){.error-actions{align-items:stretch}.error-actions .btn{width:100%;justify-content:center}}


/* v0.16.1 DESKTOP CARD POLISH: full screenshot framing + single-line metadata badges */
@media(min-width:721px){
  .card-media .live-site-shot{
    object-fit:contain;
    object-position:center top;
    background:#0b1014;
  }
  .project-card{
    display:flex;
    flex-direction:column;
  }
  .card-body{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
  }
  .card-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) max-content;
    align-items:start;
    column-gap:10px;
    min-height:48px;
  }
  .card-top>div{min-width:0}
  .card-kicker{
    display:block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .card-badges{
    flex-wrap:nowrap;
    flex:0 0 auto;
    gap:5px;
  }
  .card-badges .lang-badge{
    min-width:28px;
    padding-left:6px;
    padding-right:6px;
  }
  .card-badges .badge{
    font-size:7.5px;
    padding-left:7px;
    padding-right:7px;
    white-space:nowrap;
  }
  .card-actions{margin-top:auto}
}