:root{
  --bg:#030711;
  --bg-soft:#071020;
  --card:#0a1221;
  --card-2:#0e1830;
  --ink:#eef6ff;
  --muted:#a9b9d3;
  --line:rgba(169, 214, 255, 0.14);
  --blue:#3ba7ff;
  --blue-2:#7fd0ff;
  --ice:#dff6ff;
  --glow:0 0 24px rgba(59,167,255,.28);
  --radius:22px;
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top, rgba(59,167,255,.18), transparent 24%),
    linear-gradient(180deg, #02050d 0%, #040913 32%, #051021 100%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.container{width:min(calc(100% - 32px), var(--max)); margin:0 auto}
.section{padding:88px 0; position:relative}
.section-alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.section-head{max-width:760px;margin-bottom:34px}
.section-head h2,.intro-strip h2,.contact-copy h2{font-size:clamp(2rem, 4vw, 3rem);line-height:1.05;margin:0 0 12px}
.section-head p,.intro-strip p,.contact-copy p,.hero-text,.form-note{color:var(--muted)}
.section-kicker,.eyebrow{
  display:inline-block;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--blue-2);
  margin:0 0 14px;
}

.site-header-2{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,1);
  border-bottom:1px solid var(--line);
}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,1);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:space-between;
  min-height:92px;
  gap:14px;
}
.brand{display:flex;align-items:center;min-height:60px;}
.brand-logo{height:58px;width:auto;}
.brand-logo-large{height:60px;width:auto;}
.nav-toggle{
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  width:48px;height:48px;
  display:grid;gap:5px;place-content:center;
  cursor:pointer;
}
.nav-toggle span{display:block;width:21px;height:2px;background:var(--ice);border-radius:99px}
.site-nav{
  grid-column:1 / -1;
  display:none;
  padding:8px 0 18px;
  gap:8px;
}
.site-nav.open{display:grid}
.site-nav a{
  padding:12px 14px;
  border-radius:12px;
  color:var(--ink);
}
.site-nav a:hover{background:rgba(255,255,255,.05)}
.nav-cta{
  background:linear-gradient(135deg, rgba(82,186,255,.28), rgba(161,235,255,.18));
  border:1px solid rgba(151,223,255,.22);
}

.hero{position:relative;overflow:hidden;padding:48px 0 72px;border-bottom:1px solid var(--line)}
.hero-inner{display:grid;gap:28px;align-items:center;position:relative;z-index:2}
.hero-copy{max-width:760px}
.hero h1{
  font-size:clamp(2.7rem, 6vw, 5.6rem);
  line-height:.95;
  margin:0 0 18px;
  letter-spacing:-.04em;
}
.hero h1 span{
  display:block;
  color:var(--blue-2);
  text-shadow:0 0 24px rgba(119,211,255,.18);
}
.hero-text{font-size:1.05rem;max-width:760px;margin:0 0 26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 18px;border-radius:14px;border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, var(--blue), #78dbff);
  color:#04101d;
  box-shadow:0 14px 38px rgba(60,172,255,.25);
  font-weight:800;
}
.btn-secondary{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.12);
}
.mini-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.mini-stats div{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(141,215,255,.12);
  border-radius:18px;
  padding:16px;
}
.mini-stats strong{display:block;font-size:1.1rem;margin-bottom:4px}
.mini-stats span{color:var(--muted);font-size:.92rem}

.hero-card{
  position:relative;
  border-radius:28px;
  min-height:340px;
}
.hero-card-ring{
  position:absolute;inset:0;border-radius:28px;
  background:linear-gradient(135deg, rgba(124,214,255,.34), rgba(43,115,255,.08));
  filter:blur(0.2px);
  box-shadow:0 0 0 1px rgba(140,223,255,.16), 0 30px 80px rgba(0,0,0,.35);
}
.hero-card-content{
  position:relative;
  background:linear-gradient(180deg, rgba(7,15,30,.84), rgba(6,13,26,.92));
  border:1px solid rgba(144,223,255,.14);
  border-radius:28px;
  padding:28px;
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.hero-card-content::after{
  content:"";
  position:absolute;inset:auto -10% -40% auto;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle, rgba(110,208,255,.22), transparent 70%);
}
.hero-card-label{color:var(--blue-2);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;margin:0 0 18px}
.hero-card ul{margin:0;padding-left:18px;display:grid;gap:12px;color:#dceeff}
.hero-card li::marker{color:var(--blue)}

.hero-bg{position:absolute;inset:0;pointer-events:none}
.glow,.beam,.grid,.snow{position:absolute;display:block}
.glow{border-radius:50%;filter:blur(24px);opacity:.45;animation:floatGlow 14s ease-in-out infinite}
.glow-1{width:340px;height:340px;left:-90px;top:80px;background:radial-gradient(circle, rgba(58,167,255,.34), transparent 70%)}
.glow-2{width:320px;height:320px;right:-60px;top:30px;background:radial-gradient(circle, rgba(98,216,255,.24), transparent 72%);animation-delay:-4s}
.glow-3{width:420px;height:220px;left:30%;bottom:-20px;background:radial-gradient(circle, rgba(77,129,255,.18), transparent 72%);animation-delay:-7s}
.grid{
  inset:auto 0 -120px 0;height:380px;
  background:
    linear-gradient(rgba(120,200,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,200,255,.08) 1px, transparent 1px);
  background-size:44px 44px;
  transform:perspective(800px) rotateX(72deg);
  transform-origin:center top;
  opacity:.28;
}
.beam{
  height:1px;background:linear-gradient(90deg, transparent, rgba(173,240,255,.95), transparent);
  box-shadow:0 0 18px rgba(173,240,255,.55);
  animation:beamMove 10s linear infinite;
}
.beam-1{left:8%;right:12%;top:30%}
.beam-2{left:18%;right:8%;top:74%;animation-delay:-5s}
.snow{
  width:3px;height:3px;border-radius:50%;
  background:#d7f5ff;
  box-shadow:
    14vw 8vh 0 0 rgba(215,245,255,.8),
    28vw 18vh 0 1px rgba(215,245,255,.6),
    46vw 9vh 0 0 rgba(215,245,255,.9),
    63vw 24vh 0 1px rgba(215,245,255,.65),
    74vw 8vh 0 0 rgba(215,245,255,.7),
    86vw 19vh 0 1px rgba(215,245,255,.55),
    9vw 38vh 0 1px rgba(215,245,255,.7),
    35vw 44vh 0 0 rgba(215,245,255,.85),
    56vw 46vh 0 1px rgba(215,245,255,.7),
    82vw 40vh 0 0 rgba(215,245,255,.8);
  animation:snowDrift 18s linear infinite;
  opacity:.55;
}
.snow-2{animation-duration:24s;opacity:.38;transform:scale(1.2)}
.snow-3{animation-duration:32s;opacity:.25;transform:scale(.9)}

.intro-strip{padding-top:54px;padding-bottom:54px}
.intro-strip-inner{
  display:grid;gap:18px;
  align-items:center;
  padding:28px;
  border:1px solid rgba(144,223,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-radius:28px;
}

.card{
  background:linear-gradient(180deg, rgba(11,19,35,.86), rgba(7,13,25,.95));
  border:1px solid rgba(144,223,255,.12);
  border-radius:24px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.service-card{padding:24px}
.service-card h3{margin:0 0 10px;font-size:1.2rem}
.service-card p{margin:0;color:var(--muted)}
.icon-wrap{
  width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;
  margin-bottom:18px;
  background:linear-gradient(135deg, rgba(64,177,255,.25), rgba(141,223,255,.08));
  border:1px solid rgba(144,223,255,.16);
  box-shadow:var(--glow);
}
.icon-wrap svg{width:27px;height:27px;fill:none;stroke:#dff6ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.timeline{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}
.timeline-card{padding:22px;position:relative;overflow:hidden}
.timeline-step{display:inline-flex;min-width:52px;min-height:52px;border-radius:50%;align-items:center;justify-content:center;background:rgba(56,166,255,.14);border:1px solid rgba(136,220,255,.18);font-weight:800;color:var(--blue-2);margin-bottom:16px}
.timeline-card h3{margin:0 0 8px}
.timeline-card p{margin:0;color:var(--muted)}

.tech-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}
.tech-badge{
  min-height:88px;
  display:flex;align-items:center;gap:14px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(144,223,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.tech-logo{
  flex:0 0 54px;
  width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:800;
  letter-spacing:-.04em;
  color:#04111f;
}
.tech-badge span:last-child{color:var(--ink);font-weight:600}
.dotnet{background:linear-gradient(135deg, #88d8ff, #4f7eff)}
.azure{background:linear-gradient(135deg, #8ce8ff, #00a4ef)}
.sql{background:linear-gradient(135deg, #d7f5ff, #72c0ff)}
.api{background:linear-gradient(135deg, #aff6ff, #55b6ff)}
.js{background:linear-gradient(135deg, #dbfbff, #9ed0ff)}
.html{background:linear-gradient(135deg, #b4f5ff, #59b4ff)}
.css{background:linear-gradient(135deg, #d7f7ff, #78c9ff)}
.git{background:linear-gradient(135deg, #c5fbff, #72aeff)}

.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
}
.contact-points{display:grid;gap:14px;margin-top:26px}
.contact-point{
  padding:16px 18px;border:1px solid rgba(144,223,255,.12);border-radius:18px;
  background:rgba(255,255,255,.02);
}
.contact-point strong{display:block;margin-bottom:6px}
.contact-point a,.footer-links a{color:var(--blue-2)}
.form-card{padding:22px}
.contact-form{display:grid;gap:14px}
.contact-form label{display:grid;gap:8px}
.contact-form span{font-weight:600}
.input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(146,226,255,.16);
  background:rgba(2,8,18,.78);
  color:var(--ink);
  padding:14px 15px;
  outline:none;
}
.input:focus{border-color:rgba(133,223,255,.55);box-shadow:0 0 0 4px rgba(68,177,255,.12)}
textarea.input{resize:vertical;min-height:150px}
.form-submit{width:100%}
.form-note{margin:0;font-size:.95rem}

.site-footer{padding:30px 0 46px;border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.footer-inner p{margin:.35rem 0 0;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:16px}

@keyframes floatGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-12px,0) scale(1.06)}
}
@keyframes beamMove{
  0%{opacity:.1;transform:translateX(-24px)}
  20%,80%{opacity:.9}
  100%{opacity:.08;transform:translateX(24px)}
}
@keyframes snowDrift{
  0%{transform:translateY(-8px)}
  100%{transform:translateY(38px)}
}

@media (min-width: 940px){
  .header-inner{grid-template-columns:auto 1fr}
  .nav-toggle{display:none}
  .site-nav{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    grid-column:auto;
    padding:0;
  }
  .brand-logo{height:66px}
  .hero-inner{grid-template-columns:minmax(0, 1.25fr) minmax(340px, .75fr)}
  .intro-strip-inner{grid-template-columns:1.1fr .9fr}
}

@media (max-width: 1024px){
  .service-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .timeline{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .tech-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .contact-layout{grid-template-columns:1fr}
}

@media (max-width: 680px){
  .section{padding:72px 0}
  .header-inner{min-height:82px}
  .brand-logo{height:46px}
  .hero{padding-top:28px;padding-bottom:58px}
  .hero h1{font-size:clamp(2.35rem, 11vw, 4rem)}
  .hero-text{font-size:1rem}
  .mini-stats{grid-template-columns:1fr}
  .service-grid,
  .timeline,
  .tech-grid{grid-template-columns:1fr}
  .card,.intro-strip-inner{border-radius:20px}
  .hero-card-content{padding:22px}
  .footer-inner{flex-direction:column}
}