:root { --ink:#0a0f16; --ink-soft:#111b26; --paper:#f4f7f8; --line:#dce4e8; --muted:#70808c; --signal:#00aeef; --signal-dark:#007ea9; --yellow:#f4c72d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.portfolio-shell { width:min(calc(100% - 64px), 1320px); margin:0 auto; }
.portfolio-header { position:relative; z-index:10; color:#fff; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.1); }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:78px; }
.brand-lockup { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:800; letter-spacing:.12em; }
.brand-lockup img { width:32px; height:32px; object-fit:contain; }
.portfolio-nav { display:flex; align-items:center; gap:28px; color:#aebbc7; font-size:11px; font-weight:700; }
.portfolio-nav a { transition:color .18s ease; }
.portfolio-nav a:hover, .portfolio-nav a[aria-current="page"] { color:#fff; }
.portfolio-nav .nav-login { color:var(--signal); }
.portfolio-hero { overflow:hidden; color:#fff; background:var(--ink); }
.hero-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr); min-height:650px; align-items:center; gap:70px; padding:70px 0 78px; }
.eyebrow { margin:0 0 22px; color:var(--signal); font-size:10px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; }
h1,h2,h3,p { text-wrap:pretty; }
h1,h2,h3 { margin:0; letter-spacing:-.055em; }
.hero-copy h1 { max-width:680px; font-size:clamp(54px,7vw,94px); line-height:.96; }
h1 em,h2 em { color:var(--signal); font-style:normal; }
.hero-lead { max-width:480px; margin:30px 0 0; color:#aebbc7; font-size:15px; line-height:1.75; }
.hero-meta { display:flex; flex-wrap:wrap; gap:26px; margin-top:54px; padding-top:19px; border-top:1px solid rgba(255,255,255,.16); color:#8f9eaa; font-size:10px; }
.hero-meta span { display:grid; gap:5px; }
.hero-meta b { color:#fff; font-size:14px; font-variant-numeric:tabular-nums; }
.hero-visual { position:relative; min-height:490px; }
.hero-orbit { position:absolute; border:1px solid rgba(0,174,239,.35); border-radius:50%; transform:rotate(-18deg); }
.orbit-a { inset:3% 12% 3% 16%; }
.orbit-b { inset:15% 0 16% 28%; border-color:rgba(255,255,255,.12); }
.hero-card { position:absolute; overflow:hidden; border:1px solid rgba(255,255,255,.38); background:#14212c; box-shadow:24px 30px 80px rgba(0,0,0,.28); }
.hero-card img { display:block; width:100%; height:auto; }
.hero-card-back { top:4%; right:5%; width:49%; aspect-ratio:3/4; transform:rotate(8deg); opacity:.78; }
.hero-card-front { bottom:0; left:7%; width:49%; aspect-ratio:3/4; transform:rotate(-7deg); }
.hero-index { position:absolute; right:4%; bottom:2%; color:var(--signal); font-size:10px; font-weight:800; letter-spacing:.2em; }
.portfolio-work { padding:120px 0 130px; background:#fff; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:58px; }
.section-heading h2,.process-grid h2,.cta-grid h2 { font-size:clamp(42px,5vw,70px); line-height:.98; }
.section-heading h2 span,.process-grid h2 span { color:#87939e; }
.filter-bar { display:flex; flex-wrap:wrap; gap:7px; }
.filter-button { min-height:40px; padding:8px 15px; color:#7b8994; border:1px solid var(--line); border-radius:999px; background:#fff; cursor:pointer; transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease; }
.filter-button:hover { color:var(--ink); border-color:#aab9c1; }
.filter-button.is-active { color:#fff; border-color:var(--ink); background:var(--ink); }
.filter-button:active { transform:scale(.97); }
.case-list { display:grid; gap:100px; }
.case-card { padding:30px; border:1px solid var(--line); border-radius:18px; background:var(--paper); }
.case-card-ecosvet { --case-accent:#00aeef; }
.case-card-gaikover { --case-accent:#f2bf22; }
.case-card-water-heater { --case-accent:#588400; }
.case-card-canfly { --case-accent:#d71920; }
.case-card-pruner { --case-accent:#007f94; }
@media (max-width:360px) { .case-card-water-heater .case-intro h3,.case-card-pruner .case-intro h3 { font-size:30px; } }
.case-intro { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr); gap:60px; padding:18px 10px 38px; }
.case-number { color:var(--case-accent); font-size:10px; font-weight:800; letter-spacing:.15em; }
.case-intro h3 { margin-top:22px; font-size:clamp(34px,4vw,56px); }
.case-intro p { max-width:670px; margin:18px 0 0; color:var(--muted); font-size:13px; line-height:1.75; }
.case-intro dl { margin:0; border-top:1px solid var(--line); }
.case-intro dl div { display:grid; grid-template-columns:82px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:10px; }
.case-intro dt { color:#8a98a3; text-transform:uppercase; letter-spacing:.08em; }
.case-intro dd { margin:0; font-weight:700; }
.case-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start; }
.gallery-tile { position:relative; min-width:0; overflow:hidden; padding:0; border:0; border-radius:10px; aspect-ratio:3/4; background:#d7e0e5; cursor:zoom-in; transition:transform .18s ease; }
.gallery-tile img { display:block; width:100%; height:100%; object-fit:contain; }
.gallery-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.55)); pointer-events:none; }
.gallery-tile span { position:absolute; z-index:1; right:13px; bottom:11px; color:#fff; font-size:10px; font-weight:800; letter-spacing:.1em; }
@media (hover:hover) { .gallery-tile:hover { transform:translateY(-3px); } }
.modal-open { overflow:hidden; }
.portfolio-process { padding:120px 0; color:#fff; background:var(--ink); }
.process-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:110px; }
.process-grid h2 { max-width:560px; }
.process-grid h2 span { color:#9aa9b5; }
.process-grid ol { display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.16); }
.process-grid li { display:grid; grid-template-columns:58px 1fr; gap:18px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.process-grid li b { color:var(--signal); font-size:10px; letter-spacing:.1em; }
.process-grid li strong { font-size:17px; }
.process-grid li p { max-width:500px; margin:9px 0 0; color:#98a7b3; font-size:12px; line-height:1.7; }
.portfolio-cta { padding:110px 0; color:#fff; background:var(--signal-dark); }
.cta-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:100px; align-items:end; }
.cta-grid p:not(.eyebrow) { max-width:490px; margin:0 0 30px; color:#e5f7ff; font-size:15px; line-height:1.75; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:48px; padding:12px 18px; border:1px solid transparent; font-size:12px; font-weight:800; transition:background-color .18s ease,color .18s ease,transform .18s ease; }
.button-light { color:var(--ink); background:#fff; }
.button-light:hover { background:#dff6ff; }
.button:active { transform:scale(.98); }
.portfolio-footer { color:#84919c; background:var(--ink); }
.portfolio-footer .portfolio-shell { display:flex; align-items:center; justify-content:space-between; gap:30px; min-height:82px; font-size:10px; }
.portfolio-footer .brand-lockup { color:#fff; font-size:13px; }
.portfolio-footer .brand-lockup img { width:28px; height:28px; }
.portfolio-footer a:last-child { color:var(--signal); }
.gallery-modal { position:fixed; z-index:30; inset:0; display:none; place-items:center; padding:30px; color:#fff; background:rgba(4,9,14,.9); }
.gallery-modal.is-open { display:grid; }
.modal-backdrop { position:absolute; inset:0; }
.modal-panel { position:relative; z-index:1; display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:18px; width:min(100%,1100px); }
.modal-panel figure { margin:0; }
.modal-panel figure img { display:block; width:100%; max-height:82vh; object-fit:contain; border:1px solid rgba(255,255,255,.18); background:#0c121a; }
.modal-panel figcaption { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:12px; color:#97a6b1; font-size:10px; }
.modal-panel figcaption b { color:#fff; font-size:12px; }
.modal-close,.modal-arrow { display:grid; width:44px; height:44px; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.25); background:rgba(10,15,22,.72); cursor:pointer; }
.modal-close { position:absolute; z-index:2; top:-16px; right:-16px; border-radius:50%; font-size:22px; }
.modal-arrow { border-radius:50%; font-size:18px; }
.modal-close:hover,.modal-arrow:hover { border-color:var(--signal); color:var(--signal); }
.filter-button:focus-visible,.gallery-tile:focus-visible,.button:focus-visible,.modal-close:focus-visible,.modal-arrow:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
.is-filtered { display:none; }
@media (max-width:980px) { .hero-grid { grid-template-columns:1fr 1fr; gap:30px; } .hero-copy h1 { font-size:clamp(46px,6vw,64px); } .hero-visual { min-height:420px; } .case-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } .process-grid,.cta-grid { gap:50px; } .case-intro { gap:30px; } }
@media (max-width:760px) { .portfolio-shell { width:min(calc(100% - 32px),1320px); } .portfolio-nav { gap:12px; } .portfolio-nav a:not(.nav-login) { display:none; } .hero-grid,.process-grid,.cta-grid,.case-intro { grid-template-columns:1fr; } .hero-grid { padding:54px 0 70px; } .hero-visual { min-height:420px; margin-top:5px; } .section-heading { align-items:start; flex-direction:column; } .case-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .modal-panel { grid-template-columns:40px minmax(0,1fr) 40px; gap:8px; } .modal-close { top:-14px; right:-5px; } .portfolio-footer .portfolio-shell { align-items:flex-start; flex-direction:column; padding:25px 0; } }
@media (max-width:520px) { .portfolio-shell { width:min(calc(100% - 24px),1320px); } .header-inner { min-height:68px; } .brand-lockup { font-size:13px; } .hero-copy h1 { font-size:52px; } .hero-meta { gap:15px; } .hero-visual { min-height:350px; } .case-card { padding:16px; border-radius:12px; } .case-gallery { gap:10px; } .case-intro { padding:11px 5px 25px; } .portfolio-work,.portfolio-process { padding:80px 0; } .modal-panel { grid-template-columns:1fr; } .modal-arrow { position:absolute; z-index:2; bottom:40px; } .modal-prev { left:10px; } .modal-next { right:10px; } .modal-panel figcaption { padding:10px 10px 0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }