:root{
  --bg:#060d1f;
  --bg2:#0c1632;
  --card:rgba(8,16,38,.82);
  --card2:rgba(6,13,31,.92);
  --line:rgba(145,181,255,.18);
  --muted:#c7d3ea;
  --soft:#97a9cb;
  --blue:#254cff;
  --blue2:#6da7ff;
  --green:#0d5e1d;
  --cta1:#1b61db;
  --cta2:#1247ad;
  --nology:#afb3bb;
  --shadow:0 24px 70px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, Arial, Helvetica, sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(70,114,255,.16), transparent 22%),
    radial-gradient(circle at 25% 0%, rgba(38,110,230,.08), transparent 25%),
    linear-gradient(180deg, #071024 0%, #050a16 100%);
}
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.08) 0 1px, transparent 1.6px) 0 0/180px 180px,
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.06) 0 1px, transparent 1.7px) 0 0/220px 220px;
  opacity:.45;
}
.site-shell{width:min(1280px, calc(100% - 28px)); margin:14px auto 36px; position:relative; z-index:1}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 20px; border-radius:24px; background:rgba(5,10,24,.72);
  border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter: blur(10px);
  position:sticky; top:10px; z-index:20;
}
.brand{display:flex; align-items:center; gap:14px; min-width:0; text-decoration:none; color:#fff}
.brand-mark-shell,.mini-logo{
  width:68px; height:68px; display:grid; place-items:center; flex:0 0 68px;
}
.logo-rotator{
  position:relative; width:58px; height:58px; transform-style:preserve-3d;
  animation:logoSpinY 8.5s linear infinite;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.32));
}
.logo-rotator img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transform-origin:center center;
}
.logo-back5{transform:translateZ(-10px) translateX(4px); opacity:.16}
.logo-back4{transform:translateZ(-8px) translateX(3px); opacity:.24}
.logo-back3{transform:translateZ(-6px) translateX(2px); opacity:.34}
.logo-back2{transform:translateZ(-4px) translateX(1px); opacity:.50}
.logo-back1{transform:translateZ(-2px) translateX(.5px); opacity:.72}
.logo-front{transform:translateZ(0)}
.logo-glint{
  position:absolute; inset:12% 14% 14% 10%;
  background:linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.75) 46%, rgba(255,255,255,.12) 54%, transparent 60%);
  mix-blend-mode:screen; opacity:.22; transform:skewX(-18deg);
  
  border-radius:18px; pointer-events:none;
}
@keyframes logoSpinY{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.brand-text{min-width:0}
.brand-name-line{font-weight:800; font-size:clamp(1.15rem, 2vw, 1.9rem); line-height:1; letter-spacing:-.03em; white-space:nowrap}
.tech-white{color:#fff}
.nology-solid{color:var(--nology)}
.for-you-blue,.brand-reg{color:var(--blue); font-style:italic}
.brand-reg{font-style:normal}
.brand-tag{margin-top:4px; font-size:.95rem; color:#d3def7}
.main-nav{display:flex; gap:24px; flex-wrap:wrap; justify-content:center}
.main-nav a,.phone-link{color:#edf3ff; text-decoration:none; font-weight:500}
.main-nav a:hover,.phone-link:hover{color:#8ec0ff}
.top-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.cta,.ghost-button{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:15px 28px; text-decoration:none; font-weight:700; border:1px solid transparent;
}
.cta{
  background:linear-gradient(180deg,#1b61db,#1247ad);
  color:#fff; border-color:rgba(129,177,255,.35);
  box-shadow:0 12px 28px rgba(14,49,116,.36), inset 0 1px 0 rgba(255,255,255,.12);
}
.ghost-button{border-color:rgba(150,181,255,.28); color:#eef3ff; background:rgba(8,17,40,.28)}
.cta-small{padding:11px 18px}

.section-card{
  background:linear-gradient(180deg, rgba(7,14,32,.95), rgba(7,13,28,.82));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:28px;
}
.hero{
  display:grid; grid-template-columns:minmax(340px, .95fr) 1.12fr;
  overflow:hidden; margin-top:16px;
}
.hero-photo-wrap{position:relative; min-height:100%}
.hero-photo{
  width:100%; height:100%; min-height:650px;
  object-fit:cover; object-position:center -195px;
  display:block;
}
.hero-caption{
  position:absolute; left:18px; right:18px; bottom:120px;
  padding:12px 16px; border-radius:999px;
  background:rgba(3,7,18,.62); backdrop-filter:blur(10px);
  font-size:.98rem; text-align:left;
}
.hero-copy{
  padding:48px 46px;
  display:flex; flex-direction:column; justify-content:center;
  background:
    radial-gradient(circle at 84% 24%, rgba(61,113,255,.14), transparent 22%),
    linear-gradient(180deg, rgba(5,11,31,.22), rgba(5,11,31,.08));
}
.eyebrow{font-size:.92rem; letter-spacing:.12em; text-transform:uppercase; color:#95aedf; margin-bottom:14px}
.hero-copy h1{margin:0; font-size:clamp(2.2rem,4.2vw,4.4rem); line-height:1.02; white-space:nowrap}
.plugged-green{margin:16px 0 0; font-size:clamp(2.1rem,3.2vw,3.7rem); line-height:1; color:var(--green); text-shadow:0 0 16px rgba(13,94,29,.14)}
.plug-line{margin:8px 0 6px; color:var(--green)}
.plug-line svg{width:min(500px,72vw); height:auto; overflow:visible}
.hero-copy p{font-size:1.16rem; color:var(--muted); max-width:41rem; margin:10px 0 0; line-height:1.5}
.position-line{font-size:1.03rem; color:#f4f7ff; opacity:.92}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
.service-strip{
  margin:14px 0 18px; padding:14px 18px; border-radius:18px;
  background:rgba(3,10,24,.78); border:1px solid var(--line);
  display:flex; gap:20px; justify-content:center; flex-wrap:wrap; color:#eff5ff;
}
.service-strip span{position:relative}
.service-strip span:not(:last-child):after{content:"•"; position:absolute; right:-14px; color:#66a2ff}
.audience-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.audience-card{overflow:hidden; border-radius:18px; background:rgba(5,12,29,.8); border:1px solid var(--line); box-shadow:var(--shadow)}
.audience-card img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block}
.why-block{margin-top:18px; padding:26px}
.why-block h3{margin:0 0 10px; font-size:clamp(1.65rem,2.3vw,2.26rem)}
.why-block p{color:var(--muted); line-height:1.65; margin:0 0 18px}
.why-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.why-card{padding:16px; border-radius:18px; background:rgba(6,14,35,.72); border:1px solid rgba(141,180,255,.10)}
.why-card strong{display:block; margin-bottom:6px}
.why-card span{color:var(--muted); font-size:.95rem; line-height:1.5}

.about-chat-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-top:18px}
.about-panel{display:grid; grid-template-columns:minmax(300px,390px) 1fr; gap:20px; padding:20px; align-items:start}
.ducks-photo{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; border-radius:18px; display:block}
.about-copy{padding-top:4px}
.meet-name{margin:0; font-size:clamp(1.5rem,2vw,2rem); white-space:nowrap; letter-spacing:-.02em}
.subhead{margin-top:8px; color:#52abff; font-size:1.28rem}
.bio-teaser{color:var(--muted); line-height:1.6}
.cred-list{margin:14px 0 0; padding-left:18px; color:#dce7ff; line-height:1.65}
.compact{margin-top:18px}
.chat-panel{padding:20px}
.chat-header{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.chat-title{font-weight:700}.chat-subtitle{font-size:.96rem; color:#93a9d6}
.chat-messages{display:flex; flex-direction:column; gap:12px; min-height:130px; margin-bottom:14px}
.message{max-width:92%; padding:12px 14px; border-radius:16px; line-height:1.45}
.message.bot{background:rgba(255,255,255,.06)}
.message.user{background:rgba(26,90,186,.36); margin-left:auto}
.quick-actions{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px}
.quick-actions button,.chat-entry button,.lead-actions button{border:none; cursor:pointer}
.quick-actions button{
  border-radius:999px; padding:11px 14px;
  background:rgba(7,22,50,.92); color:#e7efff;
  border:1px solid rgba(124,174,255,.26)
}
.chat-entry{display:grid; grid-template-columns:1fr 60px; gap:10px}
.chat-entry input,.lead-form input,.lead-form textarea{
  width:100%; border-radius:16px; border:1px solid rgba(129,171,255,.2);
  background:rgba(8,17,40,.9); color:#fff; padding:13px 14px; font:inherit
}
.chat-entry button{border-radius:16px; background:linear-gradient(180deg,#1b61db,#1247ad); color:#fff; font-size:1.2rem}
.lead-form{margin-top:14px}.hidden{display:none}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.lead-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.microcopy,.lead-result{font-size:.92rem; color:#a8b8dd}

.page-anchor-section{margin-top:18px; padding:30px 26px}
.page-anchor-section h2{margin:0 0 10px; font-size:clamp(1.9rem,3vw,3rem)}
.content-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.content-card{padding:24px}
.content-card p,.content-card li{color:var(--muted); line-height:1.7}
.content-card ul{padding-left:18px}
.footer-note{padding:22px; text-align:center; color:#9fb0d5}
@media (max-width:1100px){
  .topbar{flex-wrap:wrap}
  .hero,.about-chat-grid,.content-grid,.why-grid{grid-template-columns:1fr 1fr}
  .about-panel{grid-template-columns:1fr}
  .hero-copy h1,.meet-name,.brand-name-line{white-space:normal}
}
@media (max-width:760px){
  .site-shell{width:min(100% - 18px,1280px)}
  .brand-mark-shell,.mini-logo{width:58px;height:58px;flex-basis:58px}
  .logo-rotator{width:48px;height:48px}
  .main-nav{gap:14px}
  .hero,.why-grid,.audience-grid,.quick-actions,.form-grid,.about-chat-grid,.content-grid{grid-template-columns:1fr}
  .hero-copy{padding:28px 22px}
  .hero-caption{font-size:.9rem; left:12px; right:12px; bottom:12px}
  .hero-photo{min-height:520px; object-position:center top}
  .hero-copy h1{white-space:normal}
  .brand-tag{font-size:.82rem}
}

.testimonials-block{margin-top:18px; padding:28px 26px}
.testimonials-block h3{margin:0 0 8px; font-size:clamp(1.7rem,2.6vw,2.5rem)}
.testimonials-intro{margin:0 0 18px; color:var(--muted)}
.testimonials-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.testimonial-card{padding:20px; border-radius:20px; background:rgba(6,14,35,.72); border:1px solid rgba(141,180,255,.12); box-shadow:var(--shadow)}
.testimonial-card.featured{background:linear-gradient(180deg, rgba(17,35,77,.88), rgba(6,14,35,.88)); border-color:rgba(120,168,255,.22)}
.testimonial-quote{margin:0 0 14px; color:#eef4ff; line-height:1.75; font-size:1rem}
.testimonial-name{color:#9db4df; font-weight:700}
@media (max-width:1100px){.testimonials-grid{grid-template-columns:1fr}}


.projects-block{margin-top:18px; padding:28px 26px}
.projects-block h3{margin:0 0 8px; font-size:clamp(1.7rem,2.6vw,2.5rem)}
.projects-intro{margin:0 0 18px; color:var(--muted)}
.projects-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:14px;
}
.project-card{
  margin:0;
  overflow:hidden;
  border-radius:20px;
  background:rgba(6,14,35,.72);
  border:1px solid rgba(141,180,255,.12);
  box-shadow:var(--shadow);
  min-height:240px;
}
.project-card.feature{
  grid-row:span 2;
  min-height:500px;
}
.project-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
@media (max-width:1100px){
  .projects-grid{grid-template-columns:1fr 1fr}
  .project-card.feature{grid-row:auto; min-height:320px}
}
@media (max-width:760px){
  .projects-grid{grid-template-columns:1fr}
  .project-card, .project-card.feature{min-height:240px}
}


.who-serve-block{margin-top:18px; padding:28px 26px}
.who-serve-block h3{margin:0 0 8px; font-size:clamp(1.7rem,2.6vw,2.5rem)}
.who-serve-intro{margin:0 0 18px; color:var(--muted)}