/* Base system setup matching philwornath.com typography */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    --cyan: #3ee6e8;
    --pink: #ff5fa2;
    --accent: var(--cyan);
    --accent-2: var(--pink);
    --zinc-50: #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background-color: var(--zinc-950);
    color: var(--zinc-200);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

/* Custom Text Selection Highlight */
::selection {
    background-color: var(--zinc-100);
    color: var(--zinc-950);
}

/* Minimalist Scrollbar */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--zinc-950);
}

::-webkit-scrollbar-thumb {
    background: var(--zinc-800);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--zinc-600);
}

/* Base Typography Overrides */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.025em;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.011em;
}

/* Custom transitions for buttons and links */
a, button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle focus indicators for accessibility */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Landing page: a quiet operational shell with a vivid byphil signal. */
body.site {
    background: #090b13;
    color: #e8ebf3;
    min-height: 100vh;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        radial-gradient(circle at 13% 5%, rgba(62, 230, 232, 0.14), transparent 25rem),
        radial-gradient(circle at 88% 18%, rgba(255, 95, 162, 0.12), transparent 22rem);
    background-size: 36px 36px, 36px 36px, auto, auto;
}

.site header {
    max-width: 1120px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.site header > div {
    height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(10, 13, 23, 0.76);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.site header .text-zinc-900,
.site footer .text-zinc-900 { color: #fff !important; }
.site header .text-zinc-400 { color: var(--accent) !important; }
.site header nav { color: #a8afc0 !important; }
.site header nav a:hover { color: var(--accent) !important; }
.site #mobileMenuPanel {
    background: #101522;
    border-color: rgba(255,255,255,0.12);
    color: #e8ebf3;
}

.site main {
    max-width: 1120px;
    gap: 0;
    padding-bottom: 56px;
}

.site main > section {
    padding: 88px 0;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.site main > section:first-child {
    padding-top: 72px;
    padding-bottom: 114px;
    position: relative;
}

.site main > section:first-child::after {
    content: "";
    display: block;
    width: min(500px, 100%);
    height: 106px;
    margin-top: 56px;
    margin-left: auto;
    margin-right: auto;
    background:
        radial-gradient(circle at 10% 66%, var(--accent) 0 17px, transparent 18px),
        radial-gradient(circle at 30% 38%, var(--accent-2) 0 24px, transparent 25px),
        radial-gradient(circle at 50% 58%, #9373ff 0 20px, transparent 21px),
        radial-gradient(circle at 70% 32%, var(--accent) 0 27px, transparent 28px),
        radial-gradient(circle at 90% 67%, var(--accent-2) 0 17px, transparent 18px);
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
    opacity: 0.96;
}

.site h2,
.site h3,
.site h4,
.site h5,
.site h6 { color: #f8fbff !important; }

.site main > section:first-child h2 {
    max-width: 780px;
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    margin-bottom: 28px;
}

.site main > section:first-child h2 span {
    color: var(--accent) !important;
    font-weight: 700 !important;
}

.site main > section:first-child p {
    color: #aeb6c7 !important;
    max-width: 620px;
    font-size: 1.07rem;
}

.site main > section:first-child > div > div:last-child a,
.site #checkoutButton,
.site #requestOtpBtn,
.site #verifyOtpBtn,
.site #linkLicenseBtn,
.site #downloadDataBtn {
    background: var(--accent) !important;
    color: #081116 !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 26px rgba(62, 230, 232, 0.19);
}

.site main > section:first-child > div > div:last-child a:hover,
.site #checkoutButton:hover,
.site #requestOtpBtn:hover,
.site #verifyOtpBtn:hover,
.site #linkLicenseBtn:hover,
.site #downloadDataBtn:hover {
    background: #84f7f5 !important;
    transform: translateY(-2px);
}

.site .text-zinc-900 { color: #f5f7fb !important; }
.site .text-zinc-800,
.site .text-zinc-700 { color: #d5dbe7 !important; }
.site .text-zinc-600 { color: #abb4c4 !important; }
.site .text-zinc-500 { color: #8993a7 !important; }
.site .text-zinc-400 { color: #778198 !important; }
.site .text-indigo-600 { color: var(--accent) !important; }
.site .text-emerald-600 { color: var(--accent) !important; }

.site #tools .grid > div {
    min-height: 300px;
    padding: 26px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.11) !important;
    background: linear-gradient(145deg, rgba(24, 31, 48, 0.94), rgba(12, 16, 27, 0.9)) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,0.16);
}

.site #tools .grid > div:nth-child(2) h4 i { color: var(--accent-2) !important; }
.site #tools .grid > div:nth-child(3) h4 i { color: #a689ff !important; }
.site .tool-link { color: var(--accent) !important; }
.site .tool-link:hover { color: #fff !important; }

.site #pass,
.site #account {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(20, 26, 42, 0.92), rgba(10, 13, 23, 0.95)) !important;
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.2);
}

.site #pass { border-color: rgba(62, 230, 232, 0.26) !important; }
.site #pass .border-t,
.site #pricing .border-t { border-color: rgba(255,255,255,0.1) !important; }
.site #pass svg { filter: drop-shadow(0 18px 24px rgba(0,0,0,0.35)); }

.site #pricing .grid > div {
    border-radius: 10px !important;
    border-color: rgba(255,255,255,0.12) !important;
    background: rgba(17, 22, 35, 0.88) !important;
    box-shadow: none !important;
}

.site #pricing .grid > div:nth-child(2) {
    border-color: var(--accent) !important;
    background: linear-gradient(150deg, rgba(62,230,232,0.14), rgba(17,22,35,0.96) 47%) !important;
    box-shadow: 0 0 0 5px rgba(62, 230, 232, 0.06) !important;
}

.site #pricing .grid > div:nth-child(3) {
    border-color: rgba(255, 95, 162, 0.58) !important;
    background: linear-gradient(150deg, rgba(255,95,162,0.12), rgba(17,22,35,0.96) 47%) !important;
}

.site #pricing .grid > div:nth-child(3) span { background: var(--accent-2) !important; color: #1d0712 !important; border-color: transparent !important; }
.site #pricing .grid a:not(#checkoutButton) { border-color: rgba(255,255,255,0.18) !important; color: #fff !important; }
.site #pricing .grid > div:nth-child(3) a { background: var(--accent-2) !important; border: 0 !important; color: #1d0712 !important; }

.site #account { max-width: none; }
.site #authPanel,
.site #accountPanel {
    background: rgba(7, 10, 18, 0.52) !important;
    border-color: rgba(255,255,255,0.12) !important;
    border-radius: 10px !important;
}

.site input {
    background: #0c1120 !important;
    color: #f8fbff !important;
    border-color: rgba(255,255,255,0.16) !important;
    border-radius: 8px !important;
}
.site input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(62,230,232,0.13); }
.site .bg-zinc-50,
.site .bg-zinc-100,
.site .bg-white { background-color: rgba(255,255,255,0.045) !important; }
.site .border-zinc-200,
.site .border-zinc-300 { border-color: rgba(255,255,255,0.13) !important; }

.site footer {
    max-width: 1120px;
    border-color: rgba(255,255,255,0.1) !important;
    color: #8993a7 !important;
}
.site footer a:hover { color: var(--accent) !important; }

@media (max-width: 640px) {
    .site header { padding-top: 14px; padding-bottom: 14px; }
    .site main > section { padding: 62px 0; }
    .site main > section:first-child { padding-top: 46px; padding-bottom: 72px; }
    .site main > section:first-child h2 { font-size: clamp(2.45rem, 13vw, 3.5rem); }
    .site main > section:first-child::after { margin-top: 38px; transform: scale(0.82); transform-origin: center; }
    .site #pass,
    .site #account { padding: 24px !important; }
}