:root{--ink:#07111f;--ink2:#1d2d43;--muted:#5d6b7d;--faint:#8492a4;--ivory:#f3f6fb;--paper:#fff;--mint:#d9f3fb;--mint2:#91ddf5;--line:#dce3ed;--cyan:#20bfe8;--violet:#7272e8;--grad:linear-gradient(105deg,#20bfe8,#7272e8)}
html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}body{background:var(--ivory)}#app{height:auto;min-height:100vh;overflow:visible}
.nav{background:#07111f;border-bottom-color:#ffffff18;color:#f1f3ff}.nav.scrolled{border-bottom-color:#ffffff2b}.brand-image{display:flex;align-items:center;flex:0 0 auto}.brand-image img{display:block;width:186px;height:auto;max-width:min(48vw,186px);border-radius:5px}.nav-links a{color:#d1daec}.nav-links a:hover,.nav-links a[aria-current=page]{background:#14263a;color:#fff}.nav .menu-btn{background:#0e1b2c;border-color:#304057;color:#f1f3ff}.drawer{background:#07111f}.drawer .menu-btn{background:transparent;color:#f1f3ff}.drawer .brand-image img{width:174px}.nav-cta{display:none}
.btn-primary{background:var(--grad);color:#07111f}.btn-primary:hover{background:linear-gradient(105deg,#59d5f3,#8e8df5);box-shadow:0 10px 26px -12px #20bfe8b8}.btn-ghost{border-color:var(--ink);color:var(--ink)}.dark .btn-ghost{border-color:#dce8fb;color:#f1f3ff}.dark .btn-ghost:hover{background:#f1f3ff;color:#07111f}.dark .lede{color:#d1daec}.dark .step p{color:#d1daec}.dark .step .k{color:#91ddf5}.mint-bg{background:#d9f3fb}.step{border-color:#ffffff24}.value{border-color:#ffffff24}.about-home-stat{border-left-color:#07111f24}
.portfolio-art{aspect-ratio:4/3;position:relative;overflow:hidden;display:grid;place-items:center;background:#edf2f8;padding:14px}.portfolio-art img.portfolio-image{width:100%;height:100%;display:block;object-fit:contain;object-position:center}.portfolio-image-placeholder{width:100%;height:100%;min-height:210px;display:grid;place-items:center;background:linear-gradient(135deg,#07111f,#16304a);color:#f1f3ff;font:700 22px var(--display)}.work-card .body{flex:1}.work-card .link{display:inline-flex;margin-top:6px;color:var(--ink)}.portfolio-grid{align-items:stretch}.portfolio-card{min-width:0}.portfolio-card.is-hidden{display:none}.portfolio-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}.portfolio-filter{min-height:42px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink2);font:600 14px var(--body);cursor:pointer}.portfolio-filter:hover,.portfolio-filter.is-active{background:var(--ink);border-color:var(--ink);color:#fff}.project-view{display:grid;gap:36px;align-items:start}.project-visual{min-height:260px;display:grid;place-items:center;padding:clamp(16px,3vw,32px);background:#edf2f8;border-radius:var(--r);overflow:hidden}.portfolio-detail-image{display:block;width:100%;height:auto;max-height:780px;object-fit:contain}.project-copy{display:grid;gap:18px}.project-copy .prose{max-width:none}.project-tags{margin-top:8px}.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.notice:not(.ok){padding:16px 18px;border-radius:12px;background:#fff0f0;color:#8f2525}.portrait .big{background:var(--grad);-webkit-background-clip:text;background-clip:text}.f-grid{align-items:start}footer .brand-image img{width:186px}footer .f-tag{color:#f1f3ff}footer .f-bottom{color:#a9b8ce}
@media(min-width:900px){.project-view{grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}.project-visual{min-height:440px}}
@media(min-width:960px){.nav-cta{display:flex}}
@media(max-width:520px){.brand-image img{width:158px}.drawer .brand-image img{width:154px}.portfolio-art{padding:10px}.portfolio-filters{gap:7px}.portfolio-filter{font-size:13px;padding:8px 13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dark refresh: retain the cyan/violet identity while keeping body text high contrast. */
:root{--ink:#07111f;--ink2:#d3deed;--muted:#b3c1d5;--faint:#94a5bc;--ivory:#f3f6ff;--paper:#0d1b2d;--mint:#10243a;--mint2:#8be2f5;--line:#2a405a;--cyan:#38c9ec;--violet:#8d84ff;--grad:linear-gradient(105deg,#38c9ec,#8d84ff)}
body{background:#07111f;color:#f3f6ff}
section{background-color:#081523;color:#f3f6ff}
.dark{background:#060e1a;color:#f3f6ff}
.paper-bg{background:#0c1a2b;color:#f3f6ff}
.mint-bg{background:#0e1e31;color:#f3f6ff}
.hero,.page-head{background:#07111f;color:#f3f6ff}
main p,main li{color:inherit}
.lede,.prose,.stat span,.about-home-stat span{color:#d3deed}
.sec-head .lede,.step p,.value p{color:#d3deed}
a{color:inherit}
:focus-visible{outline-color:#65dcf5}
.btn-primary,.btn-dark{background:var(--grad);color:#07111f}
.btn-primary:hover,.btn-dark:hover{background:linear-gradient(105deg,#73e3fb,#a49dff);color:#07111f}
.btn-ghost{border-color:#7f91aa;color:#f3f6ff;background:transparent}
.btn-ghost:hover{background:#e7f4ff;color:#07111f;border-color:#e7f4ff}
.dark .btn-ghost{border-color:#afc0d6;color:#f3f6ff}
.dark .btn-ghost:hover{background:#e7f4ff;color:#07111f}
.nav{background:#07111ff2;border-bottom-color:#ffffff1c;color:#f3f6ff}
.nav-links a{color:#d3deed}
.nav-links a:hover,.nav-links a[aria-current=page]{background:#14283e;color:#fff}
.nav .menu-btn{background:#102039;border-color:#344860;color:#f3f6ff}
.drawer{background:#07111f;color:#f3f6ff}
.drawer nav a{border-bottom-color:#ffffff24}
.svc-board,.svc-card,.work-card,.quick,.benefit,.related a,.svc-nav a,.c-item,form.card,.next-box,.team-card,.team-note,.price-card{background:#0d1b2d;border-color:#2a405a;color:#f3f6ff}
.chip{background:#10243a;border-color:#263c56;color:#f3f6ff}
.chip:hover{background:#162b45;border-color:#55cdec}
.svc-card p,.work-card p,.benefit p,.inc p,.quick h2,.c-item small,.field .opt,.concept-note,.empty-work,.price-intro,.pricing-note,.team-card p,.team-note p{color:#bdcadd}
.svc-card ul{color:#d7e1ef;border-top-color:#31465e}
.svc-card li:before,.inc .k,.skills li span{color:#65d9f4}
.portfolio-filter{background:#0d1b2d;border-color:#334a65;color:#dce7f5}
.portfolio-filter:hover,.portfolio-filter.is-active{background:#38c9ec;border-color:#38c9ec;color:#07111f}
.portfolio-art,.project-visual{background:#fff !important}
.work-card .link,.link{color:#88e4f8}
.tag{background:#15304a;color:#e2f5ff}
.tag.v{background:#242447;color:#e3e0ff}
.about-home-stat{border-left-color:#344960}
.portrait{background:#0c1a2b}
.skills,.skills li,.included,.inc,.faq,.faq details,.work-detail{border-color:#2a405a}
.crumbs a:hover{color:#8be2f5}
.svc-card:hover,.related a:hover,.svc-nav a:hover,.c-item:hover{border-color:#56d5f2}
.faq summary .pm{border-color:#8ea1ba;color:#eef5ff}
.faq details[open] summary .pm{background:#38c9ec;color:#07111f;border-color:#38c9ec}
.faq details p{color:#cbd7e7}
.field input,.field select,.field textarea{color:#f3f6ff;background:#081523;border-color:#344a64}
.field input::placeholder,.field textarea::placeholder{color:#92a4bb}
.field input:focus,.field select:focus,.field textarea:focus{background:#0c1a2b;border-color:#56d5f2;box-shadow:0 0 0 4px #38c9ec30}
.pills span{background:#091625;border-color:#344a64;color:#eaf2ff}
.pills input:checked+span{background:#38c9ec;color:#07111f;border-color:#38c9ec}
.notice.ok{background:#12364a;color:#dff9ff}
.notice:not(.ok){background:#3a1d2a;color:#ffe1e9}
.ph{background:#0d1b2d;border-color:#425a74}
.ph q{color:#e6eef9}
.ph .who{color:#bdcadd}
.ph-flag{background:#3b3519;color:#ffe99c}
footer{background:#050c16;color:#f3f6ff}
footer .f-bottom{color:#aebdd1}
.team-grid{display:grid;gap:16px}
.team-card{display:grid;gap:24px;align-items:center;padding:clamp(22px,3vw,34px);border:1px solid #2a405a;border-radius:var(--r)}
.team-avatar{width:min(100%,180px);aspect-ratio:1;border-radius:24px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 25% 22%,#38c9ec 0,#145077 35%,#24234c 100%);box-shadow:inset 0 0 0 1px #ffffff22}
.team-avatar span{font:800 clamp(42px,7vw,66px)/1 var(--display);letter-spacing:-.06em;color:#f3f6ff;position:relative;z-index:1}
.team-avatar i{position:absolute;width:150px;height:150px;border:1px solid #ffffff40;border-radius:50%;right:-55px;bottom:-60px;box-shadow:0 0 0 18px #ffffff09,0 0 0 36px #ffffff08}
.team-card-copy{display:grid;gap:12px;max-width:48ch}
.team-role,.team-note-k{font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8be2f5}
.team-card h3,.team-note h3{font-size:clamp(25px,3vw,34px)}
.team-card .link,.team-note .link{width:max-content;margin-top:4px}
.team-note{display:grid;align-content:center;gap:16px;padding:clamp(24px,4vw,40px);border:1px solid #2a405a;border-radius:var(--r);background:linear-gradient(145deg,#10243a,#0a1726)}
.price-grid{display:grid;gap:18px;align-items:stretch}
.price-card{display:flex;flex-direction:column;padding:clamp(22px,3vw,34px);border:1px solid #2a405a;border-radius:24px;box-shadow:0 24px 60px -45px #000}
.price-card-featured{border-color:#4b99c0;box-shadow:0 20px 60px -42px #38c9ec88}
.price-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.price-package{display:inline-flex;align-items:center;min-height:32px;padding:6px 14px;border-radius:999px;background:#123b63;color:#b6efff;font:600 12px/1 var(--body);letter-spacing:.08em}
.price-card-featured .price-package{background:#29255b;color:#d8d4ff}
.price-label{font-size:13px;color:#aebdd1}
.price-card h2{font-size:clamp(25px,3vw,34px);min-height:2.1em}
.price-amount{display:flex;align-items:baseline;gap:10px;margin:20px 0 14px;padding:16px 20px;border:1px solid #2c4664;border-radius:18px;background:#091625}
.price-amount strong{font:800 clamp(50px,7vw,70px)/1 var(--display);letter-spacing:-.05em;color:#49d6f2}
.price-amount span{font-size:18px;color:#d3deed}
.price-intro{min-height:3.2em;margin:0 0 18px;font-size:15px}
.price-list{list-style:none;margin:0 0 26px;padding:20px 0 0;border-top:1px solid #2a405a;display:grid;gap:12px;flex:1}
.price-list li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;color:#e2eaf5;font-size:15px;line-height:1.45}
.price-list li:before{content:"✓";color:#57d9f3;font-weight:700}
.price-card .btn{align-self:flex-start}
.pricing-note{margin:22px 0 0;text-align:center;font-size:14px}
@media(min-width:760px){.team-grid{grid-template-columns:1.15fr .85fr}.team-card{grid-template-columns:150px 1fr}}
@media(min-width:860px){.price-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.team-card{gap:18px}.team-avatar{width:112px;border-radius:18px}.price-card-top{align-items:flex-start;flex-direction:column}.price-card h2{min-height:0}.price-intro{min-height:0}}