/*
Theme Name: Vyanra Web Solutions
Theme URI: https://vyanrawebsolutions.com
Author: Vyanra Web Solutions
Author URI: https://vyanrawebsolutions.com
Description: A modern, international-grade WordPress theme for Vyanra Web Solutions — built to be fully editable with Elementor. Includes a coded homepage with scroll-reveal, parallax and marquee effects, and blank Elementor canvas templates for every other page.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vyanra-web
Tags: elementor, agency, business, custom-menu, translation-ready
*/

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */
:root{
  --vy-bg:            #07070c;
  --vy-bg-soft:       #0d0e17;
  --vy-surface:       #12131e;
  --vy-surface-2:     #171827;
  --vy-border:        rgba(255,255,255,.08);
  --vy-text:          #f5f5f7;
  --vy-text-dim:      #9a9ab0;
  --vy-text-mute:     #6d6d85;
  --vy-accent:        #7c5cff;
  --vy-accent-2:      #00e0b8;
  --vy-accent-grad:   linear-gradient(120deg, #7c5cff 0%, #00e0b8 100%);
  --vy-gold:          #d9c07a;
  --vy-radius:        18px;
  --vy-radius-sm:     10px;
  --vy-container:     1240px;
  --vy-font-display:  'Space Grotesk', 'Inter', sans-serif;
  --vy-font-body:     'Inter', sans-serif;
  --vy-ease:          cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--vy-bg);
  color:var(--vy-text);
  font-family:var(--vy-font-body);
  font-size:16px;
  line-height:1.6;
  margin:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4,h5{
  font-family:var(--vy-font-display);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.02em;
  font-weight:600;
}
p{ margin:0 0 1em; color:var(--vy-text-dim); }
.container{ width:100%; max-width:var(--vy-container); margin:0 auto; padding:0 24px; }
section{ position:relative; }
::selection{ background:var(--vy-accent); color:#fff; }

/* Background ambience — soft moving mesh gradient, sits behind everything */
.vy-mesh{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px circle at 15% 20%, rgba(124,92,255,.16), transparent 55%),
    radial-gradient(700px circle at 85% 60%, rgba(0,224,184,.12), transparent 55%),
    radial-gradient(500px circle at 50% 90%, rgba(124,92,255,.10), transparent 60%);
}

/* ==========================================================================
   1. SCROLL REVEAL (no plugin needed — powered by js/custom.js)
   ========================================================================== */
[data-vy-reveal]{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s var(--vy-ease), transform .9s var(--vy-ease);
  will-change:transform,opacity;
}
[data-vy-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-vy-reveal="fade"]{ transform:none; }
[data-vy-reveal="left"]{ transform:translateX(-48px); }
[data-vy-reveal="left"].is-visible{ transform:translateX(0); }
[data-vy-reveal="right"]{ transform:translateX(48px); }
[data-vy-reveal="right"].is-visible{ transform:translateX(0); }
[data-vy-reveal="zoom"]{ transform:scale(.9); }
[data-vy-reveal="zoom"].is-visible{ transform:scale(1); }
[data-vy-delay="1"]{ transition-delay:.1s; }
[data-vy-delay="2"]{ transition-delay:.22s; }
[data-vy-delay="3"]{ transition-delay:.34s; }
[data-vy-delay="4"]{ transition-delay:.46s; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.vy-header{
  position:fixed; top:0; left:0; right:0; z-index:999;
  padding:22px 0;
  transition:padding .4s var(--vy-ease), background-color .4s var(--vy-ease), border-color .4s var(--vy-ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.vy-header.is-scrolled{
  padding:12px 0;
  background:rgba(7,7,12,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--vy-border);
}
.vy-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.vy-logo{ display:flex; align-items:center; gap:10px; font-family:var(--vy-font-display); font-size:20px; font-weight:700; color:#fff; }
.vy-logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--vy-accent-grad); flex:none; }
.vy-nav{ display:flex; align-items:center; gap:36px; }
.vy-nav ul{ list-style:none; display:flex; gap:32px; margin:0; padding:0; }
.vy-nav a{
  font-size:14.5px; font-weight:500; color:var(--vy-text-dim);
  position:relative; padding:4px 0; transition:color .25s;
}
.vy-nav a:hover{ color:#fff; }
.vy-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--vy-accent-grad); transition:width .3s var(--vy-ease);
}
.vy-nav a:hover::after{ width:100%; }
.vy-cta-btn, .vy-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--vy-accent-grad); color:#07070c !important; font-weight:600;
  font-size:14.5px; padding:12px 24px; border-radius:100px; border:none; cursor:pointer;
  transition:transform .35s var(--vy-ease), box-shadow .35s var(--vy-ease); white-space:nowrap;
}
.vy-cta-btn:hover, .vy-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(124,92,255,.55); }
.vy-btn.outline{ background:transparent; color:var(--vy-text) !important; border:1px solid var(--vy-border); }
.vy-btn.outline:hover{ border-color:var(--vy-accent); box-shadow:none; }
.vy-burger{ display:none; width:26px; height:20px; position:relative; cursor:pointer; background:none; border:none; }
.vy-burger span{ position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px; transition:.3s; }
.vy-burger span:nth-child(1){ top:0; } .vy-burger span:nth-child(2){ top:9px; } .vy-burger span:nth-child(3){ top:18px; }
.vy-header.nav-open .vy-burger span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.vy-header.nav-open .vy-burger span:nth-child(2){ opacity:0; }
.vy-header.nav-open .vy-burger span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

@media (max-width: 900px){
  .vy-nav{ position:fixed; inset:0 0 0 auto; top:0; width:min(78vw,340px); height:100vh; background:var(--vy-surface);
    flex-direction:column; align-items:flex-start; padding:100px 32px 32px; transform:translateX(100%);
    transition:transform .5s var(--vy-ease); border-left:1px solid var(--vy-border); }
  .vy-header.nav-open .vy-nav{ transform:translateX(0); }
  .vy-nav ul{ flex-direction:column; gap:22px; }
  .vy-burger{ display:block; }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.vy-hero{ min-height:100vh; display:flex; align-items:center; padding:160px 0 100px; overflow:hidden; }
.vy-hero .container{ position:relative; z-index:2; }
.vy-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--vy-accent-2); border:1px solid var(--vy-border); padding:8px 16px;
  border-radius:100px; margin-bottom:28px; background:rgba(255,255,255,.03);
}
.vy-hero h1{ font-size:clamp(40px,6.4vw,88px); max-width:16ch; color:#fff; }
.vy-hero h1 em{ font-style:normal; background:var(--vy-accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vy-hero .lede{ font-size:19px; max-width:52ch; margin:28px 0 40px; }
.vy-hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.vy-hero-orb{
  position:absolute; width:640px; height:640px; right:-160px; top:20%;
  background:var(--vy-accent-grad); border-radius:50%; filter:blur(140px); opacity:.28; z-index:1;
}
.vy-marquee-wrap{ border-top:1px solid var(--vy-border); border-bottom:1px solid var(--vy-border); padding:22px 0; overflow:hidden; background:rgba(255,255,255,.015); }
.vy-marquee{ display:flex; width:max-content; gap:64px; animation:vy-scroll 32s linear infinite; }
.vy-marquee span{ font-family:var(--vy-font-display); font-size:15px; color:var(--vy-text-mute); white-space:nowrap; letter-spacing:.02em; }
@keyframes vy-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   4. SECTION HEADS
   ========================================================================== */
.vy-section{ padding:130px 0; }
.vy-section.tight{ padding:90px 0; }
.vy-section-head{ max-width:640px; margin-bottom:64px; }
.vy-kicker{ display:block; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--vy-accent); margin-bottom:16px; }
.vy-section-head h2{ font-size:clamp(30px,4vw,48px); color:#fff; }

/* ==========================================================================
   5. SERVICES GRID
   ========================================================================== */
.vy-services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vy-service-card{
  background:var(--vy-surface); border:1px solid var(--vy-border); border-radius:var(--vy-radius);
  padding:38px 32px; position:relative; overflow:hidden; transition:transform .5s var(--vy-ease), border-color .4s;
}
.vy-service-card:hover{ transform:translateY(-8px); border-color:rgba(124,92,255,.5); }
.vy-service-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(280px circle at var(--x,50%) var(--y,0%), rgba(124,92,255,.16), transparent 70%);
}
.vy-service-card:hover::before{ opacity:1; }
.vy-service-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--vy-surface-2); margin-bottom:24px; font-size:22px; border:1px solid var(--vy-border);
}
.vy-service-card h3{ font-size:21px; color:#fff; margin-bottom:10px; }
.vy-service-card p{ font-size:15px; margin-bottom:0; }
.vy-service-num{ position:absolute; top:24px; right:28px; font-family:var(--vy-font-display); font-size:13px; color:var(--vy-text-mute); }
@media (max-width:980px){ .vy-services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .vy-services-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   6. ABOUT / SPLIT
   ========================================================================== */
.vy-split{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.vy-split-media{ position:relative; border-radius:var(--vy-radius); overflow:hidden; aspect-ratio:4/5; background:var(--vy-surface); border:1px solid var(--vy-border); }
.vy-split-media img{ width:100%; height:100%; object-fit:cover; }
.vy-stat-badge{
  position:absolute; bottom:24px; left:24px; right:24px; background:rgba(7,7,12,.7); backdrop-filter:blur(14px);
  border:1px solid var(--vy-border); border-radius:var(--vy-radius-sm); padding:20px 24px; display:flex; gap:32px;
}
.vy-stat-badge div b{ display:block; font-family:var(--vy-font-display); font-size:26px; color:#fff; }
.vy-stat-badge div span{ font-size:12.5px; color:var(--vy-text-mute); }
.vy-check-list{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
.vy-check-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--vy-text-dim); font-size:15px; }
.vy-check-list li .tick{ flex:none; width:20px; height:20px; border-radius:6px; background:var(--vy-accent-grad); color:#07070c; font-size:12px; display:flex; align-items:center; justify-content:center; margin-top:2px; }
@media (max-width:900px){ .vy-split{ grid-template-columns:1fr; gap:48px; } }

/* ==========================================================================
   7. PROCESS / TIMELINE
   ========================================================================== */
.vy-process{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:vy-step; }
.vy-process-step{ position:relative; padding:32px 24px 0; border-top:2px solid var(--vy-border); }
.vy-process-step::before{
  counter-increment:vy-step; content:counter(vy-step,decimal-leading-zero);
  font-family:var(--vy-font-display); font-size:14px; color:var(--vy-accent); display:block; margin-bottom:18px;
}
.vy-process-step h4{ color:#fff; font-size:18px; margin-bottom:8px; }
.vy-process-step p{ font-size:14.5px; }
@media (max-width:900px){ .vy-process{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .vy-process{ grid-template-columns:1fr; } }

/* ==========================================================================
   8. STATS STRIP
   ========================================================================== */
.vy-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-top:1px solid var(--vy-border); border-bottom:1px solid var(--vy-border); padding:56px 0; }
.vy-stat{ text-align:center; }
.vy-stat b{ font-family:var(--vy-font-display); font-size:clamp(32px,4vw,52px); color:#fff; display:block; }
.vy-stat span{ font-size:13.5px; color:var(--vy-text-mute); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:700px){ .vy-stats{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   9. TESTIMONIALS
   ========================================================================== */
.vy-testi-track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; }
.vy-testi-track::-webkit-scrollbar{ display:none; }
.vy-testi-card{
  flex:0 0 min(420px,86vw); scroll-snap-align:start; background:var(--vy-surface); border:1px solid var(--vy-border);
  border-radius:var(--vy-radius); padding:36px; display:flex; flex-direction:column; justify-content:space-between; min-height:260px;
}
.vy-testi-card p{ font-size:16.5px; color:var(--vy-text); font-family:var(--vy-font-display); font-weight:400; line-height:1.5; }
.vy-testi-person{ display:flex; align-items:center; gap:12px; margin-top:24px; }
.vy-testi-person img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.vy-testi-person b{ display:block; font-size:14.5px; color:#fff; }
.vy-testi-person span{ font-size:12.5px; color:var(--vy-text-mute); }

/* ==========================================================================
   10. CTA BAND
   ========================================================================== */
.vy-cta-band{
  border-radius:28px; padding:80px 60px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--vy-surface) 0%, var(--vy-surface-2) 100%); border:1px solid var(--vy-border);
}
.vy-cta-band::before{
  content:''; position:absolute; width:500px; height:500px; background:var(--vy-accent-grad); border-radius:50%;
  filter:blur(160px); opacity:.22; top:-200px; left:50%; transform:translateX(-50%);
}
.vy-cta-band h2{ font-size:clamp(28px,4vw,44px); color:#fff; position:relative; max-width:18ch; margin:0 auto 18px; }
.vy-cta-band p{ position:relative; max-width:50ch; margin:0 auto 32px; }
.vy-cta-band .vy-hero-actions{ justify-content:center; position:relative; }
@media (max-width:700px){ .vy-cta-band{ padding:56px 24px; } }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.vy-footer{ padding:90px 0 32px; border-top:1px solid var(--vy-border); background:var(--vy-bg-soft); position:relative; z-index:1; }
.vy-footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; margin-bottom:64px; }
.vy-footer h5{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:20px; }
.vy-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.vy-footer ul a{ color:var(--vy-text-dim); font-size:14.5px; transition:color .25s; }
.vy-footer ul a:hover{ color:var(--vy-accent-2); }
.vy-footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; border-top:1px solid var(--vy-border); padding-top:28px; font-size:13.5px; color:var(--vy-text-mute); }
.vy-socials{ display:flex; gap:14px; }
.vy-socials a{ width:38px; height:38px; border:1px solid var(--vy-border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--vy-text-dim); transition:.3s; }
.vy-socials a:hover{ border-color:var(--vy-accent); color:#fff; }
@media (max-width:900px){ .vy-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .vy-footer-grid{ grid-template-columns:1fr; } }

/* Back to top */
.vy-to-top{
  position:fixed; right:28px; bottom:28px; width:48px; height:48px; border-radius:50%; background:var(--vy-surface);
  border:1px solid var(--vy-border); color:#fff; display:flex; align-items:center; justify-content:center; z-index:500;
  opacity:0; pointer-events:none; transform:translateY(12px); transition:.4s var(--vy-ease); cursor:pointer;
}
.vy-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* Utility */
.vy-mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }

/* Elementor canvas pages should sit above the mesh + inherit dark theme */
.elementor-page, .elementor { position:relative; z-index:1; }

/* ==========================================================================
   12. INNER PAGE HERO (Services, Contact, About, etc.)
   ========================================================================== */
.vy-page-hero{ padding:200px 0 80px; position:relative; }
.vy-page-hero .vy-hero-orb{ width:480px; height:480px; right:auto; left:-140px; top:-40%; opacity:.2; }
.vy-breadcrumb{ font-size:13.5px; color:var(--vy-text-mute); margin-bottom:22px; }
.vy-breadcrumb a{ color:var(--vy-text-mute); transition:color .25s; }
.vy-breadcrumb a:hover{ color:var(--vy-accent-2); }
.vy-page-hero h1{ font-size:clamp(36px,5.6vw,64px); color:#fff; max-width:20ch; }
.vy-page-hero .lede{ font-size:17.5px; max-width:56ch; margin-top:20px; }

/* ==========================================================================
   13. SERVICE DETAIL BLOCKS (alternating rows, used on the Services page)
   ========================================================================== */
.vy-service-detail{ display:grid; grid-template-columns:0.85fr 1fr; gap:64px; align-items:center; padding:56px 0; border-top:1px solid var(--vy-border); }
.vy-service-detail:first-child{ border-top:none; }
.vy-service-detail.reverse{ direction:rtl; }
.vy-service-detail.reverse > *{ direction:ltr; }
.vy-service-detail-tag{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--vy-accent-2); margin-bottom:18px; }
.vy-service-detail h3{ font-size:clamp(24px,3vw,34px); color:#fff; }
.vy-service-detail .vy-check-list{ margin-top:24px; }
.vy-service-detail-panel{
  background:var(--vy-surface); border:1px solid var(--vy-border); border-radius:var(--vy-radius);
  padding:44px; position:relative; overflow:hidden; min-height:280px; display:flex; align-items:center; justify-content:center;
}
.vy-service-detail-panel .vy-service-icon{ width:84px; height:84px; font-size:36px; border-radius:22px; margin:0; }
.vy-service-detail-panel::after{
  content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:var(--vy-accent-grad);
  filter:blur(100px); opacity:.18; bottom:-100px; right:-60px;
}
@media (max-width:900px){
  .vy-service-detail, .vy-service-detail.reverse{ grid-template-columns:1fr; direction:ltr; }
  .vy-service-detail-panel{ order:-1; min-height:200px; }
}

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */
.vy-faq{ max-width:820px; margin:0 auto; display:grid; gap:14px; }
.vy-faq-item{ background:var(--vy-surface); border:1px solid var(--vy-border); border-radius:var(--vy-radius-sm); overflow:hidden; }
.vy-faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; text-align:left;
  background:none; border:none; color:#fff; font-family:var(--vy-font-display); font-size:16.5px; font-weight:600;
  padding:22px 26px; cursor:pointer;
}
.vy-faq-q .plus{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--vy-border); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--vy-accent-2); transition:transform .35s var(--vy-ease); }
.vy-faq-item.open .vy-faq-q .plus{ transform:rotate(45deg); }
.vy-faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--vy-ease); }
.vy-faq-a-inner{ padding:0 26px 24px; font-size:15px; color:var(--vy-text-dim); }
.vy-faq-item.open .vy-faq-a{ max-height:400px; }

/* ==========================================================================
   15. CONTACT PAGE
   ========================================================================== */
.vy-contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:64px; align-items:start; }
.vy-contact-cards{ display:grid; gap:16px; margin-top:32px; }
.vy-contact-card{ display:flex; gap:16px; align-items:flex-start; background:var(--vy-surface); border:1px solid var(--vy-border); border-radius:var(--vy-radius-sm); padding:22px 24px; }
.vy-contact-card .vy-service-icon{ width:44px; height:44px; font-size:18px; border-radius:12px; margin:0; }
.vy-contact-card b{ display:block; color:#fff; font-size:14.5px; margin-bottom:4px; }
.vy-contact-card span, .vy-contact-card a{ font-size:14px; color:var(--vy-text-dim); }
.vy-form{ background:var(--vy-surface); border:1px solid var(--vy-border); border-radius:var(--vy-radius); padding:40px; }
.vy-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.vy-form label{ display:block; font-size:13px; color:var(--vy-text-dim); margin-bottom:8px; font-weight:500; }
.vy-form input, .vy-form select, .vy-form textarea{
  width:100%; background:var(--vy-bg-soft); border:1px solid var(--vy-border); border-radius:10px; color:#fff;
  padding:13px 16px; font-family:var(--vy-font-body); font-size:14.5px; margin-bottom:18px; transition:border-color .25s;
}
.vy-form input:focus, .vy-form select:focus, .vy-form textarea:focus{ outline:none; border-color:var(--vy-accent); }
.vy-form textarea{ resize:vertical; min-height:120px; }
.vy-form button{ width:100%; justify-content:center; margin-top:6px; }
@media (max-width:900px){ .vy-contact-grid{ grid-template-columns:1fr; } .vy-form-row{ grid-template-columns:1fr; } }

/* ==========================================================================
   16. ADDITIONS: card links, team grid, dropdown menu, responsive overrides
   ========================================================================== */
.vy-card-link{ display:inline-block; margin-top:18px; font-size:13.5px; font-weight:600; color:var(--vy-accent-2); transition:transform .3s var(--vy-ease); }
.vy-service-card:hover .vy-card-link{ transform:translateX(6px); }

.vy-team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.vy-team-card{ background:var(--vy-surface); border:1px solid var(--vy-border); border-radius:var(--vy-radius); padding:28px; }
.vy-team-card b{ display:block; color:#fff; font-family:var(--vy-font-display); font-size:17px; margin-bottom:6px; }
.vy-team-card > span{ font-size:14px; color:var(--vy-text-dim); }
.vy-team-photo{ width:100%; aspect-ratio:1/1; border-radius:14px; margin-bottom:20px; background:var(--vy-surface-2); border:1px solid var(--vy-border); display:flex; align-items:center; justify-content:center; background-image:radial-gradient(circle at 30% 20%, rgba(124,92,255,.35), transparent 60%); }
.vy-team-photo span{ font-family:var(--vy-font-display); font-size:48px; color:#fff; opacity:.7; }
@media (max-width:980px){ .vy-team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vy-team-grid{ grid-template-columns:1fr; } }

/* Dropdown (sub-menu) */
.vy-nav li{ position:relative; }
.vy-nav .sub-menu{
  position:absolute; top:100%; left:-16px; min-width:240px; margin:0; padding:10px; list-style:none; display:block;
  background:rgba(13,14,23,.96); backdrop-filter:blur(16px); border:1px solid var(--vy-border); border-radius:14px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.3s var(--vy-ease);
}
.vy-nav li:hover > .sub-menu, .vy-nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.vy-nav .sub-menu li{ display:block; }
.vy-nav .sub-menu a{ display:block; padding:10px 14px; border-radius:8px; font-size:14px; }
.vy-nav .sub-menu a:hover{ background:rgba(255,255,255,.05); }
.vy-nav .sub-menu a::after{ display:none; }
.vy-nav .menu-item-has-children > a::before{ content:''; }
@media (max-width:900px){
  .vy-nav .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; background:none; border:none; padding:6px 0 0 14px; min-width:0; }
}

/* Make inline-styled grids collapse on small screens */
@media (max-width:980px){
  .vy-services-grid[style*="repeat(4"]{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:640px){
  .vy-services-grid[style*="repeat(4"], .vy-services-grid[style*="repeat(2"]{ grid-template-columns:1fr !important; }
}