/* PattaLink premium surface system.
   Homepage-only first release: no media background and no purchase-flow changes. */

@property --pt-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --pt-bg: #151515;
  --pt-surface: rgba(255, 255, 255, 0.02);
  --pt-surface-raised: rgba(255, 255, 255, 0.042);
  --pt-surface-soft: rgba(255, 255, 255, 0.014);
  --pt-border: rgba(255, 255, 255, 0.095);
  --pt-border-highlight: rgba(255, 255, 255, 0.2);
  --pt-text: #f7f5f3;
  --pt-muted: #aaa39f;
  --pt-muted-dim: #817a76;
  --pt-orange: #ff6b35;
  --pt-orange-soft: #ff9a68;
  --pt-orange-glow: rgba(255, 107, 53, 0.38);
  --pt-bottom-glow: rgba(185, 59, 18, 0.28);
  --pt-shadow: rgba(0, 0, 0, 0.3);
  --pt-display: "Hanken Grotesk", "Noto Sans Sinhala", sans-serif;
  --pt-text-font: "Inter", "Noto Sans Sinhala", sans-serif;
}

html,
body#premiumHome {
  background-color: var(--pt-bg) !important;
}

html body#premiumHome {
  color: var(--pt-text);
  font-family: var(--pt-text-font);
  background:
    radial-gradient(ellipse 115% 72% at 50% 100%, var(--pt-bottom-glow) 0%, rgba(116, 37, 13, 0.12) 38%, transparent 72%),
    var(--pt-bg) !important;
  background-attachment: fixed !important;
}

.ambient-dot-field {
  opacity: 0.92;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.04));
}

.topbar {
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: rgba(21, 21, 21, 0.7) !important;
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}

.brand-mark,
.footer-brand,
.compact-home .hero-title,
.compact-card-head h2,
.step h3,
.modal-title {
  font-family: var(--pt-display);
}

.brand-latin { font-family: "Hanken Grotesk", sans-serif; }

#premiumHome .brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

#premiumHome .brand-logo {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(207, 48, 25, 0.16);
}

#premiumHome .brand-mark,
#premiumHome .footer-brand {
  color: var(--pt-text) !important;
  -webkit-text-fill-color: var(--pt-text) !important;
}

#premiumHome .brand-latin {
  color: var(--pt-orange) !important;
  -webkit-text-fill-color: var(--pt-orange) !important;
}

.compact-home .hero-title {
  color: var(--pt-text) !important;
  font-weight: 700;
  letter-spacing: -0.065em;
}

.compact-home .hero-sub,
.compact-help,
.compact-card small,
.compact-plan-grid span,
.selection-lines span,
.step p,
.modal-msg { color: var(--pt-muted) !important; }

#premiumHome .compact-home .hero-sub,
#premiumHome .brandjoke .strike {
  color: var(--pt-text) !important;
  opacity: 1;
}

.compact-home .eyebrow {
  color: var(--pt-orange-soft) !important;
  border: 1px solid var(--pt-border) !important;
  background: var(--pt-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.grad,
.brandlink,
.compact-kicker { color: var(--pt-orange) !important; -webkit-text-fill-color: var(--pt-orange) !important; }

.compact-card,
.how-disclosure,
.step,
.modal {
  border: 1px solid var(--pt-border) !important;
  background: var(--pt-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 24px 60px -42px var(--pt-shadow) !important;
  -webkit-backdrop-filter: blur(3px) saturate(108%) !important;
  backdrop-filter: blur(3px) saturate(108%) !important;
}

.compact-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

#premiumHome .compact-card::after,
#premiumHome .how-disclosure::after,
#premiumHome .modal::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.2) 48%, transparent 95%) !important;
}

.free-plan-choice,
.compact-plan-grid button,
.provider-tabs button,
.pkg-opt,
.selection-lines div,
.live-price,
.region-choice-grid button,
.compact-billing-tabs {
  border-color: var(--pt-border) !important;
  background: var(--pt-surface-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.region-choice-grid button,
.free-plan-choice,
.compact-plan-grid button,
.provider-tabs button,
.pkg-opt {
  transition: border-color 160ms ease, background 160ms ease, box-shadow 220ms ease, transform 160ms ease;
}

@media (hover: hover) {
  .region-choice-grid button:hover,
  .free-plan-choice:hover,
  .compact-plan-grid button:hover,
  .provider-tabs button:hover,
  .pkg-opt:hover {
    border-color: var(--pt-border-highlight) !important;
    background: var(--pt-surface-raised) !important;
    transform: translateY(-1px);
  }
}

.region-choice-grid button.selected,
.free-plan-choice.selected,
.compact-plan-grid button.selected,
.provider-tabs button.selected,
.pkg-opt.selected,
.pkg-opt.sel,
.pkg-opt.on {
  color: var(--pt-text) !important;
  border-color: rgba(255, 125, 73, 0.74) !important;
  background: var(--pt-surface-raised) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(255, 107, 53, 0.1), 0 0 24px rgba(255, 107, 53, 0.13) !important;
}

.compact-billing-tabs button.selected {
  color: var(--pt-text) !important;
  background: var(--pt-surface-raised) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 132, 82, 0.23) !important;
}

.compact-status,
.paid-trial-note,
.pkg-opt.on::after,
.step-num {
  color: var(--pt-orange-soft) !important;
  border-color: rgba(255, 126, 75, 0.28) !important;
  background: rgba(255, 107, 53, 0.075) !important;
  box-shadow: none !important;
}

.free-plan-choice b,
.compact-pkg-grid .pkg-opt .pkg-price {
  color: var(--pt-text) !important;
  -webkit-text-fill-color: var(--pt-text) !important;
}

#premiumHome .free-plan-choice,
#premiumHome .compact-plan-grid button {
  min-height: 72px;
  padding: 12px 14px;
}

#premiumHome .free-plan-choice { margin-bottom: 10px; }
#premiumHome .free-plan-choice span { gap: 4px; }
#premiumHome .free-plan-choice strong,
#premiumHome .free-plan-choice b,
#premiumHome .compact-plan-grid strong {
  color: var(--pt-text) !important;
  -webkit-text-fill-color: var(--pt-text) !important;
  line-height: 1.2;
}
#premiumHome .free-plan-choice small,
#premiumHome .compact-plan-grid span { line-height: 1.35; }
#premiumHome .free-plan-choice b { flex: 0 0 auto; white-space: nowrap; }

#premiumHome .live-price strong,
#premiumHome .selection-lines div:last-child strong {
  color: #ffa06f !important;
  -webkit-text-fill-color: #ffa06f !important;
  text-shadow: 0 0 18px rgba(255, 107, 53, 0.16);
}

#premiumHome .paid-trial-note {
  color: var(--pt-text) !important;
  border: 1px solid var(--pt-border) !important;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025) !important;
  padding: 9px 11px;
}

#premiumHome .region-speed-link {
  color: rgba(247, 245, 243, 0.62) !important;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: color 160ms ease;
}

#premiumHome .region-speed-link:hover { color: rgba(247, 245, 243, 0.9) !important; }

.theme-toggle,
.customer-language-toggle,
.btn,
.btn-ghost {
  border-color: var(--pt-border) !important;
  background: var(--pt-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.btn-primary,
.compact-continue {
  --pt-glow-angle: 0deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--pt-text) !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -24px 40px -28px var(--pt-orange-glow),
    0 12px 30px -22px var(--pt-orange-glow) !important;
  transition: transform 160ms ease, background 180ms ease, box-shadow 220ms ease;
}

#premiumHome .btn-primary::before,
#premiumHome .compact-continue::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--pt-glow-angle), transparent 0 70%, rgba(255, 255, 255, 0.35) 78%, var(--pt-orange-soft) 86%, var(--pt-orange) 91%, transparent 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pt-button-border-orbit 4.8s linear infinite;
}

.btn-primary:hover,
.compact-continue:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.11) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.24),
    inset 0 -30px 52px -29px rgba(255, 107, 53, 0.54),
    0 14px 34px -20px rgba(255, 107, 53, 0.42) !important;
  transform: translateY(-1px) !important;
}

.compact-continue:disabled {
  color: var(--pt-muted) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.compact-continue:disabled::before { opacity: 0.28; animation-play-state: paused; }

.footer {
  border-color: var(--pt-border) !important;
  background: rgba(21, 21, 21, 0.38) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@keyframes pt-button-border-orbit {
  to { --pt-glow-angle: 360deg; }
}

@media (max-width: 560px) {
  html body#premiumHome {
    background:
      radial-gradient(ellipse 150% 62% at 50% 100%, var(--pt-bottom-glow) 0%, rgba(116, 37, 13, 0.1) 42%, transparent 75%),
      var(--pt-bg) !important;
  }
  #premiumHome .topbar { gap: 5px; padding-inline: 10px; }
  #premiumHome .brand { gap: 7px; }
  #premiumHome .brand-logo { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
  #premiumHome .brand-mark { font-size: 1.05rem; }
  #premiumHome .topbar-actions { gap: 4px; }
  #premiumHome .topbar-language-toggle button { min-height: 30px; padding: 4px 6px; font-size: 0.61rem; }
  #premiumHome .topbar .btn-sm { --pad-x: 0.58rem; font-size: 0.75rem; }
  .compact-card { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #premiumHome .btn-primary::before,
  #premiumHome .compact-continue::before { animation: none; --pt-glow-angle: 300deg; }
  .region-choice-grid button,
  .free-plan-choice,
  .compact-plan-grid button,
  .provider-tabs button,
  .pkg-opt { transition: none; }
}