/* =====================================================================
   Pines Property — PRO design layer (loads after style.css)
   Aurora mesh · film grain · gradient hairlines · glass depth · motion
   Safe to delete: the site falls back to style.css.
   ===================================================================== */
:root {
  --pro-violet: #8b5cf6;
  --pro-cyan: #22d3ee;
  --pro-rose: #fb7185;
  --pro-amber: #fbbf24;
  --hair: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.05) 38%, rgba(139,92,246,.30) 70%, rgba(251,191,36,.34));
  --glass: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.025) 60%);
  --pro-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 30px 60px -30px rgba(0,0,0,.75), 0 12px 28px -18px rgba(59,130,246,.35);
  --pro-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 1. Atmosphere: aurora mesh + grain ---------- */
body { background: #050816; }
body::after {
  background:
    radial-gradient(900px 600px at 8% 4%, rgba(99,102,241,.34), transparent 60%),
    radial-gradient(800px 560px at 96% 18%, rgba(56,189,248,.16), transparent 62%),
    radial-gradient(900px 700px at 70% 62%, rgba(139,92,246,.18), transparent 62%),
    radial-gradient(800px 600px at 4% 88%, rgba(251,191,36,.10), transparent 60%),
    #050816 !important;
  animation: proAurora 28s ease-in-out infinite alternate;
  background-size: 140% 140%, 140% 140%, 140% 140%, 140% 140%, auto;
}
@keyframes proAurora {
  0%   { background-position: 0% 0%, 100% 0%, 60% 60%, 0% 100%, 0 0; }
  100% { background-position: 18% 12%, 82% 14%, 40% 76%, 14% 84%, 0 0; }
}
html::after {  /* film grain */
  content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  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='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #050816; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4f46e5, #2563eb); border-radius: 20px; border: 3px solid #050816; }
:focus-visible { outline: 2px solid var(--pro-cyan); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(34,211,238,.18); }

/* ---------- 2. Typography ---------- */
h1, h2, h3 { letter-spacing: -.022em; text-wrap: balance; }
p { text-wrap: pretty; }
.section-head h2, .page-hero h1, .cta-box h2 { letter-spacing: -.035em; }
.grad-text {
  background-image: linear-gradient(100deg, #7dd3fc 0%, #a78bfa 38%, #f9a8d4 68%, #fcd34d 100%) !important;
  background-size: 220% auto; animation: proShine 9s linear infinite;
}
@keyframes proShine { to { background-position: 220% center; } }
.section-head h2 .grad-text { position: relative; white-space: nowrap; }
.section-head h2 .grad-text::after {  /* hand-drawn underline stroke */
  content: ''; position: absolute; left: 2%; right: 2%; bottom: -.18em; height: .32em; opacity: .85;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 2, 70 12, 110 6 S 170 2, 198 7' fill='none' stroke='url(%23g)' stroke-width='3.2' stroke-linecap='round'/><defs><linearGradient id='g'><stop offset='0' stop-color='%2360a5fa'/><stop offset='.5' stop-color='%23a78bfa'/><stop offset='1' stop-color='%23fbbf24'/></linearGradient></defs></svg>") center/100% 100% no-repeat;
}
.eyebrow {
  background: linear-gradient(120deg, rgba(99,102,241,.22), rgba(34,211,238,.10)) !important;
  border: 1px solid transparent !important;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px rgba(167,139,250,.35), 0 8px 30px -10px rgba(99,102,241,.7), inset 0 1px 0 rgba(255,255,255,.18);
  letter-spacing: .16em; backdrop-filter: blur(8px);
}

/* ---------- 3. Header ---------- */
.header { background: linear-gradient(180deg, rgba(6,8,24,.92), rgba(6,8,24,.72)) !important; backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(255,255,255,.07); }
.nav-links { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px -14px rgba(0,0,0,.7); }
.nav-links a.active, .nav-links a[aria-current="page"] { background: linear-gradient(120deg, #4f46e5, #2563eb 60%, #0ea5e9) !important; box-shadow: 0 8px 22px -8px rgba(37,99,235,.9), inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- 4. Buttons ---------- */
.btn { border-radius: 999px; letter-spacing: .01em; transition: transform .35s var(--pro-ease), box-shadow .35s var(--pro-ease), background .35s, border-color .35s; }
.btn-primary {
  background: linear-gradient(115deg, #6366f1 0%, #2563eb 48%, #0ea5e9 100%) !important; background-size: 220% 220% !important;
  box-shadow: 0 14px 34px -12px rgba(37,99,235,.95), 0 0 0 1px rgba(255,255,255,.12) inset, 0 1px 0 rgba(255,255,255,.45) inset !important;
}
.btn-primary:hover { box-shadow: 0 22px 46px -12px rgba(56,130,246,1), 0 0 0 1px rgba(255,255,255,.2) inset, 0 1px 0 rgba(255,255,255,.55) inset !important; }
.btn-outline { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important; backdrop-filter: blur(10px); border-color: rgba(255,255,255,.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.btn-gold { background: linear-gradient(115deg, #f59e0b, #fcd34d 50%, #f59e0b) !important; background-size: 200% 100% !important; box-shadow: 0 14px 34px -12px rgba(245,158,11,.85), inset 0 1px 0 rgba(255,255,255,.65) !important; animation: proShine 6s linear infinite; }

/* ---------- 5. HERO ---------- */
.hero-slider .slide-overlay {
  background:
    linear-gradient(90deg, rgba(6,8,24,.94) 0%, rgba(6,8,24,.78) 34%, rgba(6,8,24,.28) 66%, rgba(6,8,24,.55) 100%),
    linear-gradient(180deg, rgba(6,8,24,.55) 0%, transparent 28%, transparent 60%, rgba(6,8,24,.96) 100%),
    radial-gradient(900px 520px at 12% 40%, rgba(79,70,229,.30), transparent 65%) !important;
}
.slide-title { text-shadow: 0 6px 40px rgba(0,0,0,.55); font-weight: 700; letter-spacing: -.04em; }
.slide-desc { text-shadow: 0 2px 18px rgba(0,0,0,.7); color: #e2e8ff !important; }
.slide-eyebrow {
  display: inline-flex; padding: 8px 18px; border-radius: 999px; color: #fde68a !important;
  background: rgba(255,255,255,.07); box-shadow: 0 0 0 1px rgba(253,230,138,.28), 0 10px 30px -12px rgba(251,191,36,.6); backdrop-filter: blur(10px);
}
.slider-btn { backdrop-filter: blur(14px); background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.04)) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.3); }
.slider-btn:hover { background: linear-gradient(120deg, #4f46e5, #2563eb) !important; }
.slider-dots button.active { background: linear-gradient(90deg, #fbbf24, #fb7185) !important; box-shadow: 0 0 16px rgba(251,191,36,.8); }
.slider-counter { backdrop-filter: blur(14px); background: rgba(6,8,24,.55) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 14px 34px -14px #000; }

/* hero glass stage */
.hero-3d-card {
  background: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 55%, rgba(99,102,241,.16)) !important;
  border: 1px solid rgba(255,255,255,.22) !important; backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.85), 0 0 80px -20px rgba(99,102,241,.55), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.hero-3d-badge {
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.26) !important; backdrop-filter: blur(18px);
  box-shadow: 0 20px 44px -16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.hero-3d-badge .ic { background: linear-gradient(135deg, #6366f1, #0ea5e9) !important; color: #fff !important; box-shadow: 0 8px 20px -6px rgba(14,165,233,.8); }
.hero-3d-badge .ic.gold { background: linear-gradient(135deg, #f59e0b, #fb7185) !important; }
.hero-3d-badge .ic.green { background: linear-gradient(135deg, #10b981, #22d3ee) !important; }

/* ---------- 6. Stats band ---------- */
.stats-wrap {
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
  backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: var(--pro-shadow), 0 0 90px -30px rgba(99,102,241,.6) !important;
}
.stat .big { background-image: linear-gradient(180deg, #fff 0%, #a5b4fc 55%, #67e8f9 100%) !important; filter: drop-shadow(0 6px 22px rgba(99,102,241,.55)); }
.stat { border-right-color: rgba(255,255,255,.09) !important; }

/* ---------- 7. Marquee ---------- */
.marquee-section { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-chip { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.marquee-chip i { color: #fcd34d !important; filter: drop-shadow(0 0 8px rgba(252,211,77,.7)); }

/* ---------- 8. Sections rhythm: curved glow dividers ---------- */
.section { position: relative; }
.section-alt { background: linear-gradient(180deg, transparent 0, rgba(99,102,241,.07) 14%, rgba(34,211,238,.04) 86%, transparent 100%) !important; }
.section-alt::before, .section-alt::after {
  content: ''; position: absolute; left: 8%; right: 8%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.55), rgba(34,211,238,.45), transparent);
}
.section-alt::before { top: 0; } .section-alt::after { bottom: 0; }

/* ---------- 9. Cards: glass + gradient hairline + depth ---------- */
.bento-card, .why-card, .am-card, .step-card, .corridor-card, .info-card, .calc-card, .plot-panel, .faq-item, .legal-card,
.contact-form, .lm-main, .lm-panel, .career-form-wrap {
  background: var(--glass), rgba(10,14,38,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: var(--pro-shadow) !important;
  border-radius: 26px !important;
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  transition: transform .5s var(--pro-ease), box-shadow .5s var(--pro-ease), border-color .5s;
}
.bento-card:hover, .why-card:hover, .am-card:hover, .step-card:hover, .corridor-card:hover, .info-card:hover {
  transform: translateY(-8px) !important; border-color: rgba(167,139,250,.55) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 40px 70px -30px rgba(0,0,0,.85), 0 24px 70px -26px rgba(99,102,241,.75) !important;
}
.bento-card.feature { background: linear-gradient(150deg, rgba(99,102,241,.38), rgba(37,99,235,.14) 55%, rgba(251,191,36,.14)), rgba(10,14,38,.6) !important; }
.service-icon, .am-icon {
  background: linear-gradient(145deg, rgba(99,102,241,.38), rgba(14,165,233,.18)) !important; color: #e0e7ff !important;
  border: 1px solid rgba(255,255,255,.22) !important; box-shadow: 0 14px 30px -10px rgba(99,102,241,.8), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.why-num, .bento-card::after { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.step-num { background: linear-gradient(135deg, #6366f1, #0ea5e9) !important; box-shadow: 0 0 0 6px rgba(99,102,241,.16), 0 12px 30px -6px rgba(14,165,233,.8) !important; }
.card-link { color: #fcd34d !important; font-weight: 600; }
.card-link i { transition: transform .3s var(--pro-ease); } .card-link:hover i { transform: translateX(6px); }

/* ---------- 10. Map + plot tools ---------- */
.lm-main, .lm-panel { border-radius: 30px !important; }
.lm-stage { border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px #000; }
.lm-chip { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)) !important; }
.plot-tab { border-radius: 20px !important; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important; }
.plot-tab.active { box-shadow: 0 18px 40px -14px var(--c), inset 0 1px 0 rgba(255,255,255,.25) !important; }
.calc-fin-box.highlight, .calc-unit-box { backdrop-filter: blur(8px); }
input[type=range] { accent-color: #8b5cf6; }

/* ---------- 11. Tables ---------- */
.spec-table, table.spec { border-collapse: separate; border-spacing: 0; }
.spec-table tbody tr:nth-child(even) td, table.spec tbody tr:nth-child(even) td { background: rgba(255,255,255,.022); }
.spec-table tbody tr:hover td, table.spec tbody tr:hover td { background: rgba(99,102,241,.14); }

/* ---------- 12. Forms ---------- */
.form-group input, .form-group select, .form-group textarea, .career-form-wrap input, .career-form-wrap select, .career-form-wrap textarea {
  background: rgba(6,8,24,.55) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 14px !important;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .career-form-wrap input:focus, .career-form-wrap select:focus, .career-form-wrap textarea:focus {
  border-color: #a78bfa !important; box-shadow: 0 0 0 4px rgba(139,92,246,.22), 0 12px 30px -14px rgba(139,92,246,.7) !important; outline: none;
}
.quick-chip { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 999px !important; transition: transform .3s var(--pro-ease), border-color .3s, box-shadow .3s; }
.quick-chip:hover, .quick-chip.active { transform: translateY(-3px); border-color: #fcd34d !important; box-shadow: 0 14px 30px -14px rgba(252,211,77,.7); }

/* ---------- 13. CTA + page heroes ---------- */
.cta-box {
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(34,211,238,.28), transparent 65%),
    radial-gradient(700px 360px at 90% 100%, rgba(251,191,36,.22), transparent 65%),
    linear-gradient(135deg, #3730a3 0%, #1d4ed8 52%, #0e7490 100%) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 60px 120px -40px rgba(37,99,235,.85), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.page-hero::before { background: radial-gradient(800px 420px at 50% 0%, rgba(99,102,241,.5), transparent 65%), radial-gradient(500px 300px at 90% 30%, rgba(34,211,238,.22), transparent 70%) !important; }
.career-page-hero .career-hero-bg::after { background: linear-gradient(180deg, rgba(6,8,24,.72) 0%, rgba(6,8,24,.62) 45%, #060818 100%), radial-gradient(700px 360px at 50% 20%, rgba(99,102,241,.35), transparent 70%) !important; }
.career-page-hero h1, .career-page-hero p { text-shadow: 0 4px 30px rgba(0,0,0,.7); }

/* photo cards: readable captions */
.am-life-card { border-radius: 24px !important; box-shadow: 0 30px 60px -28px #000, inset 0 0 0 1px rgba(255,255,255,.14); }
.am-life-overlay { background: linear-gradient(180deg, transparent 0%, rgba(6,8,24,.55) 45%, rgba(6,8,24,.94) 100%) !important; }
.am-life-overlay span, .am-life-overlay p { text-shadow: 0 2px 14px rgba(0,0,0,.85); }

/* ---------- 14. Footer ---------- */
.footer { background: linear-gradient(180deg, transparent, rgba(8,11,32,.98) 22%), radial-gradient(900px 300px at 50% 0%, rgba(99,102,241,.22), transparent 70%) !important; }
.footer::before { background: linear-gradient(90deg, transparent, #a78bfa, #22d3ee, #fbbf24, transparent) !important; height: 2px !important; opacity: .8; }
.socials a { background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) !important; border: 1px solid rgba(255,255,255,.16) !important; transition: transform .3s var(--pro-ease), background .3s; }
.socials a:hover { transform: translateY(-4px) scale(1.08); background: linear-gradient(135deg, #6366f1, #0ea5e9) !important; }

/* ---------- 15. Floating widgets ---------- */
.pp-chat-launcher { background: linear-gradient(135deg, #6366f1, #0ea5e9) !important; box-shadow: 0 18px 40px -10px rgba(14,165,233,.85), 0 0 0 6px rgba(99,102,241,.18) !important; }
.pp-chat-panel { backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255,255,255,.16) !important; box-shadow: 0 50px 100px -30px #000 !important; }
.back-top { background: linear-gradient(135deg, #6366f1, #0ea5e9) !important; }

/* ---------- 16. Scroll progress bar ---------- */
.scroll-progress { background: linear-gradient(90deg, #22d3ee, #8b5cf6, #fbbf24) !important; height: 3px !important; box-shadow: 0 0 14px rgba(139,92,246,.9); }

/* ---------- 17. Reveal motion upgrade ---------- */
.js [data-reveal] { transition: opacity .9s var(--pro-ease), transform .9s var(--pro-ease), filter .9s var(--pro-ease); }
.js [data-reveal]:not(.in) { filter: blur(6px); }

/* ---------- 18. Mobile ---------- */
@media (max-width: 760px) {
  .section-head h2 .grad-text { white-space: normal; }
  .bento-card, .why-card, .am-card, .step-card, .corridor-card, .info-card, .calc-card, .plot-panel, .contact-form, .lm-main, .lm-panel { border-radius: 22px !important; }
  html::after { opacity: .04; }
  .slide-title { letter-spacing: -.03em; }
  .slider-counter { display: none !important; }
  .slide-eyebrow { font-size: .66rem; padding: 7px 14px; letter-spacing: .1em; }
  .hero-slider .slide-overlay { background: linear-gradient(180deg, rgba(6,8,24,.7) 0%, rgba(6,8,24,.55) 40%, rgba(6,8,24,.95) 100%) !important; }
}
@media (prefers-reduced-motion: reduce) {
  body::after, .grad-text, .btn-gold { animation: none !important; }
  .js [data-reveal]:not(.in) { filter: none; }
}
@media print { html::after, body::after { display: none !important; } }