/* =================================================================
   ZENITHWEB — HUMAN TOUCH LAYER
   Organic imperfections, hand-drawn accents, signature, polaroid feel
   Loaded AFTER style.css to extend the enterprise theme.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Kalam:wght@300;400;700&display=swap');

:root{
  --hand: 'Caveat', 'Kalam', cursive;
}

/* -------------------------------------
   Hand-drawn squiggle underline under hero highlight
   ------------------------------------- */
.hero-title .gold-text{position:relative;display:inline-block}
.hero-title .gold-text::after{
  content:'';
  position:absolute;
  left:-2%;right:-2%;
  bottom:-14px;
  height:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' preserveAspectRatio='none'><path d='M2 12 C 60 2, 120 22, 200 12 S 340 2, 420 14 S 540 6, 598 12' fill='none' stroke='%23FFB84D' stroke-width='3' stroke-linecap='round' opacity='0.85'/></svg>");
  background-repeat:no-repeat;background-size:100% 100%;
  pointer-events:none;
  opacity:0;animation:fadeUp .9s 1.2s forwards;
}

/* Subtle paper grain overlay for depth (very gentle, behind content) */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0.55  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.18;
}

/* -------------------------------------
   Handwritten "tag" — a gold sticky note feel above section labels
   ------------------------------------- */
.hand-tag{
  display:block;
  font-family:var(--hand);
  font-size:1.4rem;
  color:var(--gold-light);
  transform:rotate(-2deg);
  margin:0 auto 14px;
  letter-spacing:.01em;
  line-height:1;
  text-align:center;
}
.text-center .hand-tag{text-align:center}
.hand-tag::before{content:'— '}
.hand-tag::after{content:' —'}

/* Gentle hand-drawn arrow accent */
.hand-arrow{
  display:inline-block;
  width:64px;height:36px;vertical-align:middle;margin:0 8px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36' fill='none'><path d='M2 18 C 14 6, 36 30, 52 14' stroke='%23FFB84D' stroke-width='2' stroke-linecap='round' fill='none'/><path d='M44 8 L 54 13 L 49 22' stroke='%23FFB84D' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
  background-repeat:no-repeat;background-size:contain;background-position:center;
}

/* -------------------------------------
   Polaroid-style testimonial subtle rotation (imperfection)
   ------------------------------------- */
.testimonial{transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}
.testimonial:nth-child(3n+1){transform:rotate(-.6deg)}
.testimonial:nth-child(3n+2){transform:rotate(.4deg)}
.testimonial:nth-child(3n+3){transform:rotate(-.2deg)}
.testimonial:hover{transform:rotate(0) translateY(-4px)}

/* small handwritten "signed" mark inside each testimonial */
.testimonial-author::after{
  content:'~';
  font-family:var(--hand);
  color:var(--gold);
  font-size:1.6rem;
  line-height:0;
  margin-left:auto;
  opacity:.7;
}

/* -------------------------------------
   Founder's Note (handwritten signature card)
   ------------------------------------- */
#founder-note{position:relative;padding:120px 5vw}
#founder-note .note-card{
  max-width:780px;margin:0 auto;
  position:relative;
  background:linear-gradient(180deg,#0e0d0a 0%,#0a0907 100%);
  border:1px solid var(--gold-border);
  border-radius:14px;
  padding:56px 56px 48px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,184,77,.08);
  transform:rotate(-.4deg);
}
#founder-note .note-card::before{
  content:'';position:absolute;inset:-1px;border-radius:14px;
  background:linear-gradient(135deg,transparent 30%,rgba(255,184,77,.25) 50%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;pointer-events:none;
}
#founder-note .pin{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFD970,#C8860A 70%);
  box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.4);
}
#founder-note .note-eyebrow{
  font-family:var(--hand);font-size:1.4rem;color:var(--gold);
  letter-spacing:.02em;margin-bottom:8px;display:block;transform:rotate(-1deg);
}
#founder-note .note-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.7rem,2.6vw,2.2rem);
  font-weight:600;line-height:1.2;
  margin-bottom:22px;color:var(--cream);
}
#founder-note .note-body p{
  color:var(--text-dim);font-size:1rem;line-height:1.85;margin-bottom:14px;font-weight:300;
}
#founder-note .note-body p strong{color:var(--cream);font-weight:500}
#founder-note .signature{
  margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
#founder-note .sig-svg{flex-shrink:0;height:54px;width:auto;filter:drop-shadow(0 0 10px rgba(255,184,77,.25))}
#founder-note .sig-meta{display:flex;flex-direction:column}
#founder-note .sig-name{font-family:var(--hand);font-size:1.6rem;color:var(--gold-light);line-height:1;letter-spacing:.01em}
#founder-note .sig-role{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-top:6px}

/* -------------------------------------
   Capability strip — 3 chips with hand-drawn check
   ------------------------------------- */
.cap-chips{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.cap-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:100px;
  border:1px dashed rgba(255,184,77,.3);
  background:rgba(255,184,77,.03);
  font-size:.82rem;color:var(--text-dim);letter-spacing:.04em;
  transition:border-color var(--transition),color var(--transition),transform var(--transition);
}
.cap-chip:hover{border-color:var(--gold);color:var(--gold-light);transform:translateY(-2px)}
.cap-chip .check{
  width:18px;height:18px;flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M3 13 C 6 12, 8 16, 10 18 C 13 12, 17 7, 22 4' stroke='%23FFB84D' stroke-width='2.4' stroke-linecap='round' fill='none'/></svg>");
  background-repeat:no-repeat;background-size:contain;
}

/* -------------------------------------
   Process timeline — gentle dashed connector + hand-numbered circles
   ------------------------------------- */
@media (min-width:961px){
  #process .feature-grid{position:relative}
  #process .feature-grid::before{
    content:'';position:absolute;left:5%;right:5%;top:34px;height:1px;
    background-image:linear-gradient(90deg,var(--gold-dark) 0 8px,transparent 8px 16px);
    background-size:16px 1px;opacity:.45;z-index:0;
  }
}
#process .feature{position:relative;background:linear-gradient(180deg,#0f0f0c,#0a0a08);}
#process .feature .gold-text{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  border:1px solid var(--gold-border-strong);
  background:radial-gradient(circle at 30% 30%,rgba(255,184,77,.18),transparent 70%),#0a0a08;
  font-size:1.3rem !important;
  position:relative;z-index:1;
}

/* -------------------------------------
   Service cards — slight asymmetry (organic)
   ------------------------------------- */
#services .feature:nth-child(2),
.service-detail-grid .sd-card:nth-child(2){transform:translateY(-8px)}
#services .feature:nth-child(5),
.service-detail-grid .sd-card:nth-child(5){transform:translateY(8px)}
@media (max-width:960px){
  #services .feature:nth-child(2),#services .feature:nth-child(5),
  .service-detail-grid .sd-card:nth-child(2),.service-detail-grid .sd-card:nth-child(5){transform:none}
}

/* -------------------------------------
   Crafted in India badge
   ------------------------------------- */
.crafted-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:100px;
  background:rgba(255,184,77,.06);border:1px solid var(--gold-border);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);font-weight:600;
}
.crafted-badge .heart{
  display:inline-block;width:12px;height:12px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB84D'><path d='M12 21s-7-4.5-9.5-9C.7 8.4 3 4 6.5 4c2 0 3.5 1.2 4.5 2.5C12 5.2 13.5 4 15.5 4 19 4 21.3 8.4 19.5 12c-2.5 4.5-7.5 9-7.5 9z'/></svg>");
  background-repeat:no-repeat;background-size:contain;
  animation:heartPulse 1.6s ease-in-out infinite;
}
@keyframes heartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* -------------------------------------
   Trust strip ticker — give it variable speed pause on hover
   ------------------------------------- */
.trust-strip:hover .ticker{animation-play-state:paused}

/* -------------------------------------
   Improve focus states (a11y)
   ------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;
}

/* -------------------------------------
   Refine ornament with a tiny dotted halo
   ------------------------------------- */
.ornament-diamond{position:relative}
.ornament-diamond::after{
  content:'';position:absolute;inset:-10px;
  border:1px dotted rgba(255,184,77,.35);border-radius:50%;
  transform:rotate(-45deg);
}

/* -------------------------------------
   Footer — tiny handwritten thank-you
   ------------------------------------- */
.footer-cta::after{
  content:'thanks for scrolling all the way down ✦';
  display:block;margin-top:18px;
  font-family:var(--hand);font-size:1.15rem;color:var(--gold-dark);
  transform:rotate(-1deg);opacity:.9;
}

/* -------------------------------------
   Mobile polish
   ------------------------------------- */
@media (max-width:768px){
  #founder-note{padding:80px 5vw}
  #founder-note .note-card{padding:36px 26px 28px}
  .testimonial:nth-child(n){transform:none}
  .hero-title .gold-text::after{bottom:-10px;height:10px}
}
@media (max-width:420px){
  .hand-tag{font-size:1.2rem}
  .nav-brand-name{font-size:1.25rem}
}

/* -------------------------------------
   Reduced motion respect
   ------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .ticker{animation:none}
}

/* -------------------------------------
   "Get a Quote" CTA button — premium polish
   ------------------------------------- */
.nav-cta{
  position:relative;overflow:hidden;
  display:inline-flex !important;align-items:center;gap:10px;
  padding:11px 24px 11px 26px !important;
  background:linear-gradient(135deg,#C8860A 0%,#FFB84D 45%,#FFD970 100%) !important;
  color:#1a0f00 !important;
  font-family:'Jost',sans-serif !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  border:1px solid rgba(255,217,112,.5) !important;
  border-radius:100px !important;
  box-shadow:
    0 6px 22px rgba(255,184,77,.32),
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -1px 0 rgba(120,70,0,.25) inset !important;
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),filter .25s !important;
  z-index:1;
}
.nav-cta::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s ease;
  pointer-events:none;
}
.nav-cta::after{display:none !important}
.nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:
    0 12px 32px rgba(255,184,77,.55),
    0 0 0 3px rgba(255,184,77,.18),
    0 1px 0 rgba(255,255,255,.5) inset !important;
  filter:saturate(1.08) brightness(1.04);
  color:#1a0f00 !important;
}
.nav-cta:hover::before{transform:translateX(120%)}
.nav-cta:active{transform:translateY(0);transition-duration:.05s !important}

/* Tiny arrow appended via pseudo */
.nav-cta > span.arrow,
.nav-cta::part(arrow){display:none}

/* JS-free arrow using background image */
.nav-cta-arrow{
  display:inline-block;width:14px;height:10px;flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none'><path d='M1 5 H 12 M 8 1 L 12 5 L 8 9' stroke='%231a0f00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-size:contain;background-position:center;
  transition:transform .25s ease;
}
.nav-cta:hover .nav-cta-arrow{transform:translateX(4px)}

/* Mobile menu CTA — same pill look */
.mob-cta{
  background:linear-gradient(135deg,#C8860A 0%,#FFB84D 45%,#FFD970 100%) !important;
  color:#1a0f00 !important;
  border-radius:100px !important;
  padding:14px 28px !important;
  box-shadow:0 8px 24px rgba(255,184,77,.35) !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  display:inline-flex !important;align-items:center;gap:10px;
}