/* ==========================================================================
   Rudraksh Industries — Premium redesign v4 (Light Theme, logo-derived palette)
   Palette extracted directly from image/menu/rudraksh-logo.png via pixel
   analysis: the logo is a single rust/terracotta hue, dominant value #9e4620
   (which also matches the color already used for .call-header/.header-link
   in the site's original css/style.css — confirming this IS the brand color).
   Primary/secondary/accent below are tints & shades of that one logo hue —
   no unrelated colors (no blue/navy/cyan) were introduced.

   SCOPE RULE: this file MUST NEVER contain a selector that matches the
   original footer markup — .jb-footer_area, .footer-middle_area,
   .footer-bottom_area, .footer-widgets*, .jb-address, .jb-email, .jb-phone,
   .jb-social_link, .copyright, .accordion, .panel, .rudraksh-tape-*.
   The footer is an ABSOLUTE NO-TOUCH zone, in HTML and in CSS.
   ========================================================================== */

:root{
  --v3-primary:      #9e4620;   /* exact logo color */
  --v3-primary-dark: #7a3416;   /* shade, for hover/depth */
  --v3-primary-deep: #5c2610;   /* darkest shade, small high-contrast uses */
  --v3-accent:       #c9702f;   /* lighter tint of the same hue, gradient partner */
  --v3-accent-2:     #e0995a;   /* even lighter tint, secondary highlights */
  --v3-tint-soft:    #fdf1e7;   /* very light warm tint, badge/eyebrow backgrounds */
  --v3-tint-soft-2:  #f8e4d3;

  --v3-ink:          #191b1f;   /* deep charcoal — primary text on light backgrounds */
  --v3-ink-soft:     #55565c;   /* secondary text — still highly legible */
  --v3-white:        #ffffff;

  --v3-bg:           #ffffff;
  --v3-bg-soft:      #f8f9fa;   /* soft light gray, as specified */
  --v3-bg-soft-2:    #f3f1ef;
  --v3-border:       #e7e5e2;

  --v3-radius:     20px;
  --v3-radius-sm:  12px;
  --v3-shadow:     0 10px 28px rgba(30,20,10,.07);
  --v3-shadow-lg:  0 24px 56px rgba(30,20,10,.12);
  --v3-glow:       0 0 0 1px rgba(158,70,32,.18), 0 16px 34px rgba(158,70,32,.22);
  --v3-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v3-ease:       cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.v3-wrap{ max-width:1280px; margin:0 auto; padding:0 20px; }
.v3-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; }
.v3-skip{ position:absolute; left:12px; top:-60px; z-index:10000; background:#fff; color:var(--v3-ink); padding:12px 20px; border-radius:8px; font:700 14px/1 var(--v3-font); text-decoration:none; box-shadow:var(--v3-shadow-lg); transition:top .2s var(--v3-ease); }
.v3-skip:focus{ top:12px; }

/* ---------- Page-load state (light) ---------- */
html.v3-loading body{ overflow:hidden; }
.v3-loader{ position:fixed; inset:0; z-index:9999; background:#fff; display:flex; align-items:center; justify-content:center; transition:opacity .5s var(--v3-ease), visibility .5s; }
.v3-loader__ring{ width:48px; height:48px; border-radius:50%; border:3px solid var(--v3-border); border-top-color:var(--v3-primary); animation:v3Spin .8s linear infinite; }
html:not(.v3-loading) .v3-loader{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes v3Spin{ to{ transform:rotate(360deg); } }

/* ---------- Section chrome ---------- */
.v3-section{ padding:90px 0; position:relative; background:var(--v3-bg); color:var(--v3-ink); }
.v3-section--tight{ padding:64px 0; }
.v3-section--light{ background:var(--v3-bg); color:var(--v3-ink); }
.v3-section--dark{ background:linear-gradient(180deg, var(--v3-bg-soft) 0%, #f4ede6 100%); color:var(--v3-ink); }
.v3-section p{ color:var(--v3-ink-soft); }

.v3-eyebrow{ display:inline-flex; align-items:center; gap:8px; font:700 12px/1 var(--v3-font); letter-spacing:1.6px; text-transform:uppercase; padding:8px 18px; border-radius:50px; margin-bottom:18px; background:var(--v3-tint-soft); color:var(--v3-primary); border:1px solid var(--v3-tint-soft-2); }

.v3-h2{ font:800 clamp(26px,3.6vw,42px)/1.22 var(--v3-font); letter-spacing:-.6px; margin:0 0 16px; color:var(--v3-ink); }
.v3-h2 em{ font-style:normal; background:linear-gradient(120deg,var(--v3-primary),var(--v3-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.v3-lead{ font:400 16.5px/1.75 var(--v3-font); max-width:660px; margin:0 0 8px; color:var(--v3-ink-soft); }

.v3-head{ text-align:center; max-width:740px; margin:0 auto 54px; }
.v3-head .v3-lead{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons: scale + glow + sweeping gradient micro-interaction ---------- */
.v3-btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:700 15px/1 var(--v3-font); padding:16px 30px; border-radius:12px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--v3-ease), box-shadow .35s var(--v3-ease), background .35s var(--v3-ease), color .35s var(--v3-ease);
}
.v3-btn::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .65s ease; z-index:1; pointer-events:none;
}
.v3-btn:hover::after{ left:130%; }
.v3-btn:focus-visible{ outline:3px solid var(--v3-accent-2); outline-offset:2px; }
.v3-btn > *{ position:relative; z-index:2; }

.v3-btn--primary{ background:linear-gradient(135deg,var(--v3-primary),var(--v3-accent)); color:#fff; box-shadow:0 12px 26px rgba(158,70,32,.28); }
.v3-btn--primary:hover{ transform:translateY(-3px) scale(1.03); box-shadow:var(--v3-glow); }
.v3-btn--glass{ background:#fff; color:var(--v3-ink); border-color:var(--v3-border); box-shadow:var(--v3-shadow); }
.v3-btn--glass:hover{ border-color:var(--v3-primary); color:var(--v3-primary); transform:translateY(-3px) scale(1.03); }
.v3-btn--outline{ background:#fff; color:var(--v3-ink); border-color:var(--v3-border); }
.v3-btn--outline:hover{ border-color:var(--v3-primary); color:var(--v3-primary); transform:translateY(-3px) scale(1.03); box-shadow:var(--v3-shadow); }
.v3-btn--wa{ background:linear-gradient(135deg,#25D366,#1ea952); color:#fff; box-shadow:0 12px 26px rgba(37,211,102,.28); }
.v3-btn--wa:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 20px 40px rgba(37,211,102,.36); }
.v3-btn--block{ width:100%; }

/* ---------- Scroll animation: keyframe fade + slide-up, triggered by IO ---------- */
@keyframes v3FadeUp{ from{ opacity:0; transform:translateY(46px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes v3FadeIn{ from{ opacity:0; } to{ opacity:1; } }
.v3-animate{ opacity:0; }
.v3-animate.v3-in{ animation:v3FadeUp .9s var(--v3-ease) both; }
.v3-stagger.v3-in > *{ opacity:0; animation:v3FadeUp .8s var(--v3-ease) both; }
.v3-stagger.v3-in > *:nth-child(1){ animation-delay:.03s; }
.v3-stagger.v3-in > *:nth-child(2){ animation-delay:.10s; }
.v3-stagger.v3-in > *:nth-child(3){ animation-delay:.17s; }
.v3-stagger.v3-in > *:nth-child(4){ animation-delay:.24s; }
.v3-stagger.v3-in > *:nth-child(5){ animation-delay:.31s; }
.v3-stagger.v3-in > *:nth-child(6){ animation-delay:.38s; }
.v3-stagger.v3-in > *:nth-child(n+7){ animation-delay:.42s; }

/* ---------- Gradient border (mask trick — robust, no extra markup) ---------- */
.v3-gradient-border{ position:relative; border-radius:var(--v3-radius); }
.v3-gradient-border::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg, var(--v3-primary), var(--v3-accent) 60%, var(--v3-accent-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s var(--v3-ease); pointer-events:none;
}
.v3-gradient-border:hover::before{ opacity:1; }

/* ---------- Glass cards (light glassmorphism — frosted white, not dark) ---------- */
.v3-glass-dark{ background:rgba(255,255,255,.75); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.9); box-shadow:var(--v3-shadow); color:var(--v3-ink); }
.v3-glass-dark p{ color:var(--v3-ink-soft); }
.v3-glass-light{ background:rgba(255,255,255,.72); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,.9); color:var(--v3-ink); }

/* ==========================================================================
   HERO — light premium theme with soft parallax glow orbs
   ========================================================================== */
.v3-hero{ position:relative; overflow:hidden; background:radial-gradient(1100px 480px at 88% -10%, var(--v3-tint-soft) 0%, transparent 60%), linear-gradient(180deg,#ffffff 0%, var(--v3-bg-soft) 100%); padding:76px 0 60px; color:var(--v3-ink); }
.v3-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(158,70,32,.05) 1px, transparent 1px); background-size:26px 26px; opacity:.5; pointer-events:none; }
.v3-hero__orb{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; will-change:transform; opacity:.55; }
.v3-hero__orb--1{ width:420px; height:420px; background:radial-gradient(circle, var(--v3-tint-soft-2), transparent 70%); top:-140px; right:-80px; }
.v3-hero__orb--2{ width:340px; height:340px; background:radial-gradient(circle, #fbe8da, transparent 70%); bottom:-140px; left:-100px; }
[data-v3-parallax]{ transform:translate3d(0, calc(var(--v3-py,0) * 1px), 0); }

.v3-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.v3-hero h1{ font:800 clamp(32px,4.6vw,52px)/1.15 var(--v3-font); letter-spacing:-.8px; margin:0 0 22px; color:var(--v3-ink); }
.v3-hero h1 em{ font-style:normal; background:linear-gradient(120deg,var(--v3-primary),var(--v3-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v3-hero p.v3-lead{ color:var(--v3-ink-soft); font-size:17.5px; max-width:560px; }
.v3-hero__meta{ display:flex; flex-wrap:wrap; gap:24px; margin:24px 0 30px; }
.v3-hero__meta div{ display:flex; align-items:center; gap:9px; font:600 14px/1 var(--v3-font); color:var(--v3-ink-soft); }
.v3-hero__meta i{ color:var(--v3-primary); }
.v3-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* Positioning context for the hero visual column — without this, .v3-hero__badge's
   position:absolute falls back to .v3-hero__grid (the nearest positioned ancestor),
   which spans BOTH columns, so the badge lands relative to the whole hero instead of
   the image card next to it. This scopes it correctly to just the image column. */
.v3-hero__visual{ position:relative; }

.v3-hero__stage{ position:relative; border-radius:26px; padding:20px; aspect-ratio:4/3.1; overflow:hidden; background:#fff; box-shadow:var(--v3-shadow-lg); border:1px solid var(--v3-border); }
.v3-hero__stage img{ position:absolute; inset:20px; width:calc(100% - 40px); height:calc(100% - 40px); object-fit:cover; border-radius:16px; opacity:0; transition:opacity 1.1s ease; }
.v3-hero__stage img.v3-active{ opacity:1; }
.v3-hero__badge{ position:absolute; left:-16px; bottom:26px; z-index:3; border-radius:16px; padding:15px 19px; display:flex; align-items:center; gap:12px; box-shadow:var(--v3-shadow-lg); background:#fff; border:1px solid var(--v3-border); }
.v3-hero__badge i{ font-size:20px; color:#16a34a; }
.v3-hero__badge b{ display:block; font:800 15px/1.2 var(--v3-font); color:var(--v3-ink); }
.v3-hero__badge span{ font:500 12px/1.2 var(--v3-font); color:var(--v3-ink-soft); }

/* ---------- Trust strip (light) ---------- */
.v3-trust{ background:#fff; border-bottom:1px solid var(--v3-border); }
.v3-trust__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:32px 0; }
.v3-trust__item{ display:flex; align-items:center; gap:14px; }
.v3-trust__icon{ flex:0 0 auto; width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--v3-tint-soft); color:var(--v3-primary); font-size:20px; transition:transform .3s var(--v3-ease); }
.v3-trust__item:hover .v3-trust__icon{ transform:scale(1.1) rotate(-6deg); }
.v3-trust__item b{ display:block; font:700 15px/1.2 var(--v3-font); color:var(--v3-ink); }
.v3-trust__item span{ font:500 12.5px/1.3 var(--v3-font); color:var(--v3-ink-soft); }

/* ---------- About ---------- */
.v3-about__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.v3-about__media{ position:relative; }
.v3-about__media img{ width:100%; border-radius:var(--v3-radius); box-shadow:var(--v3-shadow-lg); display:block; }
.v3-about__stat{ position:absolute; right:-18px; top:-18px; border-radius:16px; padding:18px 22px; background:#fff; box-shadow:var(--v3-shadow-lg); border:1px solid var(--v3-border); border-top:3px solid var(--v3-primary); }
.v3-about__stat b{ display:block; font:800 28px/1 var(--v3-font); color:var(--v3-primary); }
.v3-about__stat span{ font:600 12px/1.3 var(--v3-font); color:var(--v3-ink-soft); }
.v3-check{ list-style:none; margin:22px 0 28px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.v3-check li{ display:flex; align-items:flex-start; gap:9px; font:600 14px/1.4 var(--v3-font); color:var(--v3-ink); }
.v3-check i{ color:var(--v3-primary); margin-top:2px; }

/* ==========================================================================
   SOLUTIONS — BENTO GRID (asymmetric, one brand-color accent tile)
   ========================================================================== */
.v3-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(190px, auto); gap:22px; align-items:stretch; }
.v3-bento-card{ background:#fff; border:1px solid var(--v3-border); border-radius:var(--v3-radius); padding:28px; transition:transform .4s var(--v3-ease), box-shadow .4s var(--v3-ease); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.v3-bento-card:hover{ transform:translateY(-7px); box-shadow:var(--v3-shadow-lg); border-color:transparent; }
.v3-bento-card--lg{ grid-column:span 2; grid-row:span 2; }
.v3-bento-card--tall{ grid-row:span 2; }
.v3-bento-card--dark{ background:linear-gradient(150deg,var(--v3-primary),var(--v3-primary-dark)); color:#fff; border:none; isolation:isolate; }
.v3-bento-card--dark *{ color:inherit; }
/* Blurred photo background: real photo + brand-color tint, blurred together as one layer,
   sitting behind the card content (which gets z-index:1 below) so text never sits directly
   on a busy unblurred image. Uses ::after (not ::before) since .v3-gradient-border already
   owns ::before on this same card for its hover border effect. */
.v3-bento-card--dark::after{
  content:"";
  position:absolute; inset:-14px;
  background-image:linear-gradient(150deg, rgba(122,52,22,.86), rgba(92,38,16,.92)), url('../image/slider/data-center.jpg');
  background-size:cover;
  background-position:center;
  background-blend-mode:multiply;
  filter:blur(7px);
  transform:scale(1.08);
  z-index:0;
}
.v3-bento-card--dark > *{ position:relative; z-index:1; }
.v3-bento-card__icon{ width:54px; height:54px; border-radius:14px; background:var(--v3-tint-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px; transition:transform .35s var(--v3-ease), background .35s var(--v3-ease); }
.v3-bento-card:hover .v3-bento-card__icon{ transform:rotate(-8deg) scale(1.06); background:var(--v3-primary); }
.v3-bento-card:hover .v3-bento-card__icon i{ color:#fff; }
.v3-bento-card:hover .v3-bento-card__icon img{ filter:brightness(0) invert(1); }
.v3-bento-card--dark .v3-bento-card__icon{ background:rgba(255,255,255,.16); }
.v3-bento-card__icon img{ width:28px; height:28px; object-fit:contain; }
.v3-bento-card__icon i{ font-size:23px; color:var(--v3-primary); }
.v3-bento-card--dark .v3-bento-card__icon i{ color:#fff; }
.v3-bento-card h3{ font:800 18px/1.3 var(--v3-font); margin:0 0 9px; color:var(--v3-ink); }
.v3-bento-card--dark h3{ color:#fff; }
.v3-bento-card p{ font:400 13.5px/1.6 var(--v3-font); color:var(--v3-ink-soft); margin:0 0 14px; flex:1; }
.v3-bento-card.v3-bento-card--dark p{ color:rgba(255,255,255,.88); }
.v3-bento-card__link{ font:700 12.5px/1 var(--v3-font); display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--v3-primary); }
.v3-bento-card--dark .v3-bento-card__link{ color:#fff; }
.v3-bento-card__link i{ transition:transform .3s var(--v3-ease); font-size:11px; }
.v3-bento-card:hover .v3-bento-card__link i{ transform:translateX(4px); }
.v3-tagrow{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.v3-tag{ font:600 11px/1 var(--v3-font); padding:6px 10px; border-radius:6px; }
.v3-bento-card:not(.v3-bento-card--dark) .v3-tag{ color:var(--v3-primary-dark); background:var(--v3-tint-soft); border:1px solid var(--v3-tint-soft-2); }
.v3-bento-card--dark .v3-tag{ color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); }

/* ---------- Industries ---------- */
.v3-industries__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.v3-ind-card{ background:#fff; border:1px solid var(--v3-border); border-radius:var(--v3-radius-sm); padding:26px 14px; text-align:center; transition:all .3s var(--v3-ease); }
.v3-ind-card:hover{ border-color:var(--v3-primary); transform:translateY(-4px); box-shadow:var(--v3-shadow); }
.v3-ind-card i{ font-size:28px; color:var(--v3-ink); display:block; margin-bottom:12px; transition:color .3s,transform .3s; }
.v3-ind-card:hover i{ color:var(--v3-primary); transform:scale(1.12); }
.v3-ind-card span{ font:700 13.5px/1.3 var(--v3-font); color:var(--v3-ink); }

/* ---------- Product categories ---------- */
.v3-products__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.v3-prod-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--v3-border); border-radius:var(--v3-radius); overflow:hidden; text-decoration:none; transition:all .35s var(--v3-ease); }
.v3-prod-card:hover{ box-shadow:var(--v3-shadow-lg); transform:translateY(-6px); border-color:transparent; }
.v3-prod-card__img{ height:150px; display:flex; align-items:center; justify-content:center; background:var(--v3-bg-soft); padding:18px; overflow:hidden; }
.v3-prod-card__img img{ max-height:100%; max-width:100%; object-fit:contain; transition:transform .45s var(--v3-ease); }
.v3-prod-card:hover .v3-prod-card__img img{ transform:scale(1.08) rotate(-1deg); }
.v3-prod-card__body{ padding:18px 18px 20px; flex:1; display:flex; flex-direction:column; }
.v3-prod-card__body h3{ font:700 15.5px/1.35 var(--v3-font); color:var(--v3-ink); margin:0 0 6px; }
.v3-prod-card__body p{ font:400 12.5px/1.5 var(--v3-font); color:var(--v3-ink-soft); margin:0 0 14px; flex:1; }
.v3-prod-card__cta{ font:700 12.5px/1 var(--v3-font); color:var(--v3-primary); display:inline-flex; align-items:center; gap:6px; }
.v3-prod-card:hover .v3-prod-card__cta{ color:var(--v3-primary-dark); }

/* ---------- Banner CTA (light scrim over image, not black) ---------- */
.v3-banner{ margin-top:42px; border-radius:var(--v3-radius); overflow:hidden; position:relative; display:flex; align-items:center; min-height:250px; background:var(--v3-bg-soft); border:1px solid var(--v3-border); }
.v3-banner__bg{ position:absolute; inset:-24px; width:calc(100% + 48px); height:calc(100% + 48px); object-fit:cover; opacity:.34; will-change:transform; }
.v3-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(255,255,255,.96) 24%, rgba(255,255,255,.55) 85%); }
.v3-banner__body{ position:relative; z-index:1; padding:44px; color:var(--v3-ink); max-width:560px; }
.v3-banner__body h3{ font:800 25px/1.3 var(--v3-font); margin:0 0 10px; color:var(--v3-ink); }
.v3-banner__body p{ font:400 14.5px/1.6 var(--v3-font); color:var(--v3-ink-soft); margin:0 0 22px; }

/* ---------- Process steps ---------- */
.v3-process__row{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; }
.v3-process__row::before{ content:""; position:absolute; top:38px; left:9%; width:82%; height:2px; background:linear-gradient(90deg, transparent, var(--v3-border) 15%, var(--v3-border) 85%, transparent); z-index:0; }
.v3-process-step{ position:relative; z-index:1; text-align:center; }
.v3-process-step__num{ width:78px; height:78px; margin:0 auto 18px; border-radius:50%; background:#fff; border:1px solid var(--v3-border); display:flex; align-items:center; justify-content:center; font:800 22px/1 var(--v3-font); background-image:linear-gradient(135deg,var(--v3-primary),var(--v3-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; box-shadow:var(--v3-shadow); transition:transform .35s var(--v3-ease); }
.v3-process-step:hover .v3-process-step__num{ transform:translateY(-6px) scale(1.06); }
.v3-process-step h3{ font:700 15.5px/1.3 var(--v3-font); color:var(--v3-ink); margin:0 0 8px; }
.v3-process-step p{ font:400 13px/1.55 var(--v3-font); color:var(--v3-ink-soft); margin:0; }

/* ---------- Why us (light, glass cards with soft warm section bg) ---------- */
.v3-why .v3-eyebrow{ background:var(--v3-tint-soft); color:var(--v3-primary); border-color:var(--v3-tint-soft-2); }
.v3-why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.v3-why-card{ border-radius:var(--v3-radius); padding:30px 26px; transition:all .35s var(--v3-ease); }
.v3-why-card:hover{ transform:translateY(-5px); box-shadow:var(--v3-shadow-lg); }
.v3-why-card__icon{ width:52px; height:52px; border-radius:13px; background:var(--v3-tint-soft); color:var(--v3-primary); display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:18px; }
.v3-why-card h3{ font:700 16.5px/1.3 var(--v3-font); color:var(--v3-ink); margin:0 0 9px; }
.v3-why-card p{ font:400 13.5px/1.6 var(--v3-font); color:var(--v3-ink-soft); margin:0; }

/* ---------- Category cards with product image (image-led variant of v3-why-card) ---------- */
.v3-cat-card{ border-radius:var(--v3-radius); overflow:hidden; background:#fff; border:1px solid var(--v3-border); transition:all .35s var(--v3-ease); display:flex; flex-direction:column; }
.v3-cat-card:hover{ transform:translateY(-5px); box-shadow:var(--v3-shadow-lg); }
.v3-cat-card__img{ aspect-ratio:4/3; width:100%; background:var(--v3-tint-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.v3-cat-card__img img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.v3-cat-card__body{ padding:22px 22px 26px; flex:1; }
.v3-cat-card h3{ font:700 16.5px/1.3 var(--v3-font); color:var(--v3-ink); margin:0 0 9px; }
.v3-cat-card p{ font:400 13.5px/1.6 var(--v3-font); color:var(--v3-ink-soft); margin:0; }
/* dedicated grid for category cards — 4 columns so an 8-card set fills evenly with no dangling gap */
.v3-cat__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

/* ---------- Business-size segments (light cards, colored top accent) ---------- */
.v3-segments{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.v3-seg-col{ padding:38px 30px; text-align:center; color:var(--v3-ink); background:#fff; border:1px solid var(--v3-border); border-radius:var(--v3-radius); border-top:4px solid var(--v3-primary); transition:transform .35s var(--v3-ease), box-shadow .35s var(--v3-ease); }
.v3-seg-col *{ color:var(--v3-ink); }
.v3-seg-col:hover{ transform:translateY(-6px); box-shadow:var(--v3-shadow-lg); }
.v3-seg-col--a{ border-top-color:var(--v3-primary); }
.v3-seg-col--b{ border-top-color:var(--v3-accent); }
.v3-seg-col--c{ border-top-color:var(--v3-primary-dark); }
.v3-seg-col h3{ font:800 18px/1.3 var(--v3-font); margin:0 0 12px; color:var(--v3-ink); }
.v3-seg-col p{ font:400 13.5px/1.6 var(--v3-font); color:var(--v3-ink-soft); margin:0; }

/* ---------- Projects + testimonials ---------- */
.v3-pt__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:38px; }
.v3-proj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.v3-proj-card{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--v3-border); border-radius:var(--v3-radius-sm); padding:18px; transition:transform .3s var(--v3-ease), box-shadow .3s var(--v3-ease); }
.v3-proj-card:hover{ transform:translateY(-4px); box-shadow:var(--v3-shadow); }
.v3-proj-card i{ font-size:18px; color:#fff; background:linear-gradient(135deg,var(--v3-primary),var(--v3-accent)); width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.v3-proj-card p{ font:600 13px/1.5 var(--v3-font); color:var(--v3-ink); margin:0; }

.v3-test{ border-radius:var(--v3-radius); padding:36px; position:relative; display:flex; flex-direction:column; min-height:270px; background:#fff; border:1px solid var(--v3-border); box-shadow:var(--v3-shadow); color:var(--v3-ink); }
.v3-test__quote{ font-size:30px; opacity:.4; margin-bottom:8px; color:var(--v3-primary); }
.v3-test__slide{ display:none; flex:1; }
.v3-test__slide.v3-active{ display:flex; flex-direction:column; justify-content:center; animation:v3FadeIn .6s ease; }
.v3-test__slide p{ font:500 15.5px/1.7 var(--v3-font); margin:0 0 14px; color:var(--v3-ink); }
.v3-test__slide b{ font:700 13.5px/1.3 var(--v3-font); color:var(--v3-primary); }
.v3-test__dots{ display:flex; gap:8px; margin-top:18px; }
.v3-test__dot{ width:9px; height:9px; border-radius:50%; background:var(--v3-border); cursor:pointer; border:none; padding:0; transition:all .25s; }
.v3-test__dot[aria-selected="true"]{ background:var(--v3-primary); transform:scale(1.3); }

/* ---------- SEO copy blocks (light) ---------- */
.v3-copy{ max-width:1180px; margin:0 auto; }
.v3-copy p{ color:var(--v3-ink-soft); }

/* ---------- FAQ + contact ---------- */
.v3-faq{ max-width:820px; margin:0 auto; }
.v3-faq-item{ background:#fff; border:1px solid var(--v3-border); border-radius:var(--v3-radius-sm); margin-bottom:12px; overflow:hidden; transition:box-shadow .3s var(--v3-ease); }
.v3-faq-item.v3-open{ box-shadow:var(--v3-shadow); }
.v3-faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:19px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font:700 15px/1.4 var(--v3-font); color:var(--v3-ink); }
.v3-faq-q:focus-visible{ outline:3px solid var(--v3-accent-2); outline-offset:-3px; }
.v3-faq-q i{ transition:transform .3s var(--v3-ease); color:var(--v3-primary); flex:0 0 auto; }
.v3-faq-item.v3-open .v3-faq-q i{ transform:rotate(180deg); }
.v3-faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--v3-ease); }
.v3-faq-item.v3-open .v3-faq-a{ max-height:340px; }
.v3-faq-a p{ margin:0; padding:0 22px 20px; font:400 14px/1.65 var(--v3-font); color:var(--v3-ink-soft); }

.v3-contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--v3-radius); overflow:hidden; box-shadow:var(--v3-shadow-lg); border:1px solid var(--v3-border); }
.v3-contact__info{ background:var(--v3-bg-soft); color:var(--v3-ink); padding:46px 42px; border-right:1px solid var(--v3-border); }
.v3-contact__info h3{ font:800 22px/1.3 var(--v3-font); margin:0 0 12px; color:var(--v3-ink); }
.v3-contact__info p{ font:400 14px/1.65 var(--v3-font); color:var(--v3-ink-soft); margin:0 0 26px; }
.v3-contact__row{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.v3-contact__row i{ width:40px; height:40px; border-radius:11px; background:var(--v3-tint-soft); display:flex; align-items:center; justify-content:center; color:var(--v3-primary); flex:0 0 auto; }
.v3-contact__row a, .v3-contact__row span{ color:var(--v3-ink); font:600 14px/1.5 var(--v3-font); text-decoration:none; }
.v3-contact__row a:hover{ color:var(--v3-primary); }
.v3-contact__form{ background:#fff; padding:46px 42px; }
.v3-field{ width:100%; padding:14px 16px; border:1px solid var(--v3-border); border-radius:11px; font:500 14px/1.4 var(--v3-font); margin-bottom:14px; color:var(--v3-ink); transition:border-color .25s, box-shadow .25s; background:#fff; }
.v3-field:focus-visible, .v3-field:focus{ outline:none; border-color:var(--v3-primary); box-shadow:0 0 0 3px rgba(158,70,32,.12); }
textarea.v3-field{ resize:vertical; min-height:96px; }
.v3-form-note{ font:400 12px/1.5 var(--v3-font); color:var(--v3-ink-soft); margin-top:10px; }

/* ---------- Brand marquee ---------- */
.v3-brands{ background:#fff; border-top:1px solid var(--v3-border); border-bottom:1px solid var(--v3-border); padding:48px 0; }
.v3-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.v3-marquee__track{ display:flex; align-items:center; gap:56px; width:max-content; animation:v3Marquee 46s linear infinite; }
.v3-marquee:hover .v3-marquee__track, .v3-marquee:focus-within .v3-marquee__track{ animation-play-state:paused; }
.v3-marquee__track img{ height:34px; width:auto; object-fit:contain; opacity:.6; filter:grayscale(100%); transition:all .3s var(--v3-ease); }
.v3-marquee__track img:hover{ opacity:1; filter:none; transform:scale(1.08); }
@keyframes v3Marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Floating action buttons ---------- */
.v3-fab{ position:fixed; right:22px; bottom:22px; z-index:999; display:flex; flex-direction:column; gap:12px; }
.v3-fab a{ width:57px; height:57px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; box-shadow:0 12px 28px rgba(0,0,0,.2); transition:transform .25s var(--v3-ease); }
.v3-fab a:hover, .v3-fab a:focus-visible{ transform:scale(1.1); color:#fff; }
.v3-fab__wa{ background:linear-gradient(135deg,#25D366,#1ea952); }
.v3-fab__call{ background:linear-gradient(135deg,var(--v3-primary),var(--v3-primary-dark)); }

/* ==========================================================================
   HEADER — restyled for cohesion with the new light design language
   (structure/classes kept so main.js hamburger/category-menu JS still works)
   ========================================================================== */
.header-section{ box-shadow:0 4px 24px rgba(30,20,10,.06) !important; position:relative; z-index:50; }
.header-top{ background:var(--v3-bg-soft) !important; border-bottom:1px solid var(--v3-border) !important; }
.header-top .call-header a, .header-top .header-link a{ color:var(--v3-ink) !important; }
.header-top i.fa{ color:var(--v3-primary) !important; }
.header-middle .menu ul li a{ color:var(--v3-ink) !important; font-weight:700 !important; transition:color .25s; }
.header-middle .menu ul li a:hover{ color:var(--v3-primary) !important; }

/* Contact form AJAX feedback (targeted by js/ajax-mail.js — class name has the
   original typo "messege", kept as-is since the JS selector matches on it) */
.form-messege{ font:600 14px/1.5 var(--v3-font); padding:12px 16px; border-radius:10px; margin-top:14px; display:none; }
.form-messege:not(:empty){ display:block; }
.form-messege.success{ background:#e8f8ee; color:#15803d; border:1px solid #bbf0cf; }
.form-messege.error{ background:#fdecec; color:#b91c1c; border:1px solid #f8c9c9; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .v3-products__grid{ grid-template-columns:repeat(3,1fr); }
  .v3-bento{ grid-template-columns:repeat(3,1fr); }
  .v3-bento-card--lg{ grid-column:span 2; }
}
@media (max-width:991px){
  .v3-section{ padding:64px 0; }
  .v3-hero__grid{ grid-template-columns:1fr; }
  /* order must go on .v3-hero__visual (the actual grid item) — .v3-hero__stage is
     nested inside it, and `order` only affects direct flex/grid children. */
  .v3-hero__visual{ order:-1; max-width:460px; margin:0 auto 56px; }
  .v3-hero__stage{ max-width:none; margin:0; }
  /* Take the badge out of absolute positioning on stacked layouts so it can never
     overlap the text column below it — it becomes a normal card sitting just under
     the image, nudged up slightly to still "hang" off the image corner tastefully. */
  .v3-hero__badge{ position:static; margin:-32px auto 0; left:auto; bottom:auto; width:max-content; max-width:calc(100% - 24px); }
  .v3-trust__row{ grid-template-columns:repeat(2,1fr); }
  .v3-about__grid{ grid-template-columns:1fr; }
  .v3-check{ grid-template-columns:1fr 1fr; }
  .v3-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(200px, auto); }
  .v3-bento-card--lg{ grid-column:span 2; grid-row:span 1; }
  .v3-bento-card--tall{ grid-row:span 1; }
  .v3-industries__grid{ grid-template-columns:repeat(3,1fr); }
  .v3-products__grid{ grid-template-columns:repeat(2,1fr); }
  .v3-process__row{ grid-template-columns:repeat(3,1fr); row-gap:38px; }
  .v3-process__row::before{ display:none; }
  .v3-why__grid{ grid-template-columns:repeat(2,1fr); }
  .v3-cat__grid{ grid-template-columns:repeat(2,1fr); }
  .v3-segments{ grid-template-columns:1fr; }
  .v3-pt__grid{ grid-template-columns:1fr; }
  .v3-contact__grid{ grid-template-columns:1fr; }
  .v3-contact__info{ border-right:none; border-bottom:1px solid var(--v3-border); }
  [data-v3-parallax]{ transform:none !important; }
}
@media (max-width:640px){
  .v3-trust__row{ grid-template-columns:1fr 1fr; padding:26px 0; }
  .v3-bento{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .v3-bento-card--lg, .v3-bento-card--tall{ grid-column:span 1; grid-row:span 1; }
  .v3-industries__grid{ grid-template-columns:repeat(2,1fr); }
  .v3-products__grid{ grid-template-columns:1fr 1fr; }
  .v3-process__row{ grid-template-columns:1fr 1fr; }
  .v3-why__grid{ grid-template-columns:1fr; }
  .v3-cat__grid{ grid-template-columns:1fr; }
  .v3-proj-grid{ grid-template-columns:1fr; }
  .v3-check{ grid-template-columns:1fr; }
  .v3-hero__actions{ flex-direction:column; align-items:stretch; }
  .v3-banner__body{ padding:28px; }
  .v3-fab a{ width:50px; height:50px; font-size:21px; }
}