
:root{--ink:#101827;--muted:#596273;--orange:#ff4b16;--amber:#ff9b20;--line:#e8ebf0;--bg:#fff;--soft:#fff5ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:inherit;text-decoration:none}.wrap{width:min(1160px,92%);margin:auto}
header{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:10}
.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand img{width:255px;max-height:68px;object-fit:contain}
nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:650}nav a:hover{color:var(--orange)}
.lang{font-size:13px;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(110deg,var(--orange),#ff6b12);color:white;padding:13px 22px;border-radius:30px;font-weight:750;box-shadow:0 8px 24px #ff5a1d2b}
.hero{padding:74px 0 62px;background:radial-gradient(circle at 85% 15%,#ffe4d3 0,transparent 32%),linear-gradient(120deg,#fff 50%,#fff8f3)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}.eyebrow{color:var(--orange);font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
h1{font-size:clamp(42px,6vw,68px);line-height:1.04;letter-spacing:-2.8px;margin:14px 0 22px}h1 span{color:var(--orange)}.lead{font-size:19px;color:#4e5868;max-width:590px}
.hero-art{min-height:350px;border-radius:28px;background:linear-gradient(135deg,#18243a,#263954 55%,#ff7a2b);padding:30px;display:flex;align-items:end;position:relative;overflow:hidden;color:white}
.hero-art:before{content:"2D  +  3D";position:absolute;top:30px;left:30px;font-size:clamp(42px,6vw,78px);font-weight:900;letter-spacing:-4px;color:#ffffff22}
.hero-art strong{font-size:26px;max-width:330px;line-height:1.2;position:relative}
.hero-art .play{position:absolute;right:32px;top:42%;width:68px;height:68px;border-radius:50%;background:#fff;color:var(--orange);display:grid;place-items:center;font-size:27px}
section{padding:68px 0}.section-head{max-width:720px;margin-bottom:30px}.section-head h2{font-size:clamp(30px,4vw,42px);line-height:1.15;margin:0 0 12px;letter-spacing:-1.2px}.section-head p{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid var(--line);border-radius:18px;padding:25px;background:#fff;transition:.2s}.card:hover{transform:translateY(-4px);box-shadow:0 14px 36px #15223812;border-color:#ffd0bd}
.icon{width:48px;height:48px;border-radius:14px;background:var(--soft);color:var(--orange);display:grid;place-items:center;font-size:23px;font-weight:900}.card h3{margin:15px 0 7px;font-size:20px}.card p{color:var(--muted);margin:0;font-size:15px}
.band{background:#111c2d;color:white}.band p{color:#c5ccd6}.band .card{background:#1b2a40;border-color:#2c3c52}.band .card p{color:#c5ccd6}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.split h2{font-size:40px;line-height:1.15;margin:0 0 16px}.ticks{padding:0;list-style:none}.ticks li{padding:9px 0;border-bottom:1px solid var(--line)}.ticks li:before{content:"✓";color:var(--orange);font-weight:900;margin-right:10px}
.cta{background:linear-gradient(120deg,#ff4b16,#ff8b19);color:white;border-radius:26px;padding:42px;display:flex;align-items:center;justify-content:space-between;gap:25px}.cta h2{font-size:34px;line-height:1.15;margin:0 0 8px}.cta p{margin:0;color:#fff0e8}.cta .btn{background:#fff;color:#e84713;box-shadow:none}
footer{background:#0d1726;color:#dce2ea;padding:44px 0 25px}footer a{color:#fff}footer .foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}footer small{color:#9aa6b6}
.page-hero{padding:64px 0;background:linear-gradient(120deg,#fff5ef,#fff)}.page-hero h1{font-size:50px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact a{border:1px solid var(--line);border-radius:14px;padding:18px}
@media(max-width:800px){.nav{padding:12px 0;flex-wrap:wrap}.brand img{width:210px}nav{width:100%;overflow:auto;gap:16px;padding-bottom:8px}.hero-grid,.split,.contact{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.hero{padding:45px 0}.hero-art{min-height:250px}.cta{display:block}.cta .btn{margin-top:22px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.brand img{width:190px}nav{font-size:13px}.page-hero h1{font-size:38px}section{padding:50px 0}}

/* Portfolio video gallery */
.portfolio-intro{max-width:780px}.portfolio-tools{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.portfolio-filter{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 16px;border-radius:24px;font:inherit;font-weight:650;cursor:pointer}
.portfolio-filter[aria-pressed="true"],.portfolio-filter:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.project-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.project-video{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}.project-video img,.project-video iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.project-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border:0;border-radius:50%;background:rgba(255,255,255,.95);color:var(--orange);font-size:23px;cursor:pointer;padding-left:5px}
.project-info{padding:16px 18px 18px}.project-info h3{margin:0 0 6px;font-size:18px}.project-info p{margin:0;color:var(--muted);font-size:13px}
.project-card[hidden]{display:none}.portfolio-count{color:var(--muted);font-size:14px;margin:0 0 18px}
.channel-cta{margin-top:38px;padding:30px;border-radius:20px;background:#111c2d;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:22px}
.channel-cta p{margin:6px 0 0;color:#c5ccd6}.channel-cta .btn{white-space:nowrap}
@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr}.channel-cta{display:block}.channel-cta .btn{display:inline-block;margin-top:18px}}
