/* ==========================================================================
   VIZVAKUR BHARATH PVT LTD — Core Design System
   Palette: Indigo Night + Saffron
   --------------------------------------------------------------------------
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Decorative atmosphere (aurora, grain, hairlines)
   06. Buttons & links
   07. Badges, chips, cards, icons
   08. Forms
   09. Site header
   10. Site footer
   11. Utilities & motion
   ========================================================================== */

/* ---------- 01. Design tokens ---------- */
:root {
  /* Core brand ramp — indigo night */
  --vb-ink-950:#040613;
  --vb-ink-900:#070A1C;
  --vb-ink-850:#090D22;
  --vb-ink-800:#0B1026;
  --vb-ink-700:#10173A;
  --vb-ink-600:#161B3D;
  --vb-ink-500:#232A5C;
  --vb-ink-400:#39407A;

  /* Saffron accent ramp */
  --vb-saffron:#E8A33D;
  --vb-saffron-600:#C4832A;
  --vb-marigold:#F2C879;
  --vb-marigold-soft:#F7DFAE;

  /* Support */
  --vb-teal:#2A9D8F;
  --vb-teal-soft:#7FCFC4;
  --vb-rose:#E07A6B;

  /* Neutrals */
  --vb-ivory:#F5F1E8;
  --vb-ivory-dim:#E7E1D3;
  --vb-bone:#FBF9F4;
  --vb-slate:#A7ADCB;
  --vb-slate-dim:#7A81A6;

  /* Semantic surfaces */
  --vb-bg:var(--vb-ink-900);
  --vb-bg-alt:var(--vb-ink-800);
  --vb-surface:rgba(255,255,255,.035);
  --vb-surface-2:rgba(255,255,255,.055);
  --vb-line:rgba(245,241,232,.10);
  --vb-line-strong:rgba(245,241,232,.18);
  --vb-gold-line:rgba(232,163,61,.32);

  /* Semantic text */
  --vb-text:var(--vb-ivory);
  --vb-text-muted:var(--vb-slate);
  --vb-text-dim:var(--vb-slate-dim);

  /* Light section inversion — two warm tones so the page can alternate
     ivory / sand / ink rather than running dark the whole way down. */
  --vb-light-bg:#F7F4EC;
  --vb-sand-bg:#EFE8D9;
  --vb-light-text:#141834;
  --vb-light-muted:#565C7B;
  --vb-light-line:rgba(20,24,52,.11);

  /* Gradients */
  --vb-grad-gold:linear-gradient(135deg,#F2C879 0%,#E8A33D 45%,#C97C1E 100%);
  --vb-grad-gold-soft:linear-gradient(135deg,rgba(242,200,121,.20),rgba(232,163,61,.05));
  --vb-grad-scrim:linear-gradient(180deg,rgba(7,10,28,0) 0%,rgba(7,10,28,.18) 38%,rgba(7,10,28,.82) 78%,rgba(7,10,28,.96) 100%);
  --vb-grad-scrim-soft:linear-gradient(180deg,rgba(7,10,28,0) 30%,rgba(7,10,28,.74) 100%);

  /* Typography */
  --vb-font-display:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --vb-font-body:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --vb-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --vb-fs-hero:clamp(2.6rem,1.35rem + 5.2vw,6rem);
  --vb-fs-h1:clamp(2.15rem,1.3rem + 3.5vw,4rem);
  --vb-fs-h2:clamp(1.75rem,1.15rem + 2.4vw,3.05rem);
  --vb-fs-h3:clamp(1.3rem,1.05rem + 1.05vw,1.85rem);
  --vb-fs-h4:clamp(1.08rem,.98rem + .45vw,1.3rem);
  --vb-fs-lead:clamp(1.02rem,.96rem + .38vw,1.22rem);
  --vb-fs-body:1rem;

  /* Space & shape */
  --vb-shell:1240px;
  --vb-shell-wide:1440px;
  --vb-gutter:clamp(1.15rem,.6rem + 2.2vw,2.75rem);
  --vb-section-y:clamp(4.25rem,2.4rem + 7vw,8.5rem);
  --vb-r-xs:8px;
  --vb-r-sm:12px;
  --vb-r-md:18px;
  --vb-r-lg:26px;
  --vb-r-xl:34px;
  --vb-r-pill:999px;

  /* Elevation */
  --vb-shadow-sm:0 2px 10px rgba(3,5,16,.28);
  --vb-shadow-md:0 18px 44px -18px rgba(3,5,16,.75);
  --vb-shadow-lg:0 42px 90px -34px rgba(3,5,16,.92);
  --vb-shadow-gold:0 18px 46px -20px rgba(232,163,61,.55);

  /* Motion */
  --vb-ease:cubic-bezier(.22,.61,.36,1);
  --vb-ease-out:cubic-bezier(.16,1,.3,1);
  --vb-ease-inout:cubic-bezier(.65,.05,.36,1);

  --vb-header-h:82px;
}

/* ---------- 02. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--vb-header-h) + 20px)}
body{
  margin:0;
  background:var(--vb-bg);
  color:var(--vb-text);
  font-family:var(--vb-font-body);
  font-size:var(--vb-fs-body);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.vb-locked{overflow:hidden}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--vb-line);margin:0}
::selection{background:var(--vb-saffron);color:#0A0D1F}

:focus-visible{
  outline:2px solid var(--vb-marigold);
  outline-offset:3px;
  border-radius:4px;
}

.vb-skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--vb-saffron);color:#0A0D1F;
  padding:.85rem 1.4rem;border-radius:0 0 var(--vb-r-sm) 0;
  font-weight:700;letter-spacing:.02em;
}
.vb-skip:focus{left:0}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--vb-ink-900)}
::-webkit-scrollbar-thumb{background:var(--vb-ink-500);border-radius:99px;border:3px solid var(--vb-ink-900)}
::-webkit-scrollbar-thumb:hover{background:var(--vb-saffron-600)}

/* ---------- 03. Typography ---------- */
.vb-display,h1,h2,h3{
  font-family:var(--vb-font-display);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.022em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40;
}
h1{font-size:var(--vb-fs-h1)}
h2{font-size:var(--vb-fs-h2)}
/* Let a heading sit at a different level than its visual weight, e.g. the
   home page h1, which lives in a section styled like every other h2. */
.vb-h2{font-size:var(--vb-fs-h2)}
h3{font-size:var(--vb-fs-h3);line-height:1.2}
h4{font-family:var(--vb-font-body);font-size:var(--vb-fs-h4);font-weight:700;letter-spacing:-.01em;line-height:1.35}

.vb-lead{
  font-size:var(--vb-fs-lead);
  line-height:1.72;
  color:var(--vb-text-muted);
}
.vb-muted{color:var(--vb-text-muted)}
.vb-dim{color:var(--vb-text-dim)}

.vb-gold{
  background:var(--vb-grad-gold);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.vb-hollow{
  color:transparent;
  -webkit-text-stroke:1.15px rgba(242,200,121,.62);
  font-style:italic;
}
.vb-ital{font-style:italic;font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 40}

.vb-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--vb-font-body);
  font-size:.72rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--vb-marigold);
  margin-bottom:1.15rem;
}
.vb-eyebrow::before{
  content:"";width:32px;height:1px;
  background:linear-gradient(90deg,transparent,var(--vb-saffron));
}
.vb-eyebrow--center::after{
  content:"";width:32px;height:1px;
  background:linear-gradient(90deg,var(--vb-saffron),transparent);
}

/* ---------- 04. Layout primitives ---------- */
.vb-shell{
  width:100%;max-width:var(--vb-shell);
  margin-inline:auto;
  padding-inline:var(--vb-gutter);
}
.vb-shell--wide{max-width:var(--vb-shell-wide)}
.vb-shell--narrow{max-width:880px}

.vb-section{
  position:relative;
  padding-block:var(--vb-section-y);
  isolation:isolate;
}
.vb-section--tight{padding-block:clamp(3rem,1.8rem + 4.5vw,5.5rem)}

/* ---- Light surfaces --------------------------------------------------
   .vb-section--light (ivory) and .vb-section--sand (warm sand) share one
   token flip, so every component that reads from the semantic tokens works
   on either without its own override. */
.vb-section--light,
.vb-section--sand{
  color:var(--vb-light-text);
  --vb-text:var(--vb-light-text);
  --vb-text-muted:var(--vb-light-muted);
  --vb-text-dim:#737995;
  --vb-line:var(--vb-light-line);
  --vb-line-strong:rgba(20,24,52,.17);
  --vb-surface:#FFFFFF;
  --vb-surface-2:#FFFFFF;
  --vb-gold-line:rgba(196,131,42,.34);
}
.vb-section--light{background:var(--vb-light-bg)}
.vb-section--sand{background:var(--vb-sand-bg)}
/* Sand sits between ivory and ink, so its cards need a touch more lift. */
.vb-section--sand .vb-card,
.vb-section--sand .vb-prod,
.vb-section--sand .vb-item{box-shadow:0 2px 14px -6px rgba(20,24,52,.18)}

/* Saffron reads too pale on a light ground — drop to the deeper tone. */
.vb-section--light .vb-eyebrow,
.vb-section--sand .vb-eyebrow,
.vb-section--light .vb-pill,
.vb-section--sand .vb-pill,
.vb-section--light .vb-index,
.vb-section--sand .vb-index{color:var(--vb-saffron-600)}
.vb-section--light .vb-hollow,
.vb-section--sand .vb-hollow{-webkit-text-stroke-color:rgba(20,24,52,.32)}

/* Atmosphere layers are built for the dark ground — soften rather than
   delete them so light sections still have some depth. */
.vb-section--light .vb-aurora,
.vb-section--sand .vb-aurora{opacity:.20}
.vb-section--light .vb-gridlines,
.vb-section--sand .vb-gridlines{
  background-image:
    linear-gradient(rgba(20,24,52,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,24,52,.05) 1px,transparent 1px);
}

/* Form controls: the dark theme's translucent white fill vanishes here. */
.vb-section--light .vb-input,.vb-section--sand .vb-input,
.vb-section--light .vb-select,.vb-section--sand .vb-select,
.vb-section--light .vb-textarea,.vb-section--sand .vb-textarea,
.vb-section--light .vb-field input,.vb-section--sand .vb-field input,
.vb-section--light .vb-field select,.vb-section--sand .vb-field select,
.vb-section--light .vb-field textarea,.vb-section--sand .vb-field textarea{
  /* background-color, not the shorthand: the shorthand would reset
     background-repeat/position and tile the select's chevron icon. */
  background-color:#fff;
  border-color:rgba(20,24,52,.16);
  color:var(--vb-light-text);
}
.vb-section--light .vb-field input:focus,.vb-section--sand .vb-field input:focus,
.vb-section--light .vb-field select:focus,.vb-section--sand .vb-field select:focus,
.vb-section--light .vb-field textarea:focus,.vb-section--sand .vb-field textarea:focus{
  background-color:#fff;
  border-color:var(--vb-saffron-600);
  box-shadow:0 0 0 4px rgba(196,131,42,.14);
}
.vb-section--light .vb-select,.vb-section--sand .vb-select,
.vb-section--light .vb-field select,.vb-section--sand .vb-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23565C7B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.vb-section--light .vb-select option,.vb-section--sand .vb-select option{
  background:#fff;color:var(--vb-light-text);
}

/* "Dark islands" — panels that carry their own dark ground (a gradient, or
   photography under a scrim). Dropped into a light section they would
   inherit dark text on a dark background, so flip the tokens back. */
.vb-section--light .vb-prog,
.vb-section--sand .vb-prog,
.vb-section--light .vb-duo__panel,
.vb-section--sand .vb-duo__panel{
  color:var(--vb-ivory);
  --vb-text:var(--vb-ivory);
  --vb-text-muted:var(--vb-slate);
  --vb-text-dim:var(--vb-slate-dim);
  --vb-line:rgba(245,241,232,.10);
  --vb-line-strong:rgba(245,241,232,.18);
  --vb-surface:rgba(255,255,255,.04);
  --vb-gold-line:rgba(232,163,61,.32);
}
.vb-section--light .vb-prog{box-shadow:0 40px 80px -40px rgba(20,24,52,.5)}
.vb-section--sand .vb-prog{box-shadow:0 40px 80px -40px rgba(20,24,52,.5)}
/* Accents inside a dark island go back to the brighter marigold. */
.vb-section--light .vb-prog .vb-eyebrow,
.vb-section--sand .vb-prog .vb-eyebrow,
.vb-section--light .vb-prog .vb-pill,
.vb-section--sand .vb-prog .vb-pill,
.vb-section--light .vb-duo__panel .vb-pill,
.vb-section--sand .vb-duo__panel .vb-pill,
.vb-section--light .vb-duo__panel .vb-link,
.vb-section--sand .vb-duo__panel .vb-link{color:var(--vb-marigold)}

.vb-sechead{max-width:720px;margin-bottom:clamp(2.25rem,1.4rem + 2.6vw,3.75rem)}
.vb-sechead--center{margin-inline:auto;text-align:center}
.vb-sechead p{margin-top:1.1rem}
.vb-sechead--split{
  max-width:none;display:grid;gap:1.5rem 3rem;
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
@media (min-width:900px){
  .vb-sechead--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .vb-sechead--split p{margin-top:0;padding-bottom:.4rem}
}

.vb-grid{display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.75rem)}
.vb-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.vb-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.vb-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

/* ---------- 05. Decorative atmosphere ---------- */
.vb-aurora{
  position:absolute;inset:-20% 0;z-index:-2;
  pointer-events:none;overflow:hidden;
}
.vb-aurora span{
  position:absolute;display:block;
  border-radius:50%;
  filter:blur(78px);
  opacity:.5;
  will-change:transform;
}
.vb-aurora span:nth-child(1){
  width:46vw;height:46vw;left:-8%;top:-6%;
  background:radial-gradient(circle,rgba(232,163,61,.42),transparent 66%);
  animation:vb-drift-a 26s var(--vb-ease-inout) infinite alternate;
}
.vb-aurora span:nth-child(2){
  width:40vw;height:40vw;right:-6%;top:18%;
  background:radial-gradient(circle,rgba(42,157,143,.34),transparent 66%);
  animation:vb-drift-b 32s var(--vb-ease-inout) infinite alternate;
}
.vb-aurora span:nth-child(3){
  width:52vw;height:52vw;left:26%;bottom:-24%;
  background:radial-gradient(circle,rgba(57,64,122,.55),transparent 68%);
  animation:vb-drift-c 38s var(--vb-ease-inout) infinite alternate;
}
@keyframes vb-drift-a{to{transform:translate3d(9vw,6vh,0) scale(1.16)}}
@keyframes vb-drift-b{to{transform:translate3d(-8vw,10vh,0) scale(1.22)}}
@keyframes vb-drift-c{to{transform:translate3d(6vw,-9vh,0) scale(1.1)}}

/* Film grain — inline SVG turbulence, no extra request.
   Deliberately on ::before: the sections that carry .vb-grain (.vb-phero,
   .vb-cta) use ::after for their photo scrim. Sharing ::after made this
   rule's opacity and blend mode leak onto the scrim and all but erase it. */
.vb-grain::before{
  content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.vb-gridlines{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(245,241,232,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,241,232,.045) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 80% 62% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 40%,#000 30%,transparent 78%);
}

.vb-rule{
  display:flex;align-items:center;gap:.85rem;
  color:var(--vb-gold-line);
}
.vb-rule::before,.vb-rule::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--vb-gold-line),transparent);
}
.vb-rule i{
  width:6px;height:6px;flex:none;
  background:var(--vb-saffron);
  transform:rotate(45deg);
}

/* ---------- 06. Buttons & links ---------- */
.vb-btn{
  --_bg:transparent;
  --_fg:var(--vb-text);
  --_bd:var(--vb-line-strong);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:.92rem 1.7rem;
  border:1px solid var(--_bd);
  border-radius:var(--vb-r-pill);
  background:var(--_bg);
  color:var(--_fg);
  font-family:var(--vb-font-body);
  font-size:.9rem;font-weight:700;
  letter-spacing:.045em;text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  transition:transform .3s var(--vb-ease-out),box-shadow .3s var(--vb-ease),border-color .3s var(--vb-ease),color .3s var(--vb-ease),background-color .3s var(--vb-ease);
}
.vb-btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .35s var(--vb-ease-out)}
.vb-btn:hover{transform:translateY(-2px)}
.vb-btn:hover svg{transform:translateX(3px)}
.vb-btn:active{transform:translateY(0)}

.vb-btn--gold{
  --_fg:#0A0D1F;
  --_bd:transparent;
  background:var(--vb-grad-gold);
  box-shadow:var(--vb-shadow-gold);
}
.vb-btn--gold::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .85s var(--vb-ease-out);
}
.vb-btn--gold:hover::after{transform:translateX(120%)}
.vb-btn--gold:hover{box-shadow:0 24px 56px -20px rgba(232,163,61,.72)}

.vb-btn--ghost{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.vb-btn--ghost:hover{
  --_bd:var(--vb-saffron);
  color:var(--vb-marigold);
  background:rgba(232,163,61,.09);
}
.vb-section--light .vb-btn--ghost{--_bd:rgba(18,22,46,.2)}
.vb-section--light .vb-btn--ghost:hover{color:var(--vb-saffron-600);--_bd:var(--vb-saffron)}

.vb-btn--ink{
  --_bg:var(--vb-ink-800);
  --_fg:var(--vb-ivory);
  --_bd:transparent;
  box-shadow:var(--vb-shadow-md);
}
.vb-btn--ink:hover{--_bg:var(--vb-ink-700)}

.vb-btn--sm{padding:.66rem 1.2rem;font-size:.78rem}
.vb-btn--block{display:flex;width:100%}

.vb-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.88rem;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--vb-marigold);
  padding-bottom:3px;
  background-image:linear-gradient(var(--vb-saffron),var(--vb-saffron));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s var(--vb-ease-out),color .3s var(--vb-ease);
}
.vb-link svg{width:1em;height:1em;transition:transform .35s var(--vb-ease-out)}
.vb-link:hover{background-size:100% 1px}
.vb-link:hover svg{transform:translateX(4px)}
.vb-section--light .vb-link{color:var(--vb-saffron-600)}

/* ---------- 07. Badges, chips, cards, icons ---------- */
.vb-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .95rem;
  border:1px solid var(--vb-gold-line);
  border-radius:var(--vb-r-pill);
  background:rgba(232,163,61,.07);
  font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--vb-marigold);
}
.vb-pill i{width:5px;height:5px;border-radius:50%;background:var(--vb-saffron);flex:none}
.vb-pill--live i{animation:vb-pulse 2s ease-in-out infinite}
@keyframes vb-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,.6)}
  50%{box-shadow:0 0 0 6px rgba(232,163,61,0)}
}

.vb-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .72rem;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-xs);
  background:var(--vb-surface);
  font-size:.72rem;font-weight:600;
  letter-spacing:.06em;
  color:var(--vb-text-muted);
}

.vb-index{
  font-family:var(--vb-font-display);
  font-size:.95rem;font-weight:600;font-style:italic;
  color:var(--vb-saffron);
  letter-spacing:.05em;
}

.vb-card{
  position:relative;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-lg);
  background:var(--vb-surface);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:transform .5s var(--vb-ease-out),border-color .4s var(--vb-ease),background-color .4s var(--vb-ease),box-shadow .5s var(--vb-ease);
}
.vb-card::before{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  background:var(--vb-grad-gold-soft);
  opacity:0;transition:opacity .45s var(--vb-ease);
  pointer-events:none;
}
.vb-card:hover{
  transform:translateY(-6px);
  border-color:var(--vb-gold-line);
  box-shadow:var(--vb-shadow-lg);
}
.vb-card:hover::before{opacity:1}
.vb-card > *{position:relative;z-index:1}
.vb-section--light .vb-card{background:#fff;border-color:var(--vb-light-line);box-shadow:0 1px 3px rgba(18,22,46,.05)}
.vb-section--light .vb-card:hover{box-shadow:0 32px 64px -30px rgba(18,22,46,.34)}

.vb-icon{
  width:50px;height:50px;flex:none;
  display:grid;place-items:center;
  border-radius:14px;
  border:1px solid var(--vb-gold-line);
  background:linear-gradient(150deg,rgba(242,200,121,.18),rgba(232,163,61,.04));
  color:var(--vb-marigold);
}
.vb-icon svg{width:22px;height:22px;stroke-width:1.5}
.vb-section--light .vb-icon{color:var(--vb-saffron-600)}

/* ---------- 08. Forms ---------- */
.vb-field{margin-bottom:1.15rem}
.vb-field label,.vb-label{
  display:block;
  margin-bottom:.5rem;
  font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--vb-text-muted);
}
.vb-input,.vb-select,.vb-textarea,
.vb-field input[type=text],.vb-field input[type=email],
.vb-field input[type=tel],.vb-field input[type=password],
.vb-field select,.vb-field textarea{
  width:100%;
  padding:.92rem 1.1rem;
  border:1px solid var(--vb-line-strong);
  border-radius:var(--vb-r-sm);
  background:rgba(255,255,255,.04);
  color:var(--vb-text);
  font-size:.95rem;
  transition:border-color .3s var(--vb-ease),background-color .3s var(--vb-ease),box-shadow .3s var(--vb-ease);
}
.vb-textarea,.vb-field textarea{min-height:150px;resize:vertical;line-height:1.65}
.vb-input::placeholder,.vb-textarea::placeholder,
.vb-field input::placeholder,.vb-field textarea::placeholder{color:var(--vb-text-dim)}
.vb-input:focus,.vb-select:focus,.vb-textarea:focus,
.vb-field input:focus,.vb-field select:focus,.vb-field textarea:focus{
  outline:none;
  border-color:var(--vb-saffron);
  background:rgba(232,163,61,.06);
  box-shadow:0 0 0 4px rgba(232,163,61,.13);
}
.vb-select,.vb-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A7ADCB' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.05rem center;
  padding-right:2.75rem;
}
.vb-select option{background:var(--vb-ink-800);color:var(--vb-ivory)}

.vb-check{
  display:flex;align-items:center;gap:.6rem;
  font-size:.86rem;color:var(--vb-text-muted);
  cursor:pointer;letter-spacing:0;text-transform:none;font-weight:500;
}
.vb-check input[type=checkbox]{
  width:17px;height:17px;flex:none;
  accent-color:var(--vb-saffron);
  cursor:pointer;
}
.vb-formnote{
  margin-top:.9rem;
  font-size:.82rem;
  min-height:1.3em;
}
.vb-formnote[data-state="ok"]{color:var(--vb-teal-soft)}
.vb-formnote[data-state="error"]{color:var(--vb-rose)}

/* ---------- 09. Site header ---------- */
.vb-header{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--vb-header-h);
  display:flex;align-items:center;
  transition:background-color .45s var(--vb-ease),backdrop-filter .45s var(--vb-ease),border-color .45s var(--vb-ease),height .45s var(--vb-ease);
  border-bottom:1px solid transparent;
}
.vb-header.is-stuck{
  height:70px;
  background:rgba(7,10,28,.82);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom-color:var(--vb-line);
}
.vb-header__inner{
  width:100%;max-width:var(--vb-shell-wide);
  margin-inline:auto;padding-inline:var(--vb-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}

.vb-brand{display:flex;align-items:center;gap:.8rem;flex:none}
/* The mark is the company logo's icon, reversed to ivory so its navy reads on
   the dark ground. Landscape ratio (~1.53:1) — size the image by an explicit
   height and let the width follow; a percentage height has no definite basis
   here and would fall back to the intrinsic 356x233. */
.vb-brand__mark{
  flex:none;
  display:flex;align-items:center;
}
.vb-brand__mark img{
  display:block;
  height:46px;width:auto;
  max-width:none;
  object-fit:contain;
}
.vb-brand__text{display:flex;flex-direction:column;line-height:1.05}
.vb-brand__name{
  font-family:var(--vb-font-display);
  font-size:1.02rem;font-weight:600;
  letter-spacing:.01em;
  color:var(--vb-ivory);
  white-space:nowrap;
}
.vb-brand__tag{
  font-size:.56rem;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--vb-saffron);
  margin-top:3px;
}

.vb-nav{display:flex;align-items:center;gap:.35rem}
.vb-nav__link{
  position:relative;
  padding:.6rem .95rem;
  font-size:.86rem;font-weight:600;
  letter-spacing:.03em;
  color:var(--vb-text-muted);
  border-radius:var(--vb-r-pill);
  transition:color .3s var(--vb-ease),background-color .3s var(--vb-ease);
}
.vb-nav__link::after{
  content:"";position:absolute;
  left:50%;bottom:.34rem;translate:-50% 0;
  width:0;height:2px;border-radius:2px;
  background:var(--vb-grad-gold);
  transition:width .35s var(--vb-ease-out);
}
.vb-nav__link:hover{color:var(--vb-ivory)}
.vb-nav__link:hover::after{width:18px}
.vb-nav__link[aria-current="page"]{color:var(--vb-ivory)}
.vb-nav__link[aria-current="page"]::after{width:18px}

.vb-header__actions{display:flex;align-items:center;gap:.7rem;flex:none}

.vb-burger{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--vb-line-strong);
  border-radius:12px;
  place-items:center;
  background:rgba(255,255,255,.04);
}
.vb-burger span{
  display:block;width:19px;height:1.6px;
  background:var(--vb-ivory);border-radius:2px;
  transition:transform .38s var(--vb-ease-out),opacity .25s var(--vb-ease);
}
.vb-burger span + span{margin-top:5px}
.vb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.vb-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.vb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

.vb-drawer{
  position:fixed;inset:0;z-index:99;
  background:rgba(7,10,28,.97);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  padding:calc(var(--vb-header-h) + 2rem) var(--vb-gutter) 2.5rem;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow-y:auto;
  opacity:0;visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .4s var(--vb-ease),transform .4s var(--vb-ease-out),visibility .4s;
}
.vb-drawer.is-open{opacity:1;visibility:visible;transform:none}
.vb-drawer__list{display:flex;flex-direction:column}
.vb-drawer__list li{border-bottom:1px solid var(--vb-line)}
.vb-drawer__list a{
  display:flex;align-items:baseline;gap:1rem;
  padding:1.1rem 0;
  font-family:var(--vb-font-display);
  font-size:1.65rem;font-weight:600;
  letter-spacing:-.02em;
  color:var(--vb-ivory);
  transition:color .3s var(--vb-ease),padding-left .35s var(--vb-ease-out);
}
.vb-drawer__list a:hover{color:var(--vb-marigold);padding-left:.6rem}
.vb-drawer__list em{
  font-family:var(--vb-font-mono);
  font-size:.68rem;font-style:normal;
  color:var(--vb-saffron);letter-spacing:.1em;
}
.vb-drawer__foot{display:grid;gap:1rem;padding-top:2rem}
.vb-drawer__foot .vb-btn{width:100%}
.vb-drawer__contact{font-size:.82rem;color:var(--vb-text-dim);line-height:1.9}
.vb-drawer__contact a:hover{color:var(--vb-marigold)}

@media (max-width:1023px){
  .vb-nav{display:none}
  .vb-header__actions .vb-btn--gold{display:none}
  .vb-burger{display:grid}
}
@media (max-width:430px){
  /* Keep the company name on small screens — drop only the tagline. */
  .vb-brand{gap:.55rem}
  .vb-brand__mark img{height:38px}
  .vb-brand__name{font-size:.88rem}
  .vb-brand__tag{display:none}
}

/* ---------- 10. Site footer ---------- */
.vb-footer{
  position:relative;
  background-color:var(--vb-ink-950);
  border-top:1px solid var(--vb-line);
  padding-top:clamp(3.5rem,2rem + 5vw,6rem);
  overflow:hidden;
  isolation:isolate;
}
.vb-footer::before{
  content:"";position:absolute;inset:auto 0 -55% 0;height:80%;z-index:-1;
  background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(232,163,61,.16),transparent 70%);
  pointer-events:none;
}
.vb-footer__top{
  display:grid;gap:2.75rem 2.5rem;
  grid-template-columns:minmax(0,1fr);
  padding-bottom:3rem;
}
@media (min-width:760px){
  .vb-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1080px){
  .vb-footer__top{grid-template-columns:1.6fr .9fr .9fr 1.25fr}
}
.vb-footer__about p{
  margin-top:1.25rem;
  font-size:.92rem;line-height:1.8;
  color:var(--vb-text-dim);
  max-width:40ch;
}
.vb-footer h4{
  font-size:.74rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--vb-marigold);
  margin-bottom:1.35rem;
}
.vb-footer__links li + li{margin-top:.72rem}
.vb-footer__links a{
  font-size:.9rem;color:var(--vb-text-muted);
  transition:color .3s var(--vb-ease),padding-left .3s var(--vb-ease-out);
  display:inline-block;
}
.vb-footer__links a:hover{color:var(--vb-marigold);padding-left:5px}

.vb-footer__contact li{
  display:flex;gap:.8rem;
  font-size:.9rem;color:var(--vb-text-muted);
  line-height:1.65;
}
.vb-footer__contact li + li{margin-top:1rem}
.vb-footer__contact svg{
  width:16px;height:16px;flex:none;margin-top:.35rem;
  stroke:var(--vb-saffron);stroke-width:1.6;
}
.vb-footer__contact a:hover{color:var(--vb-marigold)}

.vb-social{display:flex;gap:.55rem;margin-top:1.6rem}
.vb-social a{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid var(--vb-line-strong);
  border-radius:11px;
  color:var(--vb-text-muted);
  transition:all .32s var(--vb-ease);
}
.vb-social svg{width:16px;height:16px}
.vb-social a:hover{
  color:#0A0D1F;
  background:var(--vb-grad-gold);
  border-color:transparent;
  transform:translateY(-3px);
}

/* Legal links live in the footer, never in the header */
.vb-footer__legal{
  border-top:1px solid var(--vb-line);
  padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;
  align-items:center;justify-content:center;
}
.vb-footer__legal a{
  font-size:.8rem;color:var(--vb-text-dim);
  transition:color .3s var(--vb-ease);
  position:relative;
}
.vb-footer__legal a:hover{color:var(--vb-marigold)}
.vb-footer__legal a:not(:last-child)::after{
  content:"";position:absolute;right:-.85rem;top:50%;translate:0 -50%;
  width:3px;height:3px;border-radius:50%;background:var(--vb-line-strong);
}
.vb-footer__base{
  border-top:1px solid var(--vb-line);
  padding-block:1.5rem 1.9rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--vb-text-dim);
}
.vb-footer__base strong{color:var(--vb-text-muted);font-weight:600}

.vb-totop{
  position:fixed;right:clamp(1rem,.4rem + 1.2vw,1.8rem);bottom:clamp(1rem,.4rem + 1.2vw,1.8rem);
  z-index:80;
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--vb-gold-line);
  background:rgba(7,10,28,.75);
  backdrop-filter:blur(10px);
  color:var(--vb-marigold);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:all .4s var(--vb-ease-out);
}
.vb-totop svg{width:17px;height:17px}
.vb-totop.is-visible{opacity:1;visibility:visible;transform:none}
.vb-totop:hover{background:var(--vb-grad-gold);color:#0A0D1F;border-color:transparent}

/* ---------- 11. Utilities & motion ---------- */
.vb-center{text-align:center}
.vb-mt-sm{margin-top:1rem}
.vb-mt{margin-top:1.75rem}
.vb-mt-lg{margin-top:2.75rem}
.vb-flex{display:flex;flex-wrap:wrap;gap:.9rem}
.vb-flex--center{justify-content:center}
.vb-sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--vb-ease-out),transform .85s var(--vb-ease-out);
  transition-delay:var(--vb-delay,0ms);
}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].is-in{opacity:1;transform:none}

.vb-words{display:inline}
.vb-words .vb-word{
  display:inline-block;
  opacity:0;
  transform:translateY(.6em) rotate(2deg);
  transition:opacity .8s var(--vb-ease-out),transform .9s var(--vb-ease-out);
  transition-delay:calc(var(--i,0) * 68ms);
}
.vb-words.is-in .vb-word{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal],.vb-words .vb-word{opacity:1;transform:none}
}

/* Fraunces ships only a swash ampersand, which misreads as an "R" at heading
   sizes. Render ampersands inside display type in the body face instead. */
.vb-amp{
  font-family:var(--vb-font-body);
  font-style:normal;
  font-weight:600;
  font-size:.9em;
  letter-spacing:0;
}