/* ===============================
GOOGLE FONTS
=============================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap");


/* ===============================
GLOBAL
=============================== */

body {
font-family: Inter, sans-serif;
margin: 0;
color: #111;

background:
radial-gradient(circle at 20% 20%, #f1f5ff 0%, transparent 40%),
radial-gradient(circle at 80% 30%, #fff1f2 0%, transparent 40%),
#f8fafc;

min-height: 100vh;
}


/* ===============================
YC HEADER
=============================== */

.header {
position: sticky;
top: 0;
z-index: 100;
padding: 16px 40px;
transition: all 0.3s ease;

background:
radial-gradient(circle at 20% 20%, rgba(241,245,255,0.6) 0%, transparent 40%),
radial-gradient(circle at 80% 30%, rgba(255,241,242,0.6) 0%, transparent 40%),
rgba(255,255,255,0.65);

backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* при скролле */
.header.scrolled {
backdrop-filter: blur(20px);
background: rgba(255,255,255,0.9);
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.header-inner {
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}


/* ===============================
LOGO + TAGLINE
=============================== */

.logo {
font-family: "Space Grotesk", sans-serif;
font-size: 20px;
font-weight: 700;
display: flex;
flex-direction: column;
}

.logo-tagline {
font-size: 11px;
color: #888;
margin-top: 2px;
letter-spacing: 0.5px;
}


/* ===============================
NAVIGATION + ANIMATION
=============================== */

.nav {
display: flex;
align-items: center;
gap: 28px;
}

.nav a {
position: relative;
text-decoration: none;
color: #444;
font-size: 14px;
font-weight: 500;
transition: 0.2s;
}

/* underline animation */
.nav a::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
width: 0;
height: 2px;
background: black;
transition: 0.3s;
transform: translateX(-50%);
}

.nav a:hover::after {
width: 100%;
}

.nav a:hover {
color: black;
transform: translateY(-1px);
}

/* contact button */
.nav-btn {
background: black;
color: white !important;
padding: 8px 18px;
border-radius: 10px;
}

.nav-btn::after {
display: none;
}

.nav-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}


/* ===============================
LAYOUT
=============================== */

main {
max-width: 800px;
margin: 80px auto;
padding: 0 20px;
}


/* ===============================
CARDS — GLASS UI
=============================== */

.card {
background: rgba(255,255,255,0.85);
backdrop-filter: blur(12px);
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.08);
margin-bottom: 30px;
animation: fadeIn 0.6s ease;
transition: 0.3s;
}

.card:hover {
transform: translateY(-3px);
box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


/* ===============================
UPLOAD ZONE + AI EFFECT
=============================== */

#dropZone {
border: 2px dashed #e5e7eb;
padding: 70px 20px;
text-align: center;
border-radius: 18px;
cursor: pointer;
background: #fafafa;
transition: 0.3s;
position: relative;
overflow: hidden;
animation: borderPulse 3s infinite ease-in-out;
}

@keyframes borderPulse {
0% { border-color: #e5e7eb; }
50% { border-color: rgba(0,0,0,0.2); }
100% { border-color: #e5e7eb; }
}

/* glow */
#dropZone::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(0,0,0,0.03), transparent);
opacity: 0.4;
animation: zoneGlow 4s infinite ease-in-out;
}

@keyframes zoneGlow {
0% { opacity: 0.2; }
50% { opacity: 0.5; }
100% { opacity: 0.2; }
}

/* scan line */
.scan-line {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, black, transparent);
opacity: 0.25;
animation: scanMove 3s linear infinite;
}

@keyframes scanMove {
0% { top: 0%; }
100% { top: 100%; }
}

.light { color: #888; }


/* ===============================
BUTTON
=============================== */

button {
margin-top: 20px;
background: black;
color: white;
padding: 14px 32px;
border-radius: 14px;
border: none;
cursor: pointer;
font-weight: 600;
letter-spacing: 0.5px;
transition: 0.25s;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

button:active {
transform: scale(0.96);
}


/* ===============================
RISK SCORE
=============================== */

.label { color: gray; margin-bottom: 6px; }

.risk {
display: inline-block;
padding: 14px 28px;
border-radius: 999px;
font-size: 18px;
font-weight: 700;
margin-top: 12px;
letter-spacing: 1px;
}

.high { background: #fee2e2; color: #dc2626; }
.medium { background: #fef3c7; color: #d97706; }
.low { background: #dcfce7; color: #16a34a; }


/* ===============================
RESULT TEXT
=============================== */

#issues li { margin-bottom: 6px; }
h2 { margin-top: 0; }
h3 { margin-top: 24px; }


/* ===============================
LOADING SPINNER
=============================== */

#loading {
margin-top: 20px;
color: gray;
position: relative;
padding-left: 24px;
}

#loading::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #ddd;
border-top: 2px solid black;
animation: spin 1s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}


/* ===============================
FOOTER
=============================== */

.footer {
margin-top: 80px;
padding: 40px 20px;
border-top: 1px solid rgba(0,0,0,0.06);
background: rgba(255,255,255,0.5);
}

.footer-inner {
max-width: 900px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.footer-brand {
color: #888;
font-size: 14px;
}

.footer-links {
display: flex;
gap: 18px;
}

.footer-links a {
text-decoration: none;
color: #666;
font-size: 14px;
padding: 6px 12px;
border-radius: 8px;
transition: 0.2s;
}

.footer-links a:hover {
background: rgba(0,0,0,0.05);
color: black;
}


/* ===============================
SAKURA ANIMATION
=============================== */

#sakura-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden;
}

.sakura {
position: absolute;
top: -10px;
width: 12px;
height: 12px;
background: radial-gradient(circle, #ffd1dc, #ffb6c1);
border-radius: 50% 70% 70% 50%;
opacity: 0.35;
animation: fall linear forwards;
}

@keyframes fall {
to {
transform: translateY(110vh) rotate(360deg);
opacity: 0.2;
}
}


/* ===============================
HELPERS
=============================== */

.hidden { display: none; }
/* ===============================
PRIVACY PAGE — SaaS STYLE
=============================== */

.policy-hero {
text-align: center;
margin: 80px auto 40px;
max-width: 700px;
}

.policy-hero h1 {
font-size: 36px;
margin-bottom: 10px;
}

.policy-hero p {
color: #666;
}

.policy-date {
margin-top: 10px;
font-size: 13px;
color: #999;
}

.policy-container {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}

.policy-section {
background: rgba(255,255,255,0.85);
padding: 30px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

.policy-section h2 {
margin-top: 0;
margin-bottom: 12px;
}

.policy-section p {
color: #444;
line-height: 1.6;
}

.policy-section ul {
padding-left: 20px;
color: #444;
}

.contact-section a {
color: black;
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
}

.contact-section a:hover {
border-bottom: 1px solid black;
}