/* = Theme variables (tuned for readability) = */
:root{
--bg:#0b0e14;
--surface:#111623;
--card:#111826;
--muted:#b9c3d6;
--text:#f2f4f8;
--heading:#ffffff;
--link:#dfe7ff;
--link-hover:#ffffff;
--brand:#5b8cff;
--brand-2:#6ef1c5;
--accent:#ffd166;
--danger:#ff6b6b;
--border:rgba(255,255,255,.14);
--border-soft:rgba(255,255,255,.08);
--card-grad-1:rgba(255,255,255,.06);
--card-grad-2:rgba(255,255,255,.03);
--shadow:0 10px 30px rgba(0,0,0,.45);
--radius:16px;
--radius-sm:10px;
--speed:.35s;
}
/* = Global resets & typography = */
*{box-sizing:border-box}
html,body{
margin:0;padding:0;
background:var(--bg);
color:var(--text);
font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
line-height:1.65;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%}
.container{width:min(1100px,92%);margin:0 auto}
h1,h2,h3,h4,h5,h6{color:var(--heading);margin:0 0 .6em}
p,li,small,label{color:var(--text)}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
::selection{background:rgba(91,140,255,.35);color:#fff}
/* = Header / Nav = */
.site-header{
position:sticky;top:0;z-index:50;
background:rgba(11,14,20,.7);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:10px;align-items:center;color:var(--heading);font-weight:800;letter-spacing:.3px}
.logo{width:36px;height:36px}
.logo.small{width:26px;height:26px}
nav a{color:var(--muted);margin-left:18px;padding:8px 12px;border-radius:10px;transition:color var(--speed),background var(--speed),transform var(--speed)}
nav a:hover{color:var(--heading);transform:translateY(-1px)}
nav a.active{color:var(--heading);background:rgba(255,255,255,.06)}
nav a.cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b0e14;font-weight:700}
nav a.cta:hover{filter:brightness(1.08)}
/* = Hero = */
.hero{
padding:64px 0 24px;
background:
radial-gradient(1200px 500px at 70% -10%, rgba(91,140,255,.22), transparent),
radial-gradient(900px 400px at -10% 20%, rgba(110,241,197,.18), transparent);
}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero-copy h1{font-size:44px;line-height:1.1}
.hero-copy p{color:var(--muted);margin:0 0 20px}
.hero-actions{display:flex;gap:12px}
.btn{
display:inline-block;border:0;border-radius:12px;padding:12px 16px;
background:#1a2338;color:var(--heading);text-decoration:none;font-weight:600;
cursor:pointer;user-select:none;
transition:transform var(--speed),box-shadow var(--speed),filter var(--speed), background var(--speed);
}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b0e14;box-shadow:0 10px 20px rgba(91,140,255,.25)}
.btn.ghost{background:transparent;border:1px solid var(--border)}
.btn.small{padding:10px 12px;font-size:14px;line-height:1}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
/* Floating visual */
.floating-card{position:relative}
.floating-card .glass{
background:linear-gradient(180deg,var(--card-grad-1),var(--card-grad-2));
border:1px solid var(--border);
padding:18px;border-radius:16px;backdrop-filter:blur(8px);box-shadow:var(--shadow);
animation:float 6s ease-in-out infinite
}
.floating-card h3{margin:0 0 6px;color:var(--heading)}
.floating-card ul{margin:0;padding-left:18px;color:var(--muted)}
.pulse{position:absolute;inset:-10px;border-radius:20px;background:radial-gradient(circle at center, rgba(91,140,255,.22), transparent 60%);filter:blur(10px);animation:pulse 3.5s infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:.25}}
.orb{position:absolute;border-radius:50%;filter:blur(20px);mix-blend-mode:screen;opacity:.55}
.orb-1{width:140px;height:140px;background:#5b8cff;top:-20px;right:10%}
.orb-2{width:110px;height:110px;background:#6ef1c5;bottom:-10px;right:0}
.orb-3{width:80px;height:80px;background:#ffd166;bottom:-18px;left:-10%}
/* = Features = */
.features{padding:36px 0 64px}
.section-title{font-size:28px}
.section-subtitle{color:var(--muted);margin:6px 0 24px}
.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.card{
background:linear-gradient(180deg,var(--card-grad-1),var(--card-grad-2));
border:1px solid var(--border-soft);
border-radius:var(--radius);padding:16px;
box-shadow:0 4px 14px rgba(0,0,0,.25);
transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
cursor:default;position:relative;outline:0;
color:var(--text);
}
.card h3{margin:10px 0 6px;color:var(--heading)}
.card p{margin:0 0 12px;color:var(--muted)}
.card:hover,.card:focus{
transform:translateY(-6px) scale(1.02);
box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(91,140,255,.4) inset;
border-color:rgba(91,140,255,.5);
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}
/* IMPORTANT: small buttons inside cards are clickable /
.card .btn.small{ / no pointer-events:none */ }
/* Icons */
.icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 20px rgba(91,140,255,.25)}
.i-judge{mask:url('../assets/i-judge.svg') no-repeat center/contain;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.i-citation{mask:url('../assets/i-citation.svg') no-repeat center/contain;background:linear-gradient(135deg,var(--brand),var(--accent))}
.i-section{mask:url('../assets/i-section.svg') no-repeat center/contain;background:linear-gradient(135deg,var(--brand-2),var(--accent))}
.i-compare{mask:url('../assets/i-compare.svg') no-repeat center/contain;background:linear-gradient(135deg,var(--brand),#ffa8a8)}
.i-predict{mask:url('../assets/i-predict.svg') no-repeat center/contain;background:linear-gradient(135deg,#a98bff,var(--brand))}
.i-generate{mask:url('../assets/i-generate.svg') no-repeat center/contain;background:linear-gradient(135deg,#ffd166,#ff8fa3)}
.i-mock{mask:url('../assets/i-mock.svg') no-repeat center/contain;background:linear-gradient(135deg,#6ef1c5,#ffd166)}
.i-translate{mask:url('../assets/i-translate.svg') no-repeat center/contain;background:linear-gradient(135deg,#7bd3ff,#6ef1c5)}
.i-chat{mask:url('../assets/i-chat.svg') no-repeat center/contain;background:linear-gradient(135deg,#ffcf6e,#5b8cff)}
.i-web{mask:url('../assets/i-web.svg') no-repeat center/contain;background:linear-gradient(135deg,#7bd3ff,#ffd166)}
/* = CTA band & Footer = */
.cta-band{
padding:36px 0;
background:linear-gradient(90deg, rgba(91,140,255,.12), rgba(110,241,197,.12));
text-align:center;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
}
.cta-band h3{color:var(--heading)}
.site-footer{color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;padding:24px 0}
.foot-links a{display:block;color:var(--muted);margin:6px 0}
.foot-links a:hover{color:var(--heading)}
/* = Page sections = */
.page-hero{
padding:42px 0;
background:radial-gradient(800px 280px at 20% 0%, rgba(91,140,255,.16),transparent)
}
.text-section{padding:10px 0 48px}
.text-section h2{margin-top:22px}
/* = Forms = */
.form-section{padding:10px 0 48px}
.form-card{max-width:560px;margin:0 auto;background:linear-gradient(180deg,var(--card-grad-1),var(--card-grad-2));border:1px solid var(--border-soft);border-radius:var(--radius);padding:16px}
.form-field{position:relative;margin:16px 0}
label{display:block;margin-bottom:8px;color:#e9eef8}
input,textarea{
width:100%;padding:14px 12px;border-radius:12px;border:1px solid var(--border);
background:rgba(255,255,255,.05);color:var(--text);outline:none;
transition:border-color var(--speed), box-shadow var(--speed), background var(--speed)
}
textarea{min-height:140px;resize:vertical}
input::placeholder,textarea::placeholder{color:#9fb0cf}
input:focus,textarea:focus{border-color:rgba(91,140,255,.7);box-shadow:0 0 0 4px rgba(91,140,255,.2)}
.focus-underline{position:absolute;left:12px;right:12px;bottom:10px;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
input:focus + .focus-underline, textarea:focus + .focus-underline{transform:scaleX(1)}
.error-msg{display:none;color:var(--danger);margin-top:6px}
input.invalid,textarea.invalid{border-color:rgba(255,107,107,.85);box-shadow:0 0 0 4px rgba(255,107,107,.18)}
.form-status{margin-top:14px;color:var(--muted)}
/* = Modal = */
.modal{position:fixed;inset:0;background:rgba(2,6,14,.65);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.modal.show{display:flex}
.modal-dialog{background:linear-gradient(180deg,var(--card-grad-1),var(--card-grad-2));border:1px solid var(--border);border-radius:16px;padding:18px;max-width:720px;width:100%;box-shadow:var(--shadow);animation:pop .25s ease}
.modal-close{position:absolute;right:22px;top:16px;background:transparent;border:0;color:var(--heading);font-size:24px;cursor:pointer;opacity:.85}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.loader{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--brand);animation:spin 1s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}
/* = Reveal-on-scroll = */
.reveal-up{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal-up.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.05s}
.delay-2{transition-delay:.15s}
.delay-3{transition-delay:.25s}
.delay-4{transition-delay:.35s}
/* = Chat Styles (Added for Legal AI contrast fix) = */
/* Default (dark theme) */
.chat-container { max-height: 400px; overflow-y: auto; padding: 10px; border: 1px solid var(--border); margin-bottom: 10px; background: var(--surface); }
.message { margin: 10px 0; padding: 10px; border-radius: 15px; max-width: 80%; }
.user-message { background: rgba(220, 248, 198, 0.2); /* Light green tint */ align-self: flex-end; margin-left: auto; color: var(--text); }
.ai-message { background: rgba(255, 255, 255, 0.1); /* Subtle white tint */ align-self: flex-start; margin-right: auto; color: var(--text); }
.timestamp { font-size: 0.8em; color: var(--muted); text-align: right; }
.chat-form { display: flex; gap: 10px; }
.chat-input { flex: 1; }
.message p { color: inherit; margin: 0; }

/* Light theme overrides */
[data-theme="light"] .chat-container { border-color: var(--border); background: var(--surface); }
[data-theme="light"] .user-message { background: rgba(220, 248, 198, 0.3); color: var(--text); }
[data-theme="light"] .ai-message { background: rgba(0, 0, 0, 0.05); color: var(--text); }
[data-theme="light"] .timestamp { color: var(--muted); }

/* = Responsive = */
@media (max-width:1100px){
.card-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
.hero-grid{grid-template-columns:1fr}
.card-grid{grid-template-columns:1fr 1fr}
.nav a{margin-left:8px}
}
@media (max-width:460px){
.card-grid{grid-template-columns:1fr}
}
/* = Light theme: variable overrides only = */
:root[data-theme="light"]{
--bg:#f7f9fc;
--surface:#ffffff;
--card:#ffffff;
--text:#0b0e14;
--heading:#0b0e14;
--muted:#4a5568;
--link:#1a3d8f;
--link-hover:#102a66;
--border:rgba(0,0,0,.12);
--border-soft:rgba(0,0,0,.08);
--card-grad-1:rgba(0,0,0,.03);
--card-grad-2:rgba(0,0,0,.015);
}
/* Light theme surfaces */
:root[data-theme="light"] .site-header{
background:rgba(255,255,255,.8);
border-bottom:1px solid var(--border-soft);
backdrop-filter:blur(10px);
}
:root[data-theme="light"] .hero{
background:
radial-gradient(1200px 500px at 70% -10%, rgba(91,140,255,.12), transparent),
radial-gradient(900px 400px at -10% 20%, rgba(110,241,197,.10), transparent);
}
:root[data-theme="light"] .card{
background:linear-gradient(180deg,var(--card-grad-1),var(--card-grad-2));
box-shadow:0 4px 14px rgba(0,0,0,.06);
border-color:var(--border-soft);
}
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .card:focus{
background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.01));
box-shadow:0 18px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(91,140,255,.2) inset;
}
:root[data-theme="light"] .cta-band{
border-top:1px solid var(--border-soft);
border-bottom:1px solid var(--border-soft);
}
:root[data-theme="light"] .form-card{
background:linear-gradient(180deg,var(--card-grad-1),var(--card-grad-2));
border:1px solid var(--border-soft);
}
:root[data-theme="light"] input,
:root[data-theme="light"] textarea{
background:rgba(0,0,0,.02);
border:1px solid var(--border);
color:var(--text);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder{
color:#8090a8;
}
:root[data-theme="light"] .modal{
background:rgba(0,0,0,.35);
}
:root[data-theme="light"] .modal-dialog{
background:linear-gradient(180deg,var(--card-grad-1),var(--card-grad-2));
border:1px solid var(--border);
}
.reveal-up{ opacity:1 !important; transform:none !important; }