/* === ROOT VARIABLES === */
:root {
  --bg-1: #0b0f1a;
  --bg-2: #11172b;
  --bg-3: #131a33;
  --glass: #0c1224cc;
  --border: rgba(255, 255, 255, .14);
  --txt: #e8ebff;
  --muted: #aab2d8;
  --brand-1: #6a5af9;
  --brand-2: #8a5cf6;
  --brand-3: #19b5fe;
  --shadow: 0 10px 35px rgba(0, 0, 0, .45);
  --radius: 24px;
}

/* === RESET & BASE === */
* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; padding: 0;
  font-family: "Heebo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--txt);
  background: linear-gradient(135deg, var(--bg-1), var(--bg-2) 35%, var(--bg-3));
  background-attachment: fixed;
  overflow-x: hidden;
}
body { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
a { transition: .2s ease; color: inherit; text-decoration: none; }
a:hover { opacity: .97; }

/* === DECORATIVE OVERLAYS === */
.overlay, .orb { position: fixed; inset: auto; pointer-events: none; z-index: 0; }
.overlay {
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 80% 10%, rgba(106,90,249,.25), transparent 60%),
              radial-gradient(circle at 20% 80%, rgba(25,181,254,.25), transparent 60%);
}
.orb.one {
  width: 340px; height: 340px; right: -60px; top: -40px;
  background: radial-gradient(circle, #6a5af9 0%, transparent 60%);
  filter: blur(48px); opacity: .35; animation: drift 22s ease-in-out infinite;
}
.orb.two {
  width: 420px; height: 420px; left: -80px; bottom: -60px;
  background: radial-gradient(circle, #19b5fe 0%, transparent 60%);
  filter: blur(48px); opacity: .35; animation: drift2 26s ease-in-out infinite;
}
@keyframes drift { 0%,100%{transform:none} 50% { transform: translateY(40px); } }
@keyframes drift2 { 0%,100%{transform:none} 50% { transform: translateY(-48px); } }

/* === LAYOUT WRAPPER === */
.wrap { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 28px 20px 96px; }

/* === HEADER === */
header { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25); overflow: hidden; flex-shrink: 0;
  backdrop-filter: blur(10px);
}
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand h1 { font-size: 28px; margin: 0 0 2px; }
.brand p { margin: 0; color: var(--muted); font-size: 14px; }

/* === HERO === */
.hero {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(12,18,36,.7), rgba(12,18,36,.55));
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: -2px;
  background: linear-gradient(120deg, transparent 0%, rgba(106,90,249,.18) 35%, rgba(137,92,246,.16) 50%, transparent 70%);
  filter: blur(16px); opacity: .6; pointer-events: none;
  mask: linear-gradient(180deg, transparent 0, #000 35%, #000 65%, transparent 100%);
}
.hero > * { position: relative; z-index: 1; }

/* === HEADLINE === */
.headline { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.headline h2 { font-size: 40px; margin: 0; line-height: 1.15; letter-spacing: .2px; }
.highlight {
  background: linear-gradient(90deg, var(--brand-3), var(--brand-1), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { color: var(--muted); font-size: 18px; line-height: 1.6; }

/* === GRID & CARDS === */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
@media (min-width:860px){ .grid { grid-template-columns: 1.2fr .8fr; } }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(12,18,36,.7), rgba(12,18,36,.55));
  padding: 22px; box-shadow: var(--shadow); backdrop-filter: blur(12px);
  animation: fadeInUp .8s ease both;
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform:none; } }
.card h3 { margin: 0 0 10px; font-size: 20px; }
.card p { margin: 0; color: var(--muted); }

/* === TOOLS GRID === */
.tools-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 18px; margin-top: 28px;
}
.tool-card {
  position: relative; text-align: center;
  padding: 20px 14px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px); box-shadow: 0 10px 28px rgba(0,0,0,.28);
  overflow: hidden; isolation: isolate; cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.tool-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 180px at 80% 0%, rgba(106,90,249,.18), transparent 55%),
              radial-gradient(500px 180px at 20% 100%, rgba(25,181,254,.14), transparent 55%);
  opacity: 0; transition: opacity .35s ease;
}
.tool-card::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%;
  left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity: 0; transition: transform .75s ease, opacity .35s ease;
}
.tool-card:hover,
.tool-card:focus-within {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(106,90,249,.45);
  box-shadow: 0 18px 42px rgba(106,90,249,.28);
  background: linear-gradient(180deg, rgba(12,18,36,.55), rgba(12,18,36,.45));
}
.tool-card:hover::before, .tool-card:focus-within::before { opacity: .9; }
.tool-card:hover::after, .tool-card:focus-within::after { opacity: .85; transform: translateX(220%) skewX(-20deg); }
.tool-card .icon {
  font-size: 28px; margin-bottom: 8px;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.25));
  transition: transform .35s ease, filter .35s ease;
}
.tool-card:hover .icon { transform: translateY(-3px) scale(1.08); filter: drop-shadow(0 4px 10px rgba(106,90,249,.35)); }
.tool-card p { font-size: 15px; color: #e9edff; margin: 0; opacity: .95; transition: opacity .35s ease; }
.tool-card:hover p { opacity: 1; }

/* === HOW IT WORKS (STEPS) === */
.steps { list-style: none; padding: 0; margin: 10px 0 0; }
.steps li {
  display: flex; gap: 12px; align-items: flex-start; position: relative;
  border-radius: 16px; padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.steps li + li { margin-top: 10px; }
.steps li::before {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, rgba(25,181,254,.0), rgba(106,90,249,.45), rgba(25,181,254,.0));
  opacity: .35; transition: opacity .35s ease, width .35s ease;
}
.steps li:hover {
  transform: translateY(-4px);
  border-color: rgba(106,90,249,0.38);
  background: linear-gradient(180deg, rgba(12,18,36,.55), rgba(12,18,36,.45));
  box-shadow: 0 14px 28px rgba(106,90,249,.22);
}
.steps li:hover::before { opacity: .9; width: 5px; }
.num {
  flex: 0 0 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, rgba(26,181,254,.28), rgba(106,90,249,.28));
  border: 1px solid rgba(255,255,255,.22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.steps li:hover .num {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 10px 22px rgba(106,90,249,.35);
  border-color: rgba(106,90,249,.55);
}
.steps li p { margin: 4px 0 0; color: var(--muted); }

/* === TEAM === */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 10px;
}
.member-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 18px; backdrop-filter: blur(10px);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.member-card:hover { transform: translateY(-4px); border-color: rgba(106,90,249,0.45); box-shadow: 0 12px 32px rgba(106,90,249,0.25); }
.member-card .avatar { width:120px; height:120px; border-radius:18px; margin:0 auto 8px; overflow:hidden; border:1px solid rgba(255,255,255,0.18); }
.member-card .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.member-card h4 { text-align:center; margin:12px 0 4px; font-size:18px; }
.member-card .bio { text-align:center; font-size:14px; color:var(--muted); line-height:1.6; }
.member-links { display:flex; justify-content:center; gap:10px; margin-top:12px; }
.member-links a {
  text-decoration:none; font-size:13px; font-weight:600; color:#fff;
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.member-links a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(106,90,249,0.28); border-color: rgba(106,90,249,0.5); }
.member-links a svg { vertical-align: middle; margin-left: 6px; opacity: .85; transition: transform .25s ease, opacity .25s ease; }
.member-links a:hover svg { transform: scale(1.15); opacity: 1; }
.member-links a.ig:hover { color: #E4405F; }
.member-links a.li:hover { color: #0077B5; }

/* === FORM v2 — Modern Glass, Floating Labels, Icons, Validation === */

/* גריד גמיש */
form { display: grid; gap: 16px; margin-top: 8px; }
.row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width:640px){ .row { grid-template-columns: 1fr 1fr; } }
@media (min-width:960px){ .row.-triplet { grid-template-columns: 1fr 1fr 1fr; } }

/* עטיפת שדה */
.field{
  position: relative;
  display: grid;
  gap: 6px;
}

/* תיבת קלט בסיסית */
.field input,
.field textarea,
.field select{
  width: 100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: var(--txt);
  font-size: 15px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .15s ease;
  backdrop-filter: blur(8px);
}

/* שדה עם אייקון (ימין, RTL) */
.field.with-icon input,
.field.with-icon select,
.field.with-icon textarea{
  padding-right: 44px; /* מקום לאייקון */
}
.field .icon{
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; display: grid; place-items: center;
  opacity: .85;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.28));
}

/* תווית צפה */
.field label{
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--muted);
  pointer-events: none;
  transition: transform .18s ease, color .18s ease, font-size .18s ease, top .18s ease;
  background: transparent;
  padding: 0 6px;
}

/* כדי שהטקסט של התווית לא יתנגש בשוליים בעיצוב זכוכיתי */
.field input,
.field textarea,
.field select { background-clip: padding-box; }

/* מצב Focus/Active */
.field:focus-within input,
.field:focus-within textarea,
.field:focus-within select{
  border-color: rgba(106,90,249,.65);
  box-shadow: 0 0 0 4px rgba(106,90,249,.18), 0 10px 28px rgba(0,0,0,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  transform: translateY(-1px);
}
.field:focus-within label{
  color: #dfe6ff;
}

/* לוגיקת התווית הצפה:
   כשיש פוקוס או כשלא מוצג Placeholder (כלומר יש ערך), התווית “עולה” למעלה */
.field input::placeholder,
.field textarea::placeholder { color: transparent; }  /* חשוב */
.field input:placeholder-shown + label,
.field textarea:placeholder-shown + label,
.field select + label{
  top: 50%; transform: translateY(-50%);
  font-size: 14px;
}
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field:focus-within label{
  top: -8px;
  transform: none;
  font-size: 12px;
  background: linear-gradient(180deg, rgba(12,18,36,.9), rgba(12,18,36,.6));
  border-radius: 8px;
}

/* Select מעוצב + חץ מותאם */
/* === SELECT — Dark Mode Styling === */
.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;

  width: 100%;
  padding: 14px 44px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(20,25,45,0.9), rgba(10,14,28,0.9));
  color: #f5f7ff;                    /* טקסט לבן רך */
  font-size: 15px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

/* מצב ריחוף / פוקוס */
.select-wrapper select:hover,
.select-wrapper select:focus {
  border-color: rgba(106,90,249,0.55);
  box-shadow: 0 0 0 4px rgba(106,90,249,0.18);
  background: linear-gradient(180deg, rgba(25,30,55,0.95), rgba(14,18,34,0.95));
  color: #ffffff;
}

/* החץ היפהפה */
.select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #bfc7ff;
  font-size: 13px;
  pointer-events: none;
  transition: transform .25s ease, color .25s ease;
}
.select-wrapper:hover::after,
.select-wrapper:focus-within::after {
  color: #ffffff;
  transform: translateY(-50%) rotate(180deg);
}

/* הצבע של האופציות עצמן בתוך הרשימה */
select option {
  background: #101525;       /* רקע כהה ונעים לעיניים */
  color: #e9edff;            /* טקסט לבן ניגודי */
  font-size: 15px;
}

/* אופציה נבחרת או עם hover בתוך הרשימה */
select option:checked,
select option:hover {
  background: #232b46;
  color: #ffffff;
}

/* טקסט עזרה ושגיאה */
.helper{
  font-size: 12px; color: var(--muted);
  margin-inline-start: 4px;
}
.helper.error{
  color: #ff7b8a;
}
/* === Required Field Indicator (Red Star) === */

/* לכל לייבל עם מחלקת .req נוסיף כוכבית */
label.req::after,
label.consent.req span::after {
  content: " *";
  color: #ff5b6e;
  font-weight: 700;
  font-size: 15px;
  margin-inline-start: 4px;
  vertical-align: middle;
}

/* כדי לשמור על ריווח נכון בצ׳קבוקסים */
label.consent.req span {
  display: inline-block;
  position: relative;
  line-height: 1.4;
}

/* גם כשהעיצוב כהה – נוודא שהכוכבית בולטת */
@media (prefers-color-scheme: dark) {
  label.req::after,
  label.consent.req span::after {
    color: #ff6b81; /* ורוד חזק ונגיש */
    text-shadow: 0 0 3px rgba(0,0,0,0.4);
  }
}
/* 2) לצ'קבוקסים: מבטלים כוכבית על ה־label עצמו */
label.consent.req::after { content: none; }
/* === תיבת רעיון פתוחה — עיצוב זכוכיתי וחלק === */
.optional-idea {
  margin-top: 14px;
  padding: 14px;
  border-top: 1px dashed rgba(255,255,255,0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  transition: all .3s ease;
}

/* מוסתרת כברירת מחדל */
#optionalIdea #ideaField {
  display: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .4s ease, transform .4s ease;
}

/* מצב פתוח */
#optionalIdea.open #ideaField {
  display: block;
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
}

/* עיצוב שדה הטקסט */
#ideaField {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(16,22,40,0.9), rgba(12,18,30,0.9));
  color: #f4f6ff;
  padding: 14px;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.25);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

#ideaField:focus {
  border-color: rgba(106,90,249,0.55);
  box-shadow: 0 0 10px rgba(106,90,249,0.25);
  background: linear-gradient(180deg, rgba(22,28,55,0.95), rgba(14,18,34,0.95));
}

/* placeholder בהיר וברור */
#ideaField::placeholder {
  color: #b7bfdc;
  opacity: 0.85;
}


#ideaToggle:checked + span::before {
  transform: rotate(20deg) scale(1.15);
  opacity: 1;
}

/* מצבי תקינות HTML5 */
.field input:required:invalid,
.field textarea:required:invalid,
.field select:required:invalid{
  border-color: rgba(255,91,110,.45);
}
.field input:required:invalid + label,
.field textarea:required:invalid + label,
.field select:required:invalid + label{
  color: #ff9aa6;
}
.field input:valid,
.field textarea:valid,
.field select:valid{
  border-color: rgba(64, 191, 120, .45);
}

/* צ'קבוקסים — ליטוש קטן (נשאר accent-color לפשטות וביצועים) */
.consent-group{ display: grid; gap: 12px; }
label.consent{
  display: grid; grid-template-columns: 18px 1fr; align-items: center;
  gap: 10px; color: var(--muted); font-size: 14px; cursor: pointer;
}
label.consent input[type="checkbox"]{
  width: 18px; height: 18px; margin: 0; accent-color: var(--brand-1);
  transition: transform .15s ease;
}
label.consent input[type="checkbox"]:hover{ transform: scale(1.06); }

/* שדה רעיון — פתיחה חלקה (כבר קיים, רק קל ניקל) */
.optional-idea{ margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.12); }
#optionalIdea #ideaField{ display:none; max-height:0; opacity:0; transition:max-height .28s ease, opacity .22s ease; }
#optionalIdea.open #ideaField{ display:block; max-height:420px; opacity:1; }

/* כפתורי שליחה */
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.btn.primary{
  background: linear-gradient(135deg, var(--brand-3), var(--brand-1));
  border: none; padding: 12px 20px; font-weight: 700; border-radius: 14px; color: #fff;
  transition: transform .25s ease, box-shadow .25s ease, filter .2s ease;
}
.btn.primary:hover{ transform: translateY(-3px); box-shadow: 0 10px 22px rgba(106,90,249,.35); filter: brightness(1.03); }

/* מצב מושבת */
.field input:disabled,
.field textarea:disabled,
.field select:disabled{
  opacity: .6; cursor: not-allowed;
}

/* נגישות: צמצום תנועה */
@media (prefers-reduced-motion: reduce){
  .field *, .select-wrapper::after { transition: none !important; }
}
/* === FIX: Floating label + icon לא יתנגשו (RTL) === */

/* ריווח לשדה עם אייקון מימין */
.field.with-icon input,
.field.with-icon select,
.field.with-icon textarea{
  padding-right: 48px; /* יותר מקום לאייקון */
}

/* הזזת ה-label שמאלה, הרחק מאזור האייקון */
.field.with-icon label{
  right: 48px;                 /* היה 14px, עכשיו רחוק מהאייקון */
}

/* שכבות: label תמיד מעל, אייקון לא חוסם עכבר */
.field label{
  position: absolute;
  z-index: 2;                  /* מעל האייקון */
  pointer-events: none;
}
.field .icon{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  opacity: .85;
  z-index: 1;                  /* מתחת ל-label */
  pointer-events: none;        /* לא חוסם פוקוס/קליק על השדה */
}

/* תווית צפה — רקע קטן מאחורי הטקסט כדי שלא “ייכרס” על גבול השדה */
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field:focus-within label{
  top: -8px;
  transform: none;
  font-size: 12px;
  background: linear-gradient(180deg, rgba(12,18,36,.9), rgba(12,18,36,.6));
  border-radius: 8px;
  padding: 0 6px;
}

/* SELECT: אין placeholder-shown, אז נרים את ה-label תמיד בשדות select */
.field.select-wrapper label{
  top: -8px !important;
  transform: none !important;
  font-size: 12px !important;
  background: linear-gradient(180deg, rgba(12,18,36,.9), rgba(12,18,36,.6));
  border-radius: 8px;
  padding: 0 6px;
}

/* אם בעתיד תרצה אייקון מצד שמאל (ל־LTR), אפשר להפוך צדדים כך: */
[dir="ltr"] .field.with-icon input,
[dir="ltr"] .field.with-icon select,
[dir="ltr"] .field.with-icon textarea{ padding-left: 48px; padding-right: 14px; }
[dir="ltr"] .field.with-icon label{ left: 48px; right: auto; }
[dir="ltr"] .field .icon{ left: 12px; right: auto; }

/* === PROMO IMAGE === */
.promo-visual { margin-top: 24px; text-align: center; }
.promo-visual img {
  width:85%; max-width:420px; height:auto; border-radius:18px;
  border:1px solid rgba(255,255,255,0.12); box-shadow:0 6px 20px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px); transition: transform .35s ease, box-shadow .35s ease;
}
.promo-visual img:hover { transform: scale(1.03); box-shadow: 0 10px 28px rgba(106,90,249,0.35); }

/* === BUTTONS === */
.btn {
  border-radius: 14px; padding: 12px 16px; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; color: #fff; transition: transform .25s ease;
}
.btn.primary { background: linear-gradient(135deg, var(--brand-3), var(--brand-1)); border: none; }
.btn.primary:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(106,90,249,.35); }
.btn.ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); }

/* === MODALS === */
[hidden]{ display:none !important; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(8,12,24,.55); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease; z-index: 1000; pointer-events: none;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-card {
  position: fixed; inset: 0; margin: auto; max-width: 860px; width: min(92vw, 860px); max-height: 80vh;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.16); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 1001; pointer-events: none;
}
.modal-card.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.12); }
.modal-head h3 { margin:0; font-size:20px; }
.modal-close {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:6px 10px; border-radius:10px; cursor:pointer;
}
.modal-close:hover{ filter:brightness(1.05); }
.modal-body { padding:14px 16px 18px; overflow:auto; line-height:1.65; color:var(--txt); }

/* === FOOTER === */
footer { text-align: center; margin-top: 22px; font-size: 12px; color: var(--muted); opacity: .8; }
.legal-links { display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:8px; }
.linklike {
  background:none; border:none; padding:0; color:#cfe1ff;
  font:inherit; cursor:pointer; text-decoration:underline dotted; transition:opacity .2s ease;
}
.linklike:hover{ opacity:.9; }

/* === LIST UTILS & TOAST === */
ul.clean { list-style:none; padding:0; margin:0; }
ul.clean li { display:flex; gap:10px; align-items:flex-start; padding:6px 0; }
ul.clean li::before { content:"•"; color:var(--brand-3); font-weight:800; margin-top:-1px; }

.toast {
  position: fixed; bottom: 22px; right: 22px;
  background: linear-gradient(180deg, rgba(26,181,254,.25), rgba(106,90,249,.25));
  color:#fff; border:1px solid rgba(255,255,255,.25);
  padding:12px 14px; border-radius:12px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(10px); transition:.35s;
}
.toast.show{ opacity:1; transform:none; }

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}