:root{
  --bg:#041424;
  --surface:#041424;
  --card:#071427;
  --accent:#1e6be6;
  --accent-2:#06b6d4;
  --muted:#9aa4b2;
  --text:#e6eef6;
  --glass: rgba(255,255,255,0.04);
  --radius:12px;
  --container-width:1200px;
  --max-hero-width:720px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;color:var(--text);background:linear-gradient(180deg,var(--bg),#022244);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
.container{max-width:var(--container-width);margin:0 auto;padding:28px}
.site-header{position:sticky;top:0;backdrop-filter:blur(6px);z-index:40;background:linear-gradient(180deg,rgba(7,16,36,0.6),transparent);border-bottom:1px solid rgba(255,255,255,0.02)}
.header-inner{display:flex;align-items:center;gap:16px}
.brand-wrap{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px}
.brand{margin:0;font-weight:700;font-size:1.15rem;letter-spacing:0.2px}
.dot{color:var(--accent)}
.brand-small{font-size:0.85rem;color:var(--muted);margin-left:4px}
.nav{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;transition:all .18s;font-weight:600}
.nav a:hover{color:var(--text);background:var(--glass)}
.btn-outline{border:1px solid rgba(37,99,235,0.14);padding:8px 12px;border-radius:8px;color:var(--text);font-weight:600;transition:background .12s, transform .12s}
.btn-outline:hover{background:rgba(37,99,235,0.06);transform:translateY(-2px)}
.nav-toggle{display:none;background:transparent;border:0;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;border-radius:2px;opacity:.9}

.hero{position:relative;padding:72px 0 36px}
.hero-bg{position:absolute;inset:0;background:linear-gradient(120deg,rgba(37,99,235,0.06),rgba(6,182,212,0.03));pointer-events:none}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start}
.hero{background-image:linear-gradient(180deg,rgba(2,6,23,0.25),transparent);}
.hero-copy h2{font-size:2.6rem;margin:0 0 12px;max-width:var(--max-hero-width);font-weight:700}
.hero-copy p{color:var(--muted);margin:0 0 20px;font-size:1.05rem}
.hero-ctas{display:flex;gap:12px}
.cta{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:12px 18px;border-radius:10px;text-decoration:none;box-shadow:0 8px 26px rgba(37,99,235,0.12);transition:transform .15s}
.cta:hover{transform:translateY(-4px)}
.link{align-self:center;color:var(--muted);text-decoration:none}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.hero-card h4{margin:0 0 6px}
.quick-list{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.wave{display:block;width:100%}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.in-view{opacity:1;transform:translateY(0)}

/* Animation variants */
@keyframes slideInLeft { from { opacity:0; transform: translateX(-30px); } to { opacity:1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity:0; transform: translateX(30px); } to { opacity:1; transform: translateX(0); } }
@keyframes popIn { from { opacity:0; transform: scale(.92) translateY(6px);} to { opacity:1; transform:scale(1) translateY(0);} }
@keyframes float { 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)} }

.anim-slide-left.in-view{animation: slideInLeft .7s cubic-bezier(.2,.9,.3,1) both}
.anim-slide-right.in-view{animation: slideInRight .7s cubic-bezier(.2,.9,.3,1) both}
.anim-pop.in-view{animation: popIn .6s cubic-bezier(.2,.9,.3,1) both}
.anim-float.in-view{animation: float 3.6s ease-in-out infinite}

/* Card tilt interactive state */
.tilt{transform-style:preserve-3d;transition:transform .18s ease, box-shadow .18s}
.tilt:hover{box-shadow:0 18px 46px rgba(2,6,23,0.5)}
.tilt-inner{transform-origin:center;transition:transform .12s ease}

/* Animated hero text (typewriter/rotator) */
.animated-text{display:inline-block;color:var(--accent);font-weight:700;white-space:nowrap;margin-left:8px}
.animated-text .cursor{display:inline-block;vertical-align:middle;margin-left:6px;width:2px;height:1.2em;background:var(--accent);animation:blink 1s linear infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* CTA glow / pulse to attract attention */
.cta{position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:-2px;border-radius:10px;background:radial-gradient(circle at 10% 10%, rgba(37,99,235,0.18), transparent 20%), radial-gradient(circle at 90% 90%, rgba(6,182,212,0.12), transparent 24%);opacity:0;transition:opacity .25s ease, transform .35s ease;pointer-events:none}
.cta:hover::after,.cta:focus::after{opacity:1;transform:scale(1.02)}
@keyframes cta-pulse{0%{box-shadow:0 8px 26px rgba(37,99,235,0.08)}50%{box-shadow:0 16px 44px rgba(37,99,235,0.12)}100%{box-shadow:0 8px 26px rgba(37,99,235,0.08)}}
.cta.attract{animation:cta-pulse 2.6s ease-in-out infinite}

/* Floating accent orb in hero */
.hero .accent-orb{position:absolute;right:8%;top:10%;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 35% 35%, rgba(37,99,235,0.14), rgba(6,182,212,0.06) 45%, transparent 60%);filter:blur(18px);transform:translateY(0);pointer-events:none;z-index:0;opacity:.95}
@keyframes orb-float{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.02)}100%{transform:translateY(0) scale(1)}}
.hero .accent-orb{animation:orb-float 6s ease-in-out infinite}

/* Make headings pop a bit more */
.hero-copy h2{color:var(--text);text-shadow:0 6px 18px rgba(2,6,23,0.45)}

/* Make cards and member-cards reveal nicely when staggered */
.team-grid .member-card, .grid .card{transform-origin:center;}

/* Inputs focus highlight */
input:focus,textarea:focus{outline:none;box-shadow:0 6px 22px rgba(37,99,235,0.09);border-color:rgba(37,99,235,0.16)}

/* Stagger helper for reveal children */
.stagger > *{opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.9,.3,1), transform .6s cubic-bezier(.2,.9,.3,1)}
.stagger.in-view > *{opacity:1;transform:translateY(0)}

/* subtle shine on headings when body has attract class */
body.attract .brand,.hero-copy h2{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.08));-webkit-background-clip:text;background-clip:text}


/* subtle accessibility: reduce motion respects prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .anim-slide-left.in-view, .anim-slide-right.in-view, .anim-pop.in-view, .anim-float.in-view { animation-duration: 0.001ms !important; transform:none !important; }
  .tilt, .tilt-inner { transition: none !important; }
}

/* Testimonials */
.testimonials{padding:26px 0}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.test-card{padding:18px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);box-shadow:0 8px 30px rgba(2,6,23,0.5)}
.test-card .quote{margin:0 0 12px;font-style:italic}
.test-card .meta{margin:0;color:var(--muted);font-size:.9rem}


.services{padding:18px 0}
.services h3{margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Services: show 3 per row; if a 4th card exists, place it under the middle column */
.services .grid{grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.services .grid > .card:nth-child(4){grid-column:2}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:18px;border-radius:12px;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.6)}
.card h4{color:var(--text);margin-top:8px}
.card p{color:var(--muted)}

/* Tech badges under hero */
.tech-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tech-badge{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:8px 10px;border-radius:8px;font-weight:600;color:var(--muted);display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(255,255,255,0.02)}
.tech-badge svg{width:18px;height:18px;opacity:.9}

/* Clients row removed (logos handled by content) */
.icon{width:36px;height:36px;fill:rgba(255,255,255,0.9);opacity:.9}

.about{padding:22px 0}

.contact-inner{display:grid;grid-template-columns:1fr 420px;gap:22px;align-items:start}
.contact-inner.only-form{grid-template-columns:1fr;justify-items:center}
.contact-inner.only-form .contact-form{max-width:720px;width:100%}
.contact-form{display:flex;flex-direction:column;gap:10px}
input,textarea{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
button{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none;padding:12px;border-radius:10px;cursor:pointer}

.site-footer{padding:48px 0 28px;text-align:left;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,transparent,rgba(0,0,0,0.02))}
.footer-grid{display:grid;grid-template-columns:1fr 280px 240px;gap:36px;align-items:flex-start}
.footer-left{max-width:420px;display:flex;flex-direction:column;gap:10px}
.footer-left img{width:48px;height:48px;border-radius:8px}
.footer-left .muted{color:var(--muted);margin-top:6px;line-height:1.5}
.footer-links{display:flex;gap:28px;flex-wrap:wrap}
.footer-links > div{margin:0}
.footer-links ul{list-style:none;padding:0;margin:8px 0 0}
.footer-links a{color:var(--muted);text-decoration:none;display:block;padding:6px 0;transition:color .15s}
.footer-links a:hover{color:var(--text)}
.footer-links strong{display:block;margin-bottom:8px;color:var(--text)}
.footer-contact{max-width:320px}
.footer-contact strong{display:block;margin-bottom:8px;color:var(--text)}
.footer-contact a{color:var(--accent);text-decoration:none;font-weight:600}
.footer-contact a:hover{text-decoration:underline}

/* Contact email styling (contact section) */
.contact-info .contact-email{color:var(--accent);text-decoration:none;font-weight:600}
.contact-info .contact-email:hover{text-decoration:underline}
.socials{display:flex;gap:12px;margin-top:8px}
.social-link{color:var(--muted);display:inline-flex;align-items:center}
.social-link svg{opacity:.95}

.label{font-size:.95rem;color:var(--muted);margin-bottom:6px}
.contact-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.small{font-size:.85rem}

@media (max-width:920px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-left{order:0}
}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr;gap:16px}
  .footer-left{max-width:100%}
  .footer-links{display:block}
  .footer-contact{max-width:100%}
  .site-footer .container{text-align:center}
}
.toast{position:fixed;right:20px;bottom:20px;background:#0b1220;padding:12px 16px;border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,0.6);color:var(--text)}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .contact-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav{display:none}
  .nav-toggle{display:block}
  .grid{grid-template-columns:1fr}
}

/* Mobile nav open state */
.nav.open{display:flex;flex-direction:column;position:absolute;top:64px;right:20px;background:linear-gradient(180deg,rgba(8,12,20,0.96),rgba(8,12,20,0.9));padding:12px;border-radius:10px;min-width:180px;gap:8px;box-shadow:0 12px 30px rgba(2,6,23,0.6)}
.nav.open a{display:block;padding:10px 12px}

/* Skip link for keyboard users */
.skip-link{position:absolute;left:8px;top:8px;background:#041322;color:var(--text);padding:8px 12px;border-radius:8px;transform:translateY(-120%);transition:transform .18s;z-index:60}
.skip-link:focus{transform:translateY(0);outline:2px solid var(--accent);outline-offset:2px}

/* Focus states */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav-toggle:focus-visible,.cta:focus-visible,.btn-outline:focus-visible{outline:3px solid rgba(79,70,229,0.18);outline-offset:3px}

/* Theme toggle */
.header-actions{margin-left:12px}
.theme-toggle{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text);padding:8px;border-radius:10px;cursor:pointer}

/* Light theme */
.theme-light{--bg:#f6f8fb;--surface:#ffffff;--card:#ffffff;--text:#071024;--muted:#546069;--accent:#2b6ef6;--accent-2:#06b6d4}
.theme-light .site-header{background:linear-gradient(180deg,rgba(255,255,255,0.7),transparent);border-bottom:1px solid rgba(2,6,23,0.04)}


/* Team section */
.team{padding:22px 0}
.team .lead{margin-top:6px;color:var(--muted)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.member-card{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);cursor:pointer;border:1px solid rgba(255,255,255,0.02);transition:transform .14s,box-shadow .14s}
.member-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.5)}
.avatar{width: 200px;height:200px;border-radius:10px;flex-shrink:0}
.avatar-wrap{width:200px;height: 200px;border-radius:50%;flex-shrink:0;overflow:hidden;display:inline-block;background:linear-gradient(135deg,#12314a,#0c2a3f);box-shadow:0 8px 20px rgba(2,6,23,0.5);border:1px solid rgba(255,255,255,0.03)}
.avatar-wrap .avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.member-info .name{margin:0;font-size:1rem}
.member-info .role{margin:4px 0;color:var(--muted);font-size:.9rem}
.member-info .bio{margin:6px 0 0;color:var(--muted);font-size:.9rem;max-height:0;overflow:hidden;transition:max-height .28s ease}
.member-card[aria-expanded="true"] .bio{max-height:200px}

/* About section polish */
.about-inner{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.about-copy h3{margin:0 0 10px;font-size:1.6rem}
.about-copy .lead{font-size:1.05rem;color:var(--muted);max-width:760px}
.about-points{margin:14px 0 18px;padding-left:18px;color:var(--muted)}
.about-points li{margin:8px 0}
.about-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:18px;border-radius:var(--radius);box-shadow:0 10px 36px rgba(2,6,23,0.45)}
.about-card .stat{display:flex;flex-direction:column;align-items:flex-start;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.03)}
.about-card .stat:last-child{border-bottom:0}
.about-card .num{font-size:1.45rem;font-weight:700;color:var(--accent)}
.about-card .label{font-size:.9rem;color:var(--muted)}
.about-cta{margin-top:6px}

@media (max-width:900px){.about-inner{grid-template-columns:1fr}}

@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.team-grid{grid-template-columns:1fr}}

/* Upload controls */
.file-input{display:none}
.upload-btn{display:inline-block;margin-left:6px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--accent);padding:6px 8px;border-radius:8px;font-size:.85rem;cursor:pointer}
.remove-photo{display:none;margin-left:8px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 8px;border-radius:8px;font-size:.85rem;cursor:pointer}
.member-card[data-custom="true"] .remove-photo{display:inline-block}