:root{
  --bg:#08111b;--bg2:#0d1824;--panel:#122131;--panel2:#172a3c;--line:rgba(150,190,225,.22);
  --text:#f7fbff;--muted:#aab9c8;--blue:#1688ff;--blue2:#35adff;--green:#24d48a;
  --shadow:0 25px 80px rgba(0,0,0,.45);--radius:18px
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 70%);z-index:-2}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.section{padding:105px 0;position:relative}
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,17,27,.82);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.3s}
.site-header.scrolled{border-color:var(--line);background:rgba(8,17,27,.94)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-code{font-family:"Space Grotesk";font-size:28px;font-weight:700;color:var(--blue2);letter-spacing:-2px}
.brand strong{font-family:"Space Grotesk";font-size:20px;display:block;line-height:1}
.brand small{display:block;color:#6f7d8d;font-size:7px;letter-spacing:1.1px;margin-top:4px}
.nav-links{display:flex;align-items:center;gap:27px;font-size:13px;color:#c7d0da}
.nav-links a{transition:.25s}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--blue);padding:12px 17px;border-radius:7px;color:#fff!important;box-shadow:0 8px 28px rgba(8,125,255,.25)}
.nav-cta span{margin-left:5px}
.menu-toggle{display:none;background:none;border:0;color:#fff;width:38px}
.menu-toggle span{display:block;height:2px;background:#fff;margin:6px 0}
.hero{min-height:760px;padding-top:155px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 78% 45%,rgba(0,115,255,.12),transparent 35%),radial-gradient(circle at 15% 15%,rgba(0,153,255,.08),transparent 25%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:55px}
.eyebrow{color:var(--blue2);font-size:11px;font-weight:700;letter-spacing:2px;margin-bottom:14px}
.eyebrow span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue2);margin-right:8px;box-shadow:0 0 15px var(--blue2)}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif}
h1{font-size:clamp(44px,5.3vw,70px);line-height:1.02;letter-spacing:-3px}
h1 span,h2 span{color:var(--blue2)}
.hero-lead{color:var(--muted);max-width:610px;font-size:16px;margin:25px 0 29px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:13px 20px;border-radius:7px;font-size:13px;font-weight:700;border:1px solid transparent;transition:.25s;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 35px rgba(8,125,255,.23)}
.btn-primary:hover{transform:translateY(-2px);background:#1688ff}
.btn-ghost{border-color:#526171;color:#e8eef5}
.btn-ghost:hover{border-color:var(--blue);background:rgba(8,125,255,.06)}
.hero-points{display:flex;gap:24px;margin-top:35px;color:#aeb9c5;font-size:11px}
.hero-points span:first-letter{color:var(--blue2)}
.hero-visual{height:500px;position:relative;display:flex;align-items:center;justify-content:center}
.code-window{width:min(520px,100%);border:1px solid rgba(123,166,207,.3);border-radius:15px;background:linear-gradient(145deg,#101923,#070b11);box-shadow:var(--shadow),0 0 90px rgba(0,118,255,.12);transform:perspective(900px) rotateY(-7deg) rotateX(2deg);overflow:hidden}
.window-bar{height:42px;background:#0d141d;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 15px;gap:7px;color:#718092;font-size:10px}
.window-bar i{width:8px;height:8px;border-radius:50%;background:#283849}
.window-bar span{margin-left:auto;margin-right:auto}
.code-content{font-family:Consolas,monospace;color:#91a0b0;font-size:15px;line-height:2.05;padding:28px 30px;min-height:340px;background:radial-gradient(circle at 70% 30%,rgba(0,132,255,.09),transparent 45%)}
.c-purple{color:#bf8cff}.c-blue{color:#57b7ff}.c-green{color:#5ee5a4}.c-white{color:#eef4fb}
.code-line{margin-top:15px}.code-line b{color:var(--blue2);animation:blink 1s infinite}
@keyframes blink{50%{opacity:0}}
.floating-card{position:absolute;display:flex;align-items:center;gap:10px;background:rgba(13,22,32,.93);border:1px solid rgba(74,142,206,.32);border-radius:11px;padding:12px 15px;box-shadow:0 20px 50px rgba(0,0,0,.5);backdrop-filter:blur(12px);font-size:11px}
.floating-card small{display:block;color:#738194;font-size:7px;letter-spacing:1px}.floating-card strong{display:block}.floating-card b{color:var(--green)}
.mini-icon{color:var(--blue2);font-size:20px}.card-site{left:0;top:105px}.card-app{right:0;bottom:100px}.status{font-size:7px;color:var(--green);border:1px solid rgba(36,212,138,.25);padding:3px 6px;border-radius:20px}
.orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.orb-1{width:170px;height:170px;border:1px solid rgba(21,145,255,.2);right:15%;top:0}.orb-2{width:8px;height:8px;background:var(--blue2);box-shadow:0 0 30px 10px rgba(0,145,255,.3);left:10%;bottom:15%}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.section-head>p{max-width:450px;color:var(--muted);font-size:13px}.section-head h2,.centered h2{font-size:38px;line-height:1.1;letter-spacing:-1.5px}.centered{text-align:center;display:block}.centered>p{margin:14px auto 0}
.services{background:linear-gradient(180deg,transparent,#070c12 35%,transparent)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{position:relative;padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(150deg,rgba(16,25,36,.9),rgba(8,13,19,.9));min-height:390px;overflow:hidden;transition:.3s}
.service-card:hover{transform:translateY(-6px);border-color:rgba(28,143,255,.45);box-shadow:0 20px 55px rgba(0,0,0,.25)}
.service-card.featured{border-color:rgba(8,125,255,.45);background:radial-gradient(circle at 100% 0,rgba(0,123,255,.12),transparent 35%),linear-gradient(150deg,#0d1b2a,#080e15)}
.service-number{position:absolute;right:24px;top:22px;color:#273544;font-size:12px}.service-icon{font-family:monospace;color:var(--blue2);font-size:30px;margin-bottom:24px}
.service-card h3{font-size:21px;margin-bottom:10px}.service-card p{font-size:12px;color:var(--muted);min-height:58px}
.service-card ul{list-style:none;margin:16px 0 22px;color:#b7c2ce;font-size:11px}.service-card li{margin:8px 0}.service-card li:before{content:"✓";color:var(--blue2);margin-right:9px}
.service-card>a{color:var(--blue2);font-size:11px;font-weight:700}
.projects{background:#0b1722}.project-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.project-card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#0a1119;transition:.3s}.project-card:hover{transform:translateY(-4px);border-color:rgba(28,143,255,.4)}
.project-screen{height:250px;position:relative;overflow:hidden;background:#101923;border-bottom:1px solid var(--line)}
.project-large .project-screen{height:300px}.website-screen{padding:14px;background:linear-gradient(135deg,#09121c,#102538)}
.mock-nav{height:25px;display:flex;align-items:center;gap:18px;font-size:7px;color:#8494a6}.mock-nav b{color:#fff;margin-right:auto;font-size:10px}.mock-nav button{font-size:7px;border:0;border-radius:4px;background:var(--blue);color:white;padding:5px 9px}
.mock-hero{position:absolute;left:45px;top:82px}.mock-hero small{color:#36a7ff;font-size:7px}.mock-hero strong{display:block;font-size:28px;line-height:1.1;margin-top:10px}.mock-hero em{color:#2a9cff;font-style:normal}.mock-btn{margin-top:17px;width:70px;height:15px;border-radius:3px;background:var(--blue)}
.attendance-screen,.leave-screen{display:flex}.mock-sidebar{width:78px;background:#09111a;padding:18px 12px;display:flex;flex-direction:column;gap:20px;color:#5c6d7f;font-size:9px}.mock-sidebar b{color:#dfe8f2;font-size:9px;margin-bottom:5px}.mock-sidebar span:first-of-type{color:var(--blue2)}
.mock-dashboard{padding:22px 20px;flex:1;font-size:8px}.mock-dashboard>small{font-size:7px;color:var(--blue2);letter-spacing:1px}.mock-dashboard h4{font-size:18px;margin:5px 0 15px}.employee,.leave-row{display:flex;justify-content:space-between;align-items:center;padding:9px;border-bottom:1px solid rgba(255,255,255,.05);font-size:8px}.employee b{font-size:6px;color:var(--green);background:rgba(36,212,138,.1);padding:4px;border-radius:5px}.employee.off b{color:#ff6978;background:rgba(255,80,100,.08)}
.leave-tabs{display:flex;gap:12px;color:#728092;margin:14px 0;font-size:7px}.leave-tabs b{color:#fff;border-bottom:1px solid var(--blue);padding-bottom:5px}.leave-row b{color:var(--blue2);font-size:6px}
.admin-screen{padding:20px}.admin-top{display:flex;justify-content:space-between;font-size:9px}.admin-top span{color:var(--green)}.admin-chart{height:125px;display:flex;align-items:end;gap:13px;padding:15px 20px;border-bottom:1px solid var(--line)}.admin-chart i{display:block;flex:1;background:linear-gradient(to top,var(--blue),#45b6ff);border-radius:3px 3px 0 0;opacity:.85}.admin-stats{display:flex;gap:30px;padding:17px 20px}.admin-stats b{font-size:17px}.admin-stats small{font-size:6px;color:#667688;letter-spacing:.5px}
.project-info{padding:18px;display:flex;justify-content:space-between;gap:15px}.project-info small{color:var(--blue2);font-size:7px;letter-spacing:1px}.project-info h3{font-size:16px;margin:5px 0}.project-info p{color:var(--muted);font-size:10px;max-width:510px}.project-arrow{color:var(--blue2);font-size:21px}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;align-items:center}.about-visual{position:relative;min-height:360px;display:flex;align-items:center}.about-code{width:100%;background:#0c1926;border:1px solid var(--line);border-radius:15px;padding:35px 30px;font:14px/2 Consolas,monospace;color:#8190a0;box-shadow:var(--shadow)}.about-badge{position:absolute;right:-22px;bottom:18px;background:#0e1b28;border:1px solid rgba(28,143,255,.45);border-radius:12px;padding:18px 22px;display:flex;gap:10px;align-items:center}.about-badge strong{font:700 30px "Space Grotesk";color:var(--blue2)}.about-badge span{font-size:9px;color:#9aa7b5}.about-copy h2{font-size:40px;line-height:1.12;letter-spacing:-1.5px;margin-bottom:20px}.about-copy p{color:var(--muted);font-size:13px;margin:12px 0}.about-checks{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:25px;color:#c3ccd6;font-size:11px}.about-checks span: first-letter{color:var(--blue2)}
.benefits{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a1520}.benefit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:25px}.benefit{text-align:center}.benefit>span{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid rgba(8,125,255,.4);border-radius:50%;color:var(--blue2);font-size:22px;margin-bottom:14px}.benefit h3{font-size:13px;margin-bottom:6px}.benefit p{font-size:10px;color:var(--muted)}
.tech-grid{display:grid;grid-template-columns:repeat(8,1fr);border:1px solid var(--line);border-radius:15px;overflow:hidden}.tech-grid div{padding:24px 10px;text-align:center;border-right:1px solid var(--line);transition:.25s}.tech-grid div:last-child{border-right:0}.tech-grid div:hover{background:rgba(8,125,255,.06)}.tech-grid b{display:block;font-family:"Space Grotesk";font-size:24px;color:#e7edf5}.tech-grid span{display:block;font-size:9px;color:#728092;margin-top:4px}
.process{background:#0b1722}.process-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:15px}.process-step{text-align:center}.process-step>b{display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border:1px solid rgba(8,125,255,.55);border-radius:50%;color:var(--blue2);font:600 14px "Space Grotesk";margin-bottom:14px}.process-step h3{font-size:13px}.process-step p{font-size:9px;color:var(--muted);margin-top:5px}.process-line{color:#1b8eff;font-size:24px;padding-top:13px}
.contact-section{padding-bottom:85px}.contact-box{display:grid;grid-template-columns:1fr .8fr;gap:70px;padding:55px;border:1px solid rgba(8,125,255,.35);border-radius:18px;background:radial-gradient(circle at 10% 50%,rgba(0,119,255,.11),transparent 35%),linear-gradient(135deg,#091523,#070c12);box-shadow:var(--shadow)}.contact-copy h2{font-size:46px;line-height:1.05;letter-spacing:-2px}.contact-copy>p{color:var(--muted);font-size:13px;max-width:470px;margin:18px 0 25px}.contact-details{display:flex;flex-direction:column;gap:10px;color:#c4ced9;font-size:12px}.contact-details a:hover{color:var(--blue2)}.contact-details>a:first-letter,.contact-details>span:first-letter{color:var(--blue2)}
.contact-form{display:flex;flex-direction:column;gap:13px}.contact-form label{font-size:10px;color:#98a5b4}.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:6px;background:#07101a;border:1px solid var(--line);border-radius:7px;color:#fff;padding:11px 12px;outline:none;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(8,125,255,.7);box-shadow:0 0 0 3px rgba(8,125,255,.08)}.contact-form small{color:#69798b;font-size:8px}.honeypot{display:none!important}
.footer{border-top:1px solid var(--line);padding:55px 0 20px;background:#07101a}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:45px}.footer-brand p{font-size:10px;color:#69788a;max-width:260px;margin-top:18px}.footer h4{font-size:10px;margin-bottom:13px;color:#fff}.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:8px}.footer-grid a,.footer-grid span{font-size:10px;color:#738193}.footer-grid a:hover{color:var(--blue2)}.footer-bottom{border-top:1px solid var(--line);margin-top:45px;padding-top:18px;display:flex;justify-content:space-between;color:#536171;font-size:8px}.footer-bottom a:hover{color:#fff}
.cursor-glow{position:fixed;width:260px;height:260px;border-radius:50%;background:rgba(0,120,255,.06);filter:blur(40px);pointer-events:none;transform:translate(-50%,-50%);z-index:-1}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}

@media(max-width:900px){
 .nav-links{gap:15px}.nav-links a:not(.nav-cta){display:none}
 .hero-grid,.about-grid,.contact-box{grid-template-columns:1fr}.hero{padding-top:120px}.hero-visual{height:430px}.hero-copy{order:1}.hero-visual{order:2}
 .service-grid{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}.project-large .project-screen{height:250px}
 .benefit-grid{grid-template-columns:repeat(3,1fr)}.tech-grid{grid-template-columns:repeat(4,1fr)}.tech-grid div:nth-child(4){border-right:0}.tech-grid div:nth-child(n+5){border-top:1px solid var(--line)}
 .process-grid{grid-template-columns:1fr 1fr 1fr;gap:35px}.process-line{display:none}
 .contact-box{gap:40px}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}
}
@media(max-width:640px){
 .container{width:min(100% - 28px,1160px)}.section{padding:75px 0}.nav{height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:14px;right:14px;padding:15px;flex-direction:column;align-items:stretch;background:#0a1119;border:1px solid var(--line);border-radius:12px}.nav-links.open{display:flex}.nav-links a:not(.nav-cta){display:block;padding:10px}.nav-cta{text-align:center}.hero{min-height:auto;padding-top:115px}.hero-grid{gap:10px}h1{font-size:43px;letter-spacing:-2px}.hero-lead{font-size:14px}.hero-points{flex-direction:column;gap:8px}.hero-visual{height:360px}.code-window{transform:none}.code-content{font-size:11px;padding:22px;min-height:280px}.card-site{left:-3px;top:35px}.card-app{right:-3px;bottom:30px}.floating-card{padding:9px 11px}.section-head{display:block}.section-head>p{margin-top:15px}.section-head h2,.centered h2{font-size:30px}.service-card{min-height:0}.project-screen,.project-large .project-screen{height:225px}.project-info{padding:15px}.about-grid{gap:45px}.about-code{font-size:10px;padding:25px 18px}.about-badge{right:-5px}.about-copy h2{font-size:31px}.about-checks{grid-template-columns:1fr}.benefit-grid{grid-template-columns:1fr 1fr}.tech-grid{grid-template-columns:repeat(2,1fr)}.tech-grid div{border-right:0;border-bottom:1px solid var(--line)}.process-grid{grid-template-columns:1fr}.contact-box{padding:30px 22px}.contact-copy h2{font-size:37px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:7px}
}