*{box-sizing:border-box}
:root{
  --bg:#07111f;--bg2:#0b192b;--panel:#0e1d30;--line:rgba(255,255,255,.08);
  --text:#edf5ff;--muted:#93a8bd;--blue:#337cff;--cyan:#35d8ff;--green:#4ce3a6;
  --light:#f4f7fb;--ink:#0c1724;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;position:sticky;top:0;z-index:100;background:rgba(7,17,31,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;color:white;font-weight:900;font-size:18px}
.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 10px 28px rgba(47,120,255,.28);font-weight:900;color:white}
nav{display:flex;align-items:center;gap:7px}
.nav-link{border:0;background:transparent;color:#9eb0c2;padding:11px 13px;border-radius:9px;font-weight:800;font-size:13px}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.06)}
.nav-cta{border:1px solid rgba(74,170,255,.3);background:rgba(47,120,255,.11);color:#ddecff}
.live-link{display:flex;align-items:center;gap:7px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#45e2a5;box-shadow:0 0 0 5px rgba(69,226,165,.09)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:28px}
.tab-panel{display:none;min-height:calc(100vh - 76px)}
.tab-panel.active{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero{min-height:720px;display:grid;align-items:center;padding:90px 6vw 105px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 78% 25%,rgba(0,210,255,.16),transparent 25%),radial-gradient(circle at 18% 15%,rgba(47,120,255,.18),transparent 27%),linear-gradient(180deg,#07111f,#091526)}
.hero-bg:after{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;mask-image:linear-gradient(to bottom,black,transparent)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:900;color:#55d6ff;margin-bottom:16px}
.hero h1,.page-hero h1,.contact-copy h1{font-size:clamp(48px,6.5vw,88px);line-height:.98;letter-spacing:-.055em;margin:0 0 24px}
.hero h1 span,.code-hero h1 span,.contact-copy h1 span{background:linear-gradient(90deg,#5ce0ff,#6790ff);-webkit-background-clip:text;color:transparent}
.hero-copy>p,.page-hero p,.contact-copy>p{font-size:18px;line-height:1.75;color:#aabbd0;max-width:730px}
.hero-actions{display:flex;gap:13px;margin:34px 0}
.btn{border:0;border-radius:11px;padding:15px 20px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.primary{background:linear-gradient(135deg,var(--blue),#08c9e8);color:white;box-shadow:0 15px 45px rgba(47,120,255,.25)}
.secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff}
.proof-row{display:flex;gap:25px;margin-top:45px}
.proof-row div{display:flex;flex-direction:column;gap:5px;padding-right:25px;border-right:1px solid rgba(255,255,255,.09)}
.proof-row div:last-child{border:0}
.proof-row strong{font-size:14px}.proof-row span{font-size:12px;color:#7890a8}
.hero-card{background:linear-gradient(180deg,rgba(20,37,59,.98),rgba(10,24,42,.98));border:1px solid rgba(116,201,255,.18);border-radius:24px;padding:22px;box-shadow:0 40px 90px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.06);transform:perspective(900px) rotateY(-3deg)}
.window-bar{display:flex;gap:7px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.07)}
.window-bar span{width:9px;height:9px;border-radius:50%;background:#314156}
.code-title{display:flex;justify-content:space-between;padding:18px 3px 6px;font:700 11px 'JetBrains Mono';color:#7e96ad}
.running{color:#50daa2}.hero-code{margin:10px 0;background:#07121e;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:23px;overflow:auto;font:500 13px/1.9 'JetBrains Mono';color:#dfe9f6}
.hero-code .c,.code-explainer .c{color:#75a8ff}.hero-code .f{color:#62e1ff}.hero-code .s,.code-explainer .s{color:#82dfae}.hero-code .b{color:#d48cff}
.console{font:700 11px 'JetBrains Mono';padding:13px;color:#90a9c1}.console span{color:#50d9ff}.console b{float:right;color:#48dfa3}
.trust-strip{display:flex;justify-content:center;gap:42px;flex-wrap:wrap;padding:24px 6vw;background:#0b192b;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#7790a8;font-size:12px;font-weight:800}
.light-section{padding:105px 6vw;background:var(--light);color:var(--ink)}
.section-heading{text-align:center;max-width:800px;margin:0 auto 55px}
.section-heading h2{font-size:clamp(34px,4.3vw,58px);line-height:1.05;letter-spacing:-.04em;margin:0 0 15px}
.section-heading p{color:#607286;line-height:1.7}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{position:relative;background:white;border:1px solid #e2e9f0;border-radius:18px;padding:27px;box-shadow:0 10px 25px rgba(10,30,50,.035)}
.service-card h3{margin:12px 0 9px;font-size:20px}.service-card p{color:#65788b;line-height:1.7;font-size:14px;margin:0}
.service-icon{font-size:29px}.dark-card{background:#0e1d30;color:white;border-color:#17304d}.dark-card p{color:#9cb0c5}
.badge{position:absolute;top:18px;right:18px;color:#54d9ff;background:rgba(84,217,255,.1);padding:7px 9px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.12em}
.dark-cta{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:80px 8vw;background:linear-gradient(135deg,#0b1830,#102a4a)}
.dark-cta h2{font-size:clamp(36px,4vw,56px);letter-spacing:-.04em;margin:0 0 12px}.dark-cta p{color:#91a7be;max-width:740px;line-height:1.7}
.page-hero{padding:100px 7vw 75px;background:radial-gradient(circle at 80% 20%,rgba(48,126,255,.18),transparent 25%),#081423}
.page-hero.compact{padding-bottom:70px}.page-hero h1{font-size:clamp(50px,7vw,84px)}.page-hero p{max-width:700px}
.projects-area,.demo-section,.skills-section{padding:70px 6vw 105px;background:#f5f8fb;color:#0c1724}
.filter-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:25px}.filter-bar>span{font-size:12px;color:#74869a;font-weight:800;margin-right:5px}
.filter-btn{border:1px solid #dce4ec;background:#fff;color:#536779;padding:9px 13px;border-radius:999px;font-weight:800;font-size:12px}
.filter-btn.active{background:#0d1c30;color:white;border-color:#0d1c30}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.project-card{background:#fff;border:1px solid #e0e7ee;border-radius:20px;overflow:hidden;box-shadow:0 12px 30px rgba(24,43,61,.05)}
.project-card.hidden{display:none}
.visual{min-height:330px;display:grid;place-items:center;padding:28px}
.poker-visual{background:radial-gradient(circle at 50% 0,rgba(40,230,180,.2),transparent 45%),#0c1e30}
.mock-app{width:82%;background:#07131f;border:1px solid rgba(255,255,255,.1);padding:26px;text-align:center;border-radius:17px;color:white;box-shadow:0 25px 60px rgba(0,0,0,.3)}
.mock-header{font-size:10px;color:#47e5bf;letter-spacing:.11em;font-weight:900;text-align:left;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.06)}
.mock-app>strong{font-size:64px;display:block;margin-top:20px}.mock-app>span{font-size:9px;color:#7690a8;letter-spacing:.13em}.mock-timer{font-size:35px;font-weight:900;margin:18px 0}.alert-box{font-size:11px;color:#ffc56c;background:rgba(255,190,91,.08);border:1px solid rgba(255,190,91,.17);padding:12px;border-radius:9px}
.delivery-visual{background:linear-gradient(135deg,#1c2d41,#50657d)}.site-preview{width:90%;height:245px;border-radius:15px;padding:26px;display:flex;flex-direction:column;align-items:start;justify-content:end;color:white;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.12)),linear-gradient(135deg,#384e62,#8292a0);box-shadow:0 25px 50px rgba(0,0,0,.2)}
.site-preview small{font-weight:900;letter-spacing:.12em}.site-preview h4{font-size:31px;margin:5px 0 13px}.site-preview button,.form-preview button{border:0;background:#ff7b1b;color:white;padding:10px 13px;border-radius:7px;font-size:10px;font-weight:900}.preview-nav{font-size:8px;margin-top:28px;letter-spacing:.08em;color:#d6dee5}
.dashboard-visual{background:radial-gradient(circle at 30% 10%,rgba(74,112,255,.3),transparent 40%),#111b2e}.dash-preview{width:90%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dash-preview>div{background:#0a1321;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:18px;color:white}.dash-preview small{display:block;font-size:8px;color:#758ca4;margin-bottom:8px}.dash-preview b{font-size:26px}.dash-wide{grid-column:1/-1}.bars{display:flex;align-items:end;height:70px;gap:8px}.bars i{flex:1;background:linear-gradient(#57ddff,#377cff);border-radius:3px}.bars i:nth-child(1){height:35%}.bars i:nth-child(2){height:55%}.bars i:nth-child(3){height:42%}.bars i:nth-child(4){height:72%}.bars i:nth-child(5){height:63%}.bars i:nth-child(6){height:90%}
.form-visual{background:#e8eef5}.form-preview{width:82%;background:#fff;padding:24px;border-radius:15px;box-shadow:0 20px 45px rgba(30,50,70,.12)}.form-preview label{display:block;font-size:9px;font-weight:800;color:#627486;margin:8px 0 5px}.fake-input{height:28px;border:1px solid #dbe3eb;background:#f8fafc;border-radius:7px}.fake-input.short{width:65%}.fake-input.tall{height:52px}.form-preview button{margin-top:13px;background:#2f78ff}
.project-copy{padding:25px}.type{font-size:9px;letter-spacing:.13em;color:#2576e8;font-weight:900}.project-copy h3{font-size:25px;margin:8px 0}.project-copy p{font-size:14px;color:#64788b;line-height:1.7}.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}.chips b{font-size:9px;background:#edf3fa;color:#536b80;padding:7px 9px;border-radius:999px}
.code-hero{display:flex;align-items:center;justify-content:space-between;gap:50px}.js-badge{font:900 120px/1 'JetBrains Mono';width:220px;height:220px;display:grid;place-items:center;border-radius:35px;background:#f5d329;color:#171717;box-shadow:0 35px 70px rgba(0,0,0,.28);transform:rotate(4deg)}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.demo-card{background:white;border:1px solid #e0e7ee;border-radius:20px;padding:28px;box-shadow:0 12px 30px rgba(24,43,61,.045)}.demo-card.wide{grid-column:1/-1}
.demo-title{display:flex;justify-content:space-between;gap:20px;align-items:start}.demo-title>div{display:flex;align-items:center;gap:12px}.demo-title h3{font-size:22px;margin:0}.demo-num{font:900 11px 'JetBrains Mono';color:#2f78ff}.tech-pill{font-size:9px;font-weight:900;color:#276fdf;background:#edf4ff;padding:7px 9px;border-radius:999px;white-space:nowrap}.demo-card>p{color:#677b8e;font-size:13px;line-height:1.7;margin:12px 0 20px}
.estimator-options{display:grid;gap:8px}.estimator-options label{display:flex;align-items:center;gap:10px;background:#f7f9fc;border:1px solid #e6ebf0;padding:12px;border-radius:10px;font-size:12px;color:#506477}.estimator-options input{accent-color:#2f78ff}.estimator-options b{margin-left:auto;color:#0d1c30}
.estimate-output{display:flex;align-items:end;justify-content:space-between;margin-top:17px;padding:18px;border-radius:12px;background:#0d1d31;color:white}.estimate-output span{font-size:9px;letter-spacing:.12em;color:#8199b2;font-weight:900}.estimate-output strong{font-size:32px;color:#5adfff}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.input-row label{font-size:10px;font-weight:900;color:#607487}.input-row input,.input-row select,.dashboard-controls input,.dashboard-controls select{width:100%;margin-top:7px;border:1px solid #dae3ec;background:#f8fafc;border-radius:9px;padding:12px;color:#172433}
.poker-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.poker-results div{background:#0c1c2e;color:white;padding:16px;border-radius:12px}.poker-results span{display:block;font-size:9px;color:#849aaf;margin-bottom:7px}.poker-results strong{font-size:29px}.logic-message{margin-top:10px;background:#eef9f5;color:#247257;padding:13px;border-radius:10px;font-size:11px;font-weight:800}
.dashboard-controls{display:grid;grid-template-columns:1fr 190px auto;gap:10px;align-items:end;margin-bottom:15px}.dashboard-controls input,.dashboard-controls select{margin:0}.result-count{background:#edf3fa;color:#547086;padding:12px;border-radius:9px;font-size:11px;font-weight:900;white-space:nowrap}
.data-table-wrap{overflow:auto;border:1px solid #e2e9f0;border-radius:12px}.data-table{width:100%;border-collapse:collapse;min-width:650px}.data-table th,.data-table td{text-align:left;padding:13px 15px;border-bottom:1px solid #e8edf2;font-size:12px}.data-table th{font-size:9px;letter-spacing:.1em;color:#74879a;background:#f8fafc}.status-pill{display:inline-block;padding:6px 8px;border-radius:999px;font-size:9px;font-weight:900}.status-Active{background:#e9f9f1;color:#21835b}.status-Training{background:#edf4ff;color:#2f6dce}.status-Off-Today{background:#fff1e7;color:#a75a22}
.code-explainer{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:85px 8vw;background:#081423}.code-explainer h2{font-size:clamp(34px,4.2vw,54px);line-height:1.05;letter-spacing:-.04em;margin:0 0 15px}.code-explainer p{color:#91a7bd;line-height:1.7}.code-explainer pre{background:#06101b;border:1px solid rgba(255,255,255,.07);padding:27px;border-radius:16px;overflow:auto;color:#dce8f5;font:500 13px/1.9 'JetBrains Mono'}
.skills-section{padding-top:65px}.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.skill-grid article{background:white;border:1px solid #e1e8ef;border-radius:18px;padding:25px}.skill-logo{width:47px;height:47px;border-radius:12px;display:grid;place-items:center;font-weight:900;margin-bottom:18px}.html-logo{background:#fff0e9;color:#e55b2b}.css-logo{background:#eaf3ff;color:#276ad5}.js-logo{background:#fff7ca;color:#25231b}.data-logo{background:#eaf9f5;color:#168065}.skill-grid h3{margin:0 0 8px}.skill-grid p{font-size:12px;line-height:1.65;color:#687c8f;min-height:60px}.meter{height:6px;background:#ecf1f5;border-radius:999px;overflow:hidden}.meter span{display:block;height:100%;background:linear-gradient(90deg,#337cff,#33cfe8);border-radius:999px}
.language-note{display:flex;gap:20px;align-items:center;background:#0e1d31;color:white;margin:25px 0;border-radius:18px;padding:25px}.note-icon{font-size:37px}.language-note h3{margin:0 0 7px}.language-note p{margin:0;color:#a8bacd;font-size:13px;line-height:1.65}
.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.capability-grid div{background:white;border:1px solid #e1e8ef;border-radius:12px;padding:15px;font-size:12px;font-weight:800;color:#526779}.capability-grid b{color:#2b7bea;margin-right:7px}
.contact-page{min-height:calc(100vh - 76px);display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw;align-items:center;padding:90px 7vw;background:radial-gradient(circle at 10% 10%,rgba(45,120,255,.18),transparent 30%),#081423}.contact-copy h1{font-size:clamp(52px,7vw,86px)}.contact-points{display:grid;gap:10px;margin-top:35px}.contact-points div{display:flex;gap:13px;align-items:center;color:#9eb1c5;font-size:13px}.contact-points b{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:rgba(55,126,255,.12);color:#61a1ff}
.contact-form{background:white;padding:30px;border-radius:20px;box-shadow:0 35px 80px rgba(0,0,0,.25);color:#0c1724}.contact-form h2{margin:0 0 20px}.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #dce4ec;background:#f8fafc;border-radius:10px;padding:14px;margin-bottom:10px;color:#172433}.contact-form textarea{resize:vertical}.form-button{width:100%;background:#0d1d31;color:white}.form-note{font-size:10px;color:#8494a4;text-align:center}
footer{display:flex;justify-content:space-between;align-items:center;padding:33px 6vw;background:#06101c;border-top:1px solid rgba(255,255,255,.07);color:#71869c;font-size:12px}.footer-brand{display:flex;align-items:center;gap:11px;color:white}.footer-brand div{display:flex;flex-direction:column}.footer-brand small{color:#71869c;margin-top:3px}
@media(max-width:980px){
  nav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;background:#091524;padding:18px 6vw;border-bottom:1px solid var(--line)}
  nav.show{display:flex}.menu-btn{display:block}.nav-link{text-align:left}
  .hero-grid,.contact-page,.code-explainer{grid-template-columns:1fr}.hero-card{transform:none}
  .service-grid{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr}
  .demo-grid{grid-template-columns:1fr}.demo-card.wide{grid-column:auto}.skill-grid{grid-template-columns:1fr 1fr}.capability-grid{grid-template-columns:1fr 1fr}
  .code-hero{align-items:flex-start}.js-badge{width:150px;height:150px;font-size:78px}.dashboard-controls{grid-template-columns:1fr 1fr}.result-count{grid-column:1/-1}
}
@media(max-width:640px){
  .hero{padding:65px 6vw 75px}.hero h1,.page-hero h1,.contact-copy h1{font-size:47px}
  .hero-actions,.proof-row,.dark-cta,.code-hero{flex-direction:column;align-items:stretch}.proof-row div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:12px}
  .service-grid,.skill-grid,.capability-grid,.input-row,.poker-results,.contact-form .row{grid-template-columns:1fr}
  .light-section,.projects-area,.demo-section,.skills-section{padding:70px 5vw}
  .page-hero{padding:70px 6vw 55px}.visual{min-height:275px}.mock-app{width:100%}
  .dashboard-controls{grid-template-columns:1fr}.code-explainer{padding:70px 6vw;gap:30px}
  .contact-page{padding:65px 5vw}.language-note{align-items:flex-start}
  footer{flex-direction:column;gap:16px;text-align:center}
}