/* ============================================================
   Felnath Web — site.css : one premium system for every page
   (loaded after style.css, premium.css)
   ============================================================ */

/* Cross-page fade (Chrome/Edge/Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(0,0,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }
::selection { background: rgba(79,124,255,.4); color: #fff; }

/* ---------- Header: glass, solid after scroll, hides on scroll-down ---------- */
.header { transition: transform .45s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s, padding .3s; }
.header.is-solid { background: rgba(7,11,20,.82) !important; border-bottom-color: rgba(255,255,255,.07); }
.header.is-hidden { transform: translateY(-100%); }
.navbar a { position: relative; }
.navbar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--marigold); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.navbar a:hover::after, .navbar a.active::after { transform: scaleX(1); }
.navbar a.active { color: #fff !important; }

/* ---------- Headline rise ---------- */
h1.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
h1.is-split .wi { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.16,1,.3,1); }
h1.is-split.is-in .wi { transform: none; }

/* ---------- Reveals (uses `translate`, so hover `transform`s still work) ---------- */
.js-motion .rv { opacity: 0; translate: 0 26px; filter: blur(6px); transition: opacity .9s cubic-bezier(.16,1,.3,1), translate 1s cubic-bezier(.16,1,.3,1), filter .9s ease; transition-delay: var(--rv-d, 0s); }
.js-motion .rv.rv-in { opacity: 1; translate: 0 0; filter: none; }
.js-motion .reveal.rv-legacy { transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1) !important; }
.reduce-motion .rv, .reduce-motion .reveal { opacity: 1 !important; translate: none !important; transform: none !important; filter: none !important; }

/* ---------- Buttons ---------- */
.h-btn, .p-btn, .nav-btn { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s, border-color .2s, box-shadow .3s; will-change: transform; }
.p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border-radius: 12px; font: 600 1rem var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.p-btn svg { width: 19px; height: 19px; fill: currentColor; }
.p-btn-brand { background: var(--brand); color: #fff; } .p-btn-brand:hover { background: var(--brand-deep); }
.p-btn-wa { background: var(--wa); color: #fff; } .p-btn-wa:hover { background: #18914a; }
.p-btn-ghost { color: var(--text); border-color: var(--line); } .p-btn-ghost:hover { border-color: var(--muted); }
.primary-btn, .secondary-btn, .live-btn, .contact-btn, .dm-promo-cta, .footer-cta { border-radius: 12px !important; box-shadow: none !important; }

/* ---------- Page hero (inner pages) ---------- */
.p-hero { position: relative; padding: 150px 0 72px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.p-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(155,165,188,.15) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 25%, transparent 75%); }
.p-hero::after { content: ""; position: absolute; z-index: -1; width: 60vw; max-width: 900px; aspect-ratio: 1; right: -15%; top: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(79,124,255,.32), rgba(123,77,255,.14) 45%, transparent 70%); filter: blur(30px); pointer-events: none; }
.p-crumbs { display: flex; gap: 8px; font-size: .88rem; color: var(--muted); margin-bottom: 26px; flex-wrap: wrap; }
.p-crumbs a { color: var(--muted); text-decoration: none; } .p-crumbs a:hover { color: var(--text); }
.p-crumbs span[aria-hidden] { opacity: .5; }
.p-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.03; font-weight: 800; letter-spacing: -.035em; max-width: 15em; }
.p-hero .p-lead { color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.65; margin-top: 24px; max-width: 38em; }
.p-hero .p-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.p-hero-meta { display: flex; gap: 12px 34px; flex-wrap: wrap; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.p-hero-meta b { display: block; color: var(--text); font: 700 1.55rem var(--display); letter-spacing: -.02em; }

/* ---------- Generic content building blocks ---------- */
.p-section { padding: 104px 0; }
.p-section + .p-section { border-top: 1px solid var(--line); }
.p-head { max-width: 660px; margin-bottom: 48px; }
.p-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; font-weight: 700; }
.p-head p { color: var(--muted); font-size: 1.07rem; line-height: 1.7; margin-top: 16px; }
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.p-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .p-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.p-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; transition: border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1); overflow: hidden; }
a.p-card { color: inherit; text-decoration: none; display: block; }
a.p-card:hover, .p-card.hov:hover { border-color: #34416a; transform: translateY(-3px); }
.p-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.p-card p { color: var(--muted); line-height: 1.65; font-size: .98rem; }
.p-card .p-more { display: inline-block; margin-top: 16px; color: var(--brand); font-weight: 600; font-size: .92rem; }
a.p-card:hover .p-more { color: var(--marigold); }
.p-ico { width: 44px; height: 44px; color: var(--brand); margin-bottom: 18px; display: block; }
.p-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.p-split.wide-left { grid-template-columns: 1.15fr .85fr; }
.p-media { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.p-media img { display: block; width: 100%; height: auto; }
.p-prose p { color: var(--muted); line-height: 1.8; font-size: 1.06rem; margin-top: 16px; max-width: 40em; }
.p-prose p:first-child { margin-top: 0; }
.p-prose strong { color: var(--text); }
.p-list { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.p-list li { position: relative; padding-left: 28px; line-height: 1.6; color: var(--text); }
.p-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--marigold); border-bottom: 2px solid var(--marigold); transform: rotate(-45deg); }
.p-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.p-steps li { counter-increment: s; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.p-steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 700 .95rem var(--display); color: var(--marigold); margin-bottom: 14px; }
.p-steps h3 { font-size: 1.15rem; margin-bottom: 8px; } .p-steps p { color: var(--muted); line-height: 1.6; font-size: .95rem; }
.p-tag { display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }
.p-tag.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.p-tag.concept::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marigold); }

/* ---------- Closing CTA band (every page) ---------- */
.p-cta-band { padding: 40px 0 96px; }
.p-cta-inner { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(40px, 6vw, 80px); border: 1px solid #2b3760; background: linear-gradient(135deg, #121c3d 0%, #0d1428 55%, #0b1020 100%); }
.p-cta-inner::before { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -20%; top: -60%; border-radius: 50%; background: radial-gradient(circle, rgba(79,124,255,.45), rgba(123,77,255,.18) 45%, transparent 70%); filter: blur(20px); }
.p-cta-inner::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.p-cta-inner h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; max-width: 13em; }
.p-cta-inner p { color: #b7c0d8; font-size: 1.1rem; line-height: 1.65; margin-top: 18px; max-width: 34em; }
.p-cta-inner .p-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
@media (prefers-reduced-motion: no-preference) { .p-cta-inner::before { animation: x-drift1 16s ease-in-out infinite alternate; } }
@keyframes x-drift1 { to { transform: translate(-12%, 10%) scale(1.15); } }

/* ---------- Footer polish ---------- */
.site-footer { border-top: 1px solid var(--line); background: #060a13; }
.site-footer .footer-links a { transition: color .2s; }
.site-footer .footer-links a:hover { color: var(--marigold) !important; }

/* ============================================================
   Legacy pages (Ahmedabad / USA / digital marketing): bring
   them into the same system without touching their copy.
   ============================================================ */
/* one colour for headings: no gradient-filled words */
h1 span, h2 span, h3 span, .section-title h2, .section-title h2 *, .dm-grad, .dm-gradient-text, .lp-plan-price, .h-num, .wf-num, .wm-num, .result-num, .rating-big, .fq-num, .founder-name-block h3, .pricing-preview-card p strong {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit;
}
.lp-plan-price, .result-num, .h-num, .wf-num, .wm-num { color: var(--text) !important; }
/* section titles: calm eyebrow, display type */
.section-title span:first-child, .lp-label, .dm-label, .section-label { text-transform: none !important; letter-spacing: 0 !important; font-size: .92rem !important; font-weight: 600 !important; color: var(--marigold) !important; background: none !important; border: 0 !important; padding: 0 !important; }
.section-title h2, .lp-title, .lp-hero h1, .dm-hero h1, h2 { font-family: var(--display); letter-spacing: -.025em; }
.lp-hero h1, .dm-hero h1, .page-title { font-weight: 800 !important; line-height: 1.04 !important; }
/* cards */
.lp-why-card, .lp-service-card, .lp-step, .lp-testi-card, .lp-price-card, .lp-faq-item, .service-card, .usa-service-card, .faq-item, .dm-service-card, .stat-card, .price-card, .project-card {
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: none !important;
}
.lp-why-card:hover, .lp-service-card:hover, .service-card:hover, .usa-service-card:hover, .dm-service-card:hover, .project-card:hover { border-color: #34416a !important; }
.lp-price-card.featured, .price-card.featured, .lp-price-card.popular { border-color: var(--brand) !important; background: linear-gradient(180deg, rgba(79,124,255,.10), var(--surface)) !important; }
/* icons inside legacy cards become calm line icons */
.lp-why-icon, .dm-icon, .feature-icon, .lp-icon, .dm-service-icon, .result-icon, .pc-emoji { background: rgba(79,124,255,.10) !important; border: 1px solid rgba(79,124,255,.25) !important; color: var(--brand) !important; border-radius: 12px !important; box-shadow: none !important; }
.ic-svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* hero sections of legacy pages pick up the dot grid + glow */
.lp-hero, .dm-hero { position: relative; isolation: isolate; }
.lp-hero::after, .dm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(155,165,188,.13) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, #000 20%, transparent 75%); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .p-grid.cols-4, .p-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .p-grid, .p-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .p-split, .p-split.wide-left { grid-template-columns: 1fr; gap: 36px; }
  .p-hero { padding: 120px 0 56px; }
}
@media (max-width: 600px) {
  .p-grid, .p-grid.cols-2, .p-grid.cols-4, .p-steps { grid-template-columns: 1fr; }
  .p-section { padding: 72px 0; }
  .p-hero .p-actions .p-btn, .p-cta-inner .p-actions .p-btn { flex: 1 1 100%; }
  .p-cta-band { padding: 24px 0 72px; }
  .p-cta-inner { border-radius: 22px; }
}

/* keep intentional badges inside headings */
h3 .h-price-tag { background: var(--marigold) !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; }

/* page-specific bits */
.p-plan { display: flex; flex-direction: column; }
.p-plan > p:not([class]) { margin-top: 2px; }
.p-plan.is-pick { border-color: var(--brand); background: linear-gradient(180deg, rgba(79,124,255,.12), var(--surface) 55%); }
.p-card .p-plan-amt { font: 800 2.6rem var(--display); letter-spacing: -.03em; color: var(--text) !important; margin: 18px 0 2px; }
.p-card .p-plan-amt small { font: 500 .95rem var(--body); color: var(--muted); letter-spacing: 0; }
.p-card .p-plan-amt.sm { font-size: 1.7rem; margin: 6px 0 10px; }
.p-card .p-plan-days { color: var(--marigold) !important; font-weight: 600; font-size: .92rem !important; }
.p-plan .p-list { flex: 1; }
.p-work { padding: 0; }
.p-work-img { display: block; aspect-ratio: 16/11; overflow: hidden; border-bottom: 1px solid var(--line); }
.p-work-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.p-work:hover .p-work-img img { transform: scale(1.04); }
.p-work .p-tag { margin: 22px 24px 0; }
.p-work h3 { margin: 12px 24px 8px; } .p-work p { margin: 0 24px; } .p-work .p-more { margin: 14px 24px 24px; }
.p-works { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .p-works { grid-template-columns: repeat(3, 1fr); } }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.p-chips span { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 7px 12px; font-size: .88rem; }
.p-next { margin: 12px 0 0 18px; color: var(--muted); line-height: 1.7; display: grid; gap: 6px; }
@media (max-width: 900px) { .p-works { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .p-works { grid-template-columns: 1fr; } }

/* parallax media: slight overscan so moving images never reveal edges */
[data-parallax] { scale: 1.1; transition: scale .8s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.h-case-img:hover img[data-parallax] { scale: 1.13; }
.h-case-img img[data-parallax] { transform: none; }

/* legacy pages: their old closing CTA blocks are replaced by the site-wide closing band */
.lp-cta, .dm-cta { display: none !important; }
/* legacy main padding (old pages pushed content under fixed header) */
main[style*="padding-top"] > .p-hero:first-child { margin-top: -100px; }

/* ---------- Legal pages ---------- */
.p-legal { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; }
.p-toc { position: sticky; top: 100px; display: grid; gap: 4px; font-size: .92rem; }
.p-toc p { color: var(--text); font-weight: 600; margin-bottom: 8px; }
.p-toc a { color: var(--muted); text-decoration: none; padding: 5px 0 5px 12px; border-left: 1px solid var(--line); }
.p-toc a:hover { color: var(--text); border-left-color: var(--marigold); }
.p-doc { max-width: 760px; min-width: 0; }
.p-doc h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 52px 0 14px; scroll-margin-top: 100px; }
.p-doc h2:first-child { margin-top: 0; }
.p-doc p { color: var(--muted); line-height: 1.8; margin-top: 12px; font-size: 1.02rem; }
.p-doc p strong, .p-doc li strong { color: var(--text); }
.p-doc a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.p-doc .p-list li { color: var(--muted); }
.p-doc .p-card { margin-top: 14px; }
.p-doc .p-card p { margin: 0; color: var(--text); }
.p-table { overflow-x: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; }
.p-table table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .94rem; }
.p-table th, .p-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); line-height: 1.55; }
.p-table th { color: var(--text); background: var(--surface-2); font-weight: 600; }
.p-table td { color: var(--muted); }
.p-table tr:last-child td { border-bottom: 0; }
.p-lang p { font-family: "Noto Sans", "Nirmala UI", "Mangal", "Shruti", system-ui, sans-serif; line-height: 1.9; }
.p-request { margin-top: 18px; }
.p-consent { display: flex !important; grid-template-columns: none !important; gap: 10px !important; align-items: flex-start; font-weight: 400 !important; color: var(--muted) !important; font-size: .9rem !important; line-height: 1.55; cursor: pointer; }
.p-consent input { width: 18px !important; height: 18px; flex: none; margin-top: 2px; accent-color: var(--brand); padding: 0 !important; }
.p-consent a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal { display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: .86rem; }
.footer-legal a { color: var(--muted); text-decoration: none; } .footer-legal a:hover { color: var(--marigold); }
@media (max-width: 900px) { .p-legal { grid-template-columns: 1fr; gap: 28px; } .p-toc { position: static; grid-template-columns: 1fr 1fr; } .p-toc p { grid-column: 1 / -1; } }

@media (max-width: 640px) {
  .p-table { overflow: visible; border: 0; }
  .p-table table { min-width: 0; }
  .p-table thead { display: none; }
  .p-table tr { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 6px 0; margin-bottom: 12px; background: var(--surface-2); }
  .p-table td { display: block; border: 0; padding: 8px 16px; }
  .p-table td::before { content: attr(data-label); display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text); font-weight: 600; margin-bottom: 2px; }
}