:root{--accent:#c91662;--cyber:#00786e;--paper:#f6f7f3;--ink:#151718;--muted:#596660;--surface:#edf0eb;--surface2:#fff;--line:#cbd0c8;--soft:#dde2da;--code:#101314;--codeText:#dffaf7;--shadow:#d7ddd5;--glow:rgba(255,59,121,.22);color-scheme:light}
html[data-theme="dark"]{--accent:#ff3b9d;--cyber:#39f5e3;--paper:#090b0d;--ink:#f0fff9;--muted:#91a8a2;--surface:#11161a;--surface2:#151c20;--line:#28343a;--soft:#202b30;--code:#050708;--codeText:#dffaf7;--shadow:#020304;--glow:rgba(255,59,157,.34);color-scheme:dark}
body{background-image:linear-gradient(rgba(0,216,200,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,216,200,.025) 1px,transparent 1px);background-size:44px 44px}
body,header,.service,.brief,.build-motion,input,textarea,select{transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s}
html[data-theme="dark"] header,html[data-theme="dark"] .herofoot,html[data-theme="dark"] .intro,html[data-theme="dark"] .service,html[data-theme="dark"] .price-note,html[data-theme="dark"] details,html[data-theme="dark"] .steps article{border-color:var(--line)}
html[data-theme="dark"] .smallbtn{border-color:#3b4b52}html[data-theme="dark"] .service:hover{background:#11171a;box-shadow:0 0 34px rgba(57,245,227,.08)}
html[data-theme="dark"] .principles p,html[data-theme="dark"] .steps p,html[data-theme="dark"] .service p,html[data-theme="dark"] .sectionhead>p,html[data-theme="dark"] details p,html[data-theme="dark"] .herobottom p{color:#91a8a2}
html[data-theme="dark"] .brief{background:#0e1417}html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{border-color:#34454c;color:var(--ink)}html[data-theme="dark"] .seo{background:#050708}
html[data-theme="dark"] em,html[data-theme="dark"] .star,html[data-theme="dark"] .cardbottom span{filter:drop-shadow(0 0 10px rgba(255,59,157,.55))}
.theme-toggle{width:50px;height:28px;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface);cursor:pointer;display:flex;align-items:center;flex-shrink:0}
.theme-toggle__knob{width:20px;height:20px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--paper);font-size:11px;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s,box-shadow .35s}
html[data-theme="dark"] .theme-toggle__knob{transform:translateX(20px);background:var(--cyber);color:#071010;box-shadow:0 0 16px rgba(57,245,227,.65)}
.build-motion{width:min(44vw,520px);height:300px;padding:0;overflow:hidden;border-radius:15px;transform:rotate(-2deg);background:var(--surface);border:1px solid var(--line);box-shadow:14px 18px 0 var(--shadow),0 30px 70px var(--glow);will-change:transform;isolation:isolate;position:relative}
.build-motion:after{content:"";position:absolute;inset:-100%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 42%,rgba(0,216,200,.16) 48%,rgba(255,59,121,.12) 52%,transparent 58%);animation:devGlow 9s linear infinite}
.build-motion .browserbar{height:42px;padding:0 15px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);letter-spacing:0}
.window-dot{width:8px;height:8px;border-radius:50%;background:#798680}.window-dot:first-child{background:var(--accent);box-shadow:0 0 9px var(--accent)}.window-dot:nth-child(2){background:var(--cyber);box-shadow:0 0 9px var(--cyber)}
.window-url{height:19px;flex:1;margin-left:8px;border-radius:5px;background:var(--soft);color:var(--muted);font-size:9px;display:flex;align-items:center;padding:0 9px;letter-spacing:.3px;overflow:hidden;white-space:nowrap}
.build-stage{height:calc(100% - 42px);display:grid;grid-template-columns:42% 58%}.code-pane{background:var(--code);color:var(--codeText);padding:19px 16px;font:10px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden;border-right:1px solid rgba(57,245,227,.16)}
.code-title{color:#71817c;font-size:9px;margin-bottom:10px;display:flex;justify-content:space-between}.code-title b{color:var(--cyber);font-weight:500;text-shadow:0 0 8px var(--cyber)}
.code-line{display:block;white-space:nowrap;opacity:0;transform:translateX(-7px);animation:codeIn 7s infinite}.code-line:nth-child(3){animation-delay:.32s}.code-line:nth-child(4){animation-delay:.64s}.code-line:nth-child(5){animation-delay:.96s}.code-line:nth-child(6){animation-delay:1.28s}.code-line:nth-child(7){animation-delay:1.6s}.code-line:nth-child(8){animation-delay:1.92s}.code-pink{color:#ff71ad}.code-blue{color:#5df7e8}.code-yellow{color:#ffe16c}.code-indent{padding-left:12px}
.preview-pane{position:relative;background:var(--surface2);padding:19px;overflow:hidden}.preview-nav{height:9px;width:70%;border-radius:20px;background:var(--soft);transform-origin:left;animation:growBar 7s infinite .3s both}.preview-kicker{height:6px;width:36%;border-radius:20px;background:var(--cyber);box-shadow:0 0 10px rgba(57,245,227,.5);margin-top:30px;animation:growBar 7s infinite .8s both}
.preview-title{margin-top:10px}.preview-title i{display:block;height:15px;border-radius:3px;background:var(--ink);margin:5px 0;transform-origin:left;animation:growBar 7s infinite 1.15s both}.preview-title i:nth-child(2){width:70%;animation-delay:1.4s}.preview-copy{width:64%;height:6px;background:var(--soft);border-radius:20px;margin-top:13px;box-shadow:0 10px 0 var(--soft);animation:fadeUp 7s infinite 1.8s both}
.preview-button{width:72px;height:24px;background:linear-gradient(90deg,var(--accent),#9a49ff);box-shadow:0 0 18px var(--glow);border-radius:4px;margin-top:29px;animation:fadeUp 7s infinite 2.1s both}.preview-card{position:absolute;right:17px;bottom:18px;width:86px;height:78px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(145deg,var(--surface),var(--surface2));animation:cardIn 7s infinite 2.35s both}.preview-card:before,.preview-card:after{content:"";position:absolute;left:12px;border-radius:10px;background:var(--soft)}.preview-card:before{top:14px;width:40px;height:7px}.preview-card:after{top:30px;width:60px;height:5px;box-shadow:0 10px 0 var(--soft),0 20px 0 var(--accent)}
.build-status{position:absolute;left:17px;bottom:13px;color:#6e837d;font:9px ui-monospace,monospace;display:flex;align-items:center;gap:6px}.build-status:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyber);box-shadow:0 0 10px var(--cyber);animation:pulse 1.4s infinite}
@keyframes codeIn{0%,8%{opacity:0;transform:translateX(-7px)}14%,76%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateX(4px)}}@keyframes growBar{0%,10%{transform:scaleX(0);opacity:0}20%,76%{transform:scaleX(1);opacity:1}90%,100%{opacity:0}}@keyframes fadeUp{0%,14%{opacity:0;transform:translateY(10px)}24%,76%{opacity:1;transform:none}90%,100%{opacity:0}}@keyframes cardIn{0%,18%{opacity:0;transform:translate(18px,18px) scale(.8)}30%,76%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-5px)}}@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}@keyframes devGlow{to{transform:rotate(360deg)}}
@media(max-width:1050px){.build-motion{width:340px;height:250px}.herobottom{gap:24px}.code-pane{padding:14px 11px;font-size:8px}.preview-pane{padding:14px}.preview-kicker{margin-top:22px}}
@media(max-width:720px){header{gap:9px}.theme-toggle{width:44px;height:26px}.theme-toggle__knob{width:18px;height:18px}html[data-theme="dark"] .theme-toggle__knob{transform:translateX(18px)}.herobottom{display:grid;grid-template-columns:1fr}.build-motion{width:100%;height:245px;order:2;transform:none!important;box-shadow:8px 10px 0 var(--shadow),0 22px 50px var(--glow)}.herobottom>.button{order:3}.code-pane{font-size:8px}.herofoot{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.build-motion:after,.code-line,.preview-nav,.preview-kicker,.preview-title i,.preview-copy,.preview-button,.preview-card,.build-status:before{animation:none!important;opacity:1!important;transform:none!important}}

/* Shared form controls and custom dropdown. */
#brief-form{position:relative;z-index:12;min-width:0}
#brief-form input,#brief-form textarea,.riko-select-trigger{width:100%;max-width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:15px 16px;font:inherit;font-size:16px;line-height:1.5;transition:border-color .2s,box-shadow .2s}
#brief-form input:focus,#brief-form textarea:focus,.riko-select-trigger:focus-visible{outline:2px solid var(--cyber);outline-offset:3px;border-color:var(--cyber)}
#brief-form input::placeholder,#brief-form textarea::placeholder{color:var(--muted)}
.riko-select{position:relative;margin-bottom:22px;min-width:0}
.riko-select select[hidden]{display:none}
.riko-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;cursor:pointer;margin:0;padding-right:20px}
.riko-select-trigger:after{content:"";flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--cyber);border-bottom:2px solid var(--cyber);transform:rotate(45deg);transition:transform .2s}
.riko-select-trigger[aria-expanded="true"]{border-color:var(--cyber);box-shadow:0 0 18px var(--glow)}
.riko-select-trigger[aria-expanded="true"]:after{transform:rotate(225deg)}
.riko-select-options{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:var(--surface2);border:1px solid var(--cyber);border-radius:12px;padding:6px;box-shadow:0 16px 45px #0005;max-height:280px;overflow-y:auto;overscroll-behavior:contain}
.riko-select-options[hidden]{display:none}
.riko-select.opens-up .riko-select-options{top:auto;bottom:calc(100% + 8px)}
.riko-select-option{position:relative;padding:12px 38px 12px 12px;border-radius:7px;cursor:pointer;color:var(--ink);font-size:16px;line-height:1.4}
.riko-select-option:hover,.riko-select-option.active{background:var(--soft)}
.riko-select-option[aria-selected="true"]{color:var(--accent);font-weight:600}
.riko-select-option[aria-selected="true"]:after{content:"✓";position:absolute;right:13px;color:var(--cyber)}

.icon-arrow{display:inline-block;width:22px;height:22px;flex:0 0 auto;vertical-align:-.22em;transition:transform .2s ease}
.smallbtn .icon-arrow{width:18px;height:18px;margin-left:16px}
.cardbottom .icon-arrow{color:var(--accent)}
@media(hover:hover){a:hover .icon-arrow{transform:translate(2px,-2px)}}
@media(max-width:720px){.smallbtn .icon-arrow{width:16px;height:16px;margin-left:7px}}
@media(prefers-reduced-motion:reduce){.icon-arrow{transition:none}}

.music-toggle{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--cyber);border-radius:24px;padding:10px 16px;background:var(--surface);color:var(--ink);font:14px Arial,sans-serif;cursor:pointer;min-height:42px}
.hero>.music-toggle{position:relative;z-index:2;margin:10px 0 0 auto;background:#061019e6;color:#dffaf7;border-color:#39f5e366}
.music-toggle:hover,.music-toggle[aria-pressed="true"]{border-color:var(--cyber);box-shadow:0 0 18px #39f5e322}
.music-toggle svg{flex-shrink:0;color:var(--cyber)}


.additional-services{margin:28px 0;padding:28px 32px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.additional-services h3{margin:0 0 20px;font-size:26px;line-height:1.3;letter-spacing:-.5px}
.additional-services ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;padding:0 0 0 20px;margin:0}
.additional-services li{padding-left:3px;font-size:16px;line-height:1.6}
.additional-services li::marker{color:var(--accent)}
.additional-services p{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--muted)}
@media(max-width:720px){.additional-services{padding:24px}.additional-services ul{grid-template-columns:1fr;gap:10px}.additional-services h3{font-size:25px}}