/*
  style.css
  Mobile-first responsive styles, soft dark theme, rounded cards, subtle shadows.
*/
:root{
  --bg:#f7f9ff;
  --card:#ffffff;
  --muted:#344054;
  --accent:#075cf5;
  --accent-2:#3182ff;
  --glass: rgba(7,92,245,0.06);
  --radius:14px;
  --max-width:1100px;
  --fw-heading:700;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#ffffff 0%,#f3f6fc 100%);
  color:#080b12;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{width:94%;max-width:var(--max-width);margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter:blur(6px);background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85));border-bottom:1px solid rgba(0,102,255,0.1);z-index:30}
.header-inner{display:flex;align-items:center;gap:16px;padding:14px 0}
.brand{font-family:Poppins,Inter, sans-serif;font-weight:700;color:var(--accent);text-decoration:none;font-size:1.05rem}
.nav{display:flex;gap:12px;margin-left:auto}
.nav a{color:var(--muted);text-decoration:none;padding:8px;border-radius:10px}
.nav a:hover{background:rgba(0,102,255,0.08);color:var(--accent)}
.btn-hire{margin-left:12px;background:transparent;border:1px solid rgba(0,102,255,0.2);color:var(--accent);padding:8px 12px;border-radius:10px}

/* Header custom dropdown */
.nav-dropdown-wrapper{position:relative;margin-left:12px}
.nav-dropdown-btn{background:transparent;border:1px solid rgba(0,102,255,0.15);color:var(--muted);padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:500}
.nav-dropdown-btn:hover{background:rgba(0,102,255,0.08);color:var(--accent)}
.nav-dropdown-menu{position:absolute;top:100%;right:0;background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,255,255,0.95));border:1px solid rgba(0,102,255,0.15);border-radius:8px;margin:4px 0 0 0;padding:8px 0;list-style:none;min-width:160px;display:none;z-index:40}
.nav-dropdown-menu[aria-hidden="false"],.nav-dropdown-menu.show{display:block}
.nav-dropdown-menu a{display:block;padding:10px 14px;color:var(--muted);text-decoration:none;transition:all .2s ease}
.nav-dropdown-menu a:hover{background:rgba(0,102,255,0.1);color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hero */
.hero{padding:48px 0}

/* Hero with sparkling video background */
.hero{
  position:relative;
  padding:48px 0;
  overflow:hidden;
}

/* Video background */
.hero-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0.5;
}

/* Sparkling effect overlay */
.hero-sparkles{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 60px 70px, rgba(255,255,255,0.6), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 50px 50px, rgba(255,255,255,0.7), rgba(255,255,255,0)),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.5), rgba(255,255,255,0)),
    radial-gradient(2px 2px at 90px 10px, rgba(255,255,255,0.9), rgba(255,255,255,0));
  background-repeat:repeat;
  background-size:200px 200px;
  animation:twinkle 3s ease-in-out infinite;
}

/* Twinkling animation */
@keyframes twinkle{
  0%, 100% { opacity:0.3; }
  50% { opacity:1; }
}

/* Light gradient overlay for text readability */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.7));
  pointer-events:none;
  z-index:1;
}

/* ensure hero content sits above video and overlay */
.hero .container{position:relative;z-index:3}
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.hero-title{font-family:Poppins,Inter;font-size:1.6rem;margin:0;color:#0d1f2d}
.hero-sub{color:#003d99;margin-top:6px;font-weight:600}
.hero-lead{color:#1a3a52;margin-top:12px}
.hero-actions{margin-top:16px;display:flex;gap:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#041024;font-weight:600}
.btn-outline{border:1px solid rgba(255,255,255,0.06);color:var(--accent)}

.mockup{display:flex;justify-content:center}
.mockup-card{width:220px;height:320px;border-radius:16px;background:linear-gradient(135deg,rgba(0,102,255,0.05),rgba(0,102,255,0.02));box-shadow:0 8px 28px rgba(0,102,255,0.15);border:1px solid rgba(0,102,255,0.1)}

/* About */
.about{padding:36px 0}
.about-grid{display:grid;grid-template-columns:1fr;gap:20px}
.skills ul{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.skills li{background:var(--glass);padding:8px;border-radius:10px;color:var(--muted);border:1px solid rgba(0,102,255,0.1)}

/* Services */
.services{padding:28px 0}
.services-grid{display:grid;grid-template-columns:1fr;gap:12px}
.service-card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,102,255,0.1);border:1px solid rgba(0,102,255,0.08)}
.service-card h4{margin:0 0 8px 0}

/* Portfolio */
.portfolio{padding:28px 0}
.portfolio-grid{display:grid;grid-template-columns:1fr;gap:12px}
.portfolio-item{position:relative;border-radius:12px;overflow:hidden;border:3px solid #003d99;box-shadow:0 8px 24px rgba(0,61,153,0.25)}
.portfolio-item img{width:100%;height:auto;display:block;transition:transform .35s ease}
.portfolio-item:hover img{transform:scale(1.04)}
.portfolio-item figcaption{position:absolute;left:12px;bottom:12px;background:rgba(0,61,153,0.7);padding:6px 10px;border-radius:10px;color:#fff;font-size:0.9rem}

/* Testimonials */
.testimonials{padding:28px 0}
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:16px}
.testimonial-form{background:var(--card);padding:12px;border-radius:12px;display:flex;flex-direction:column;gap:8px;border:1px solid rgba(0,102,255,0.1)}
.testimonial-form input,.testimonial-form textarea{background:rgba(0,102,255,0.03);border:1px solid rgba(0,102,255,0.15);padding:10px;border-radius:8px;color:inherit}
.testimonials-list{display:flex;flex-direction:column;gap:12px}
.testimonial{background:linear-gradient(180deg,rgba(0,102,255,0.03),rgba(0,102,255,0.01));padding:12px;border-radius:12px;box-shadow:0 6px 18px rgba(0,102,255,0.08);border:1px solid rgba(0,102,255,0.1)}
.testimonial h4{margin:0 0 6px 0}
.testimonial-rating .stars-display{color:var(--accent);font-size:1.1rem}
.testimonial-message{margin:8px 0}

/* Star rating styles */
.rating-field{border:0;padding:0;margin:6px 0}
.stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.stars input{display:none}
.stars label{font-size:1.8rem;color:rgba(255,255,255,0.15);cursor:pointer;transition:all .15s ease;text-shadow:0 2px 4px rgba(0,0,0,0.4)}
.stars label:hover,.stars label:hover ~ label,.stars input:checked ~ label{color:#ffd700;text-shadow:0 2px 8px rgba(255,215,0,0.5)}
.testimonial-rating .stars-display{color:#ffd700;font-size:1.6rem;letter-spacing:2px;text-shadow:0 2px 4px rgba(255,215,0,0.3)}

/* Donation */
.donation{padding:28px 0;background:linear-gradient(135deg,rgba(0,102,255,0.03),rgba(30,144,255,0.02))}
.donation-grid{display:grid;grid-template-columns:1fr;gap:24px}
.donation-content{max-width:600px}
.donation-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.donation-option{background:var(--card);padding:24px;border-radius:var(--radius);box-shadow:0 4px 12px rgba(0,102,255,0.08);text-align:center}
.donation-option h3{margin:0 0 12px 0;color:var(--accent)}
.donation-option p{margin:0 0 12px 0}
.donation-phone a{font-size:1.1rem;font-weight:600;color:var(--accent);text-decoration:none}
.donation-phone a:hover{text-decoration:underline}

/* Contact */
.contact{padding:28px 0}
.contact-grid{display:grid;grid-template-columns:1fr;gap:12px}

/* Footer */
.site-footer{padding:18px 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:24px}

/* Floating WhatsApp Button */
.whatsapp-float{position:fixed;right:18px;bottom:18px;background:transparent;border-radius:999px;padding:10px;display:flex;align-items:center;justify-content:center;z-index:60;box-shadow:0 14px 30px rgba(2,6,23,0.6)}
.whatsapp-float svg{display:block}
.wa-bubble{position:absolute;right:10px;bottom:10px;width:56px;height:56px;border-radius:50%;background:linear-gradient(90deg,var(--accent),var(--accent-2));filter:blur(6px);opacity:0.18;transform:scale(1);animation:wa-pulse 2.5s infinite}
@keyframes wa-pulse{0%{transform:scale(.95);opacity:.12}50%{transform:scale(1.08);opacity:.22}100%{transform:scale(.95);opacity:.12}}

/* Fade-in utility */
.fade-in{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.in-view{opacity:1;transform:none}

/* Profile side card positioned under the header on larger screens */
.profile-anchored{width:220px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:8px;border-radius:14px;box-shadow:0 10px 28px rgba(2,6,23,0.6)}
.profile-anchored img{width:100%;height:auto;border-radius:10px;display:block}
.profile-anchored-meta{padding:8px 6px}
.profile-anchored-meta h3{margin:0}

/* Side tab (vertical) with dropdown menu */
.side-tab{position:fixed;right:0;top:40%;display:flex;align-items:center;gap:6px;z-index:70}
.side-tab-btn{writing-mode:vertical-rl;transform:rotate(180deg);background:var(--accent);color:#041024;border-radius:8px 0 0 8px;padding:10px 12px;border:none;cursor:pointer;font-weight:600}
.side-menu{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:8px 0 0 8px;padding:12px;margin-right:6px;box-shadow:0 8px 28px rgba(2,6,23,0.6);display:none}
.side-menu[aria-hidden="false"],.side-menu.show{display:block}
.side-menu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.side-menu a{color:var(--muted);text-decoration:none;padding:8px;border-radius:8px;display:block}
.side-menu a:hover{color:var(--accent)}

/* On small screens move the side tab lower and make it smaller */
@media(max-width:699px){
  .side-tab{top:60%}
  .side-tab-btn{padding:8px 10px}
}

/* Lightbox styles */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.9);z-index:120;padding:28px}
.lightbox[aria-hidden="false"],.lightbox.show{display:flex}
.lb-stage{max-width:92%;max-height:82%;text-align:center}
.lb-stage img{max-width:100%;max-height:80vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,0.6)}
.lb-caption{color:var(--muted);margin-top:8px}
.lb-close,.lb-prev,.lb-next{position:fixed;background:transparent;border:0;color:#fff;font-size:26px;padding:12px;cursor:pointer}
.lb-close{top:20px;right:26px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}
.lb-controls{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;display:flex;gap:8px}
.lb-controls button{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.03);color:var(--accent);padding:8px 10px;border-radius:8px}


/* Responsive: Tablet and up */
@media(min-width:700px){
  .hero-grid{grid-template-columns:1fr 360px}
  .about-grid{grid-template-columns:1fr 320px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(3,1fr)}
  .testimonials-grid{grid-template-columns:360px 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .donation-options{grid-template-columns:1fr 1fr}
}

/* Desktop */
@media(min-width:1100px){
  .portfolio-grid{grid-template-columns:repeat(5,1fr)}
}

/* Landscape orientation optimizations (wider but shorter) */
@media(orientation:landscape){
  .hero{padding:24px 0}
  .about,.services,.portfolio,.testimonials,.contact{padding:18px 0}
  .hero-grid{gap:16px}
  .hero-title{font-size:1.4rem}
  .hero-lead{margin-top:8px}
  .section-title{margin-bottom:10px}
}

/* Portrait orientation optimizations (taller but narrower) */
@media(orientation:portrait){
  .hero{padding:40px 0}
  .about,.services,.portfolio,.testimonials,.contact{padding:24px 0}
  .profile-side{display:none}
}

/* Mobile landscape (small height) */
@media(orientation:landscape) and (max-height:500px){
  .hero-actions{display:flex;gap:8px}
  .btn{padding:8px 10px;font-size:0.9rem}
  .service-card{padding:12px}
  .portfolio-grid{gap:8px}
}

/* Extra small screens */
@media(max-width:480px){
  .header-inner{padding:10px 0;gap:8px}
  .nav{gap:6px}
  .nav a{padding:6px;font-size:0.9rem}
  .btn-hire{padding:6px 8px;font-size:0.85rem}
  .nav-dropdown-wrapper{margin-left:8px}
  .nav-dropdown-btn{padding:6px 8px;font-size:0.85rem}
  .hero-title{font-size:1.4rem}
  .hero-sub{margin-top:4px}
  .hero-lead{font-size:0.9rem}
  .hero-actions{flex-wrap:wrap}
  .btn{padding:8px 10px;font-size:0.85rem}
}

/* Small tweaks */
.section-title{font-family:Poppins,Inter;font-weight:700;color:#000000;margin-bottom:14px}
.muted{color:var(--muted)}

/* Blue studio refresh */
:root{
  --radius:20px;
  --max-width:1160px;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse at 12% 8%,rgba(30,144,255,0.09),transparent 32rem),
    linear-gradient(180deg,#ffffff 0%,#f3f7ff 100%);
}

.site-header{
  background:rgba(255,255,255,0.88);
  border-bottom-color:rgba(0,102,255,0.12);
  box-shadow:0 8px 30px rgba(13,31,45,0.04);
}
.header-inner{min-height:72px}
.brand{letter-spacing:.04em}
.brand img{display:block;width:188px;height:auto}
.nav a{transition:background .2s ease,color .2s ease}
.btn-hire{
  cursor:pointer;
  font:inherit;
  font-weight:700;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.btn-hire:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}

.section{padding:72px 0}
.section-title{
  color:#0d1f2d;
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.12;
  letter-spacing:-.045em;
}
.hero{
  min-height:540px;
  display:flex;
  align-items:center;
  padding:72px 0;
}
.hero-video{opacity:.28}
.hero::before{
  background:linear-gradient(105deg,rgba(255,255,255,.96),rgba(240,246,255,.79));
}
.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:64px}
.hero-title{font-size:clamp(2.8rem,6vw,5rem);line-height:1.04;letter-spacing:-.06em}
.hero-sub{font-size:1.12rem;color:var(--accent);margin-top:18px}
.hero-lead{max-width:590px;font-size:1.05rem;line-height:1.8}
.hero-actions{margin-top:28px}
.btn{
  padding:13px 20px;
  border-radius:999px;
  font-weight:700;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,102,255,.2)}
.btn-primary{color:#fff;box-shadow:0 8px 20px rgba(0,102,255,.2)}
.btn-outline{border:1px solid rgba(0,102,255,.25);background:rgba(255,255,255,.72)}
.hero-art{display:flex;justify-content:center}
.profile-anchored{
  width:min(100%,340px);
  padding:10px;
  background:#fff;
  border:1px solid rgba(0,102,255,.12);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(0,61,153,.18);
}
.profile-anchored img{height:380px;object-fit:cover;border-radius:17px}
.profile-anchored-meta{padding:14px 10px 10px}
.profile-anchored-meta h3{font:700 1.2rem Poppins,Inter,sans-serif}

.positioning,.company{padding:76px 0}
.positioning{background:rgba(255,255,255,.7)}
.positioning>.container>.section-title{text-align:center}
.positioning-intro{
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
  color:var(--muted);
  line-height:1.8;
}
.positioning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.positioning-card,.service-card{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,102,255,.1);
  border-radius:var(--radius);
  box-shadow:0 12px 34px rgba(0,61,153,.07);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.positioning-card{padding:25px}
.positioning-card:hover,.service-card:hover{
  transform:translateY(-5px);
  border-color:rgba(0,102,255,.24);
  box-shadow:0 18px 38px rgba(0,61,153,.12);
}
.positioning-card h3{font-family:Poppins,Inter,sans-serif;line-height:1.3}
.positioning-card p,.service-card p{color:var(--muted);line-height:1.75}
.company>.container{max-width:900px}
.company>.container>p{max-width:760px;color:var(--muted);line-height:1.85}
.company .positioning-grid{margin-top:34px!important}
.about{padding:80px 0}
.about .container>div{max-width:780px!important}
.about p,.services>.container>p{color:var(--muted);line-height:1.85}
.services{padding:76px 0}
.services>.container>.section-title,.services>.container>p{text-align:center}
.services-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service-card{padding:25px}
.service-card h4{font:700 1.1rem Poppins,Inter,sans-serif;color:#0d1f2d}
.framework{border-top:1px solid rgba(0,102,255,.08);border-bottom:1px solid rgba(0,102,255,.08)}

.portfolio{
  padding:92px 0;
  background:linear-gradient(180deg,rgba(0,102,255,.045),rgba(255,255,255,.7));
}
.portfolio-intro{max-width:720px;margin:0 auto 44px;text-align:center}
.portfolio-eyebrow{
  margin:0 0 12px;
  color:var(--accent);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.portfolio-intro .section-title{margin-bottom:14px}
.portfolio-intro>p:last-child{margin:0;color:var(--muted);line-height:1.8}
.portfolio-subtitle{
  margin:0 0 20px;
  font:700 1.15rem Poppins,Inter,sans-serif;
}
.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.portfolio-item{
  margin:0;
  position:static;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(0,102,255,.11);
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 32px rgba(0,61,153,.09);
  cursor:zoom-in;
  transition:transform .22s ease,box-shadow .22s ease;
}
.portfolio-item:hover{box-shadow:0 20px 42px rgba(0,61,153,.16)}
.portfolio-item img{
  display:block;
  width:100%;
  height:250px;
  object-fit:cover;
  transition:none;
}
.portfolio-item:hover img{transform:none}
.portfolio-item figcaption{
  position:static;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 18px 18px;
  background:#fff;
  color:#0d1f2d;
  font-size:.95rem;
}
.portfolio-item figcaption span{color:var(--muted);font-size:.84rem}

.testimonials,.contact{padding:76px 0}
.testimonial-form,.testimonial{
  border-radius:var(--radius);
  box-shadow:0 12px 34px rgba(0,61,153,.07);
}
.testimonial-form{padding:22px}
.testimonial-form button{cursor:pointer}
.closing{border-radius:28px}
#closing{margin:20px auto;max-width:calc(100% - 40px);border:1px solid rgba(0,102,255,.1);border-radius:28px}
.contact-grid{align-items:center}
.contact-note{
  padding:28px;
  border:1px solid rgba(0,102,255,.1);
  border-radius:var(--radius);
  background:rgba(255,255,255,.8);
  color:var(--muted);
  box-shadow:0 12px 34px rgba(0,61,153,.07);
}
.contact a{color:var(--accent);font-weight:600}
.site-footer{border-top-color:rgba(0,102,255,.12);text-align:center}

@media(max-width:900px){
  .header-inner{flex-wrap:wrap}
  .nav{gap:4px}
  .nav a{font-size:.88rem;padding:7px}
  .hero-grid{gap:36px}
  .portfolio-grid,.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .positioning-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:699px){
  .section,.portfolio,.positioning,.company,.services,.testimonials,.contact{padding:52px 0}
  .header-inner{justify-content:space-between}
  .brand img{width:156px}
  .nav{display:none}
  .nav-dropdown-wrapper{margin-left:auto}
  .hero{min-height:0;padding:54px 0}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-title{font-size:clamp(2.5rem,12vw,4rem)}
  .hero-art{order:-1}
  .profile-anchored{width:min(72vw,280px)}
  .profile-anchored img{height:300px}
  .positioning-grid,.services-grid,.portfolio-grid{grid-template-columns:1fr}
  .portfolio-item img{height:260px}
  #closing{max-width:calc(100% - 24px);margin:12px auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Match the black, white and electric blue company logo. */
:root{
  --max-width:1160px;
}
body{
  background:
    radial-gradient(ellipse at 12% 8%,rgba(7,92,245,.08),transparent 32rem),
    linear-gradient(180deg,#fff 0%,#f3f6fc 100%);
  color:#080b12;
}
.site-header{
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(7,92,245,.16);
}
.nav a,.nav-dropdown-btn,.nav-dropdown-menu a{color:#202938}
.nav a:hover,.nav-dropdown-btn:hover,.nav-dropdown-menu a:hover{
  color:var(--accent);
  background:rgba(7,92,245,.08);
}
.btn-hire{border-color:rgba(7,92,245,.32)}
.section-title,.hero-title,.service-card h4{color:#080b12}
.positioning,.portfolio,.framework,#closing{
  border-color:rgba(7,92,245,.12);
}
.positioning-card,.service-card,.testimonial-form,.testimonial,.contact-note{
  border-color:rgba(7,92,245,.12);
  box-shadow:0 12px 34px rgba(8,11,18,.07);
}
.positioning-card:hover,.service-card:hover{
  border-color:rgba(7,92,245,.3);
  box-shadow:0 18px 38px rgba(8,11,18,.12);
}
.portfolio-item{
  border-color:rgba(7,92,245,.14);
  box-shadow:0 12px 32px rgba(8,11,18,.09);
}
.portfolio-item:hover{box-shadow:0 20px 42px rgba(8,11,18,.16)}
.testimonial-form input,.testimonial-form textarea{
  background:rgba(7,92,245,.035);
  border-color:rgba(7,92,245,.2);
}
.site-footer{border-top-color:rgba(7,92,245,.16)}
.hero-video{
  opacity:.72;
  filter:blur(3px);
  transform:scale(1.04);
}
.hero-sparkles{z-index:1}
.hero::before{
  z-index:2;
  background:linear-gradient(105deg,rgba(5,12,28,.48),rgba(5,12,28,.34));
}
.hero-title{color:#fff}
.hero-sub{color:#a9caff}
.hero-lead{color:rgba(255,255,255,.9)}
.hero .btn-outline{
  border-color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.1);
  color:#fff;
}
.hero .btn-outline:hover{background:rgba(255,255,255,.2)}