:root{
  --bg-1:#0b1020; --bg-2:#1b2a4a; --accent:#60a5fa; --accent-2:#34d399;
  --text:#e5e7eb; --muted:#9ca3af; --card:#0f172aee; --glass:rgba(255,255,255,.06);
  --radius:20px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, #0e1936 10%, transparent 50%),
              radial-gradient(900px 900px at 80% 10%, #062a22 5%, transparent 50%),
              linear-gradient(160deg, var(--bg-1), var(--bg-2));
  overflow-x:hidden;
}

.wrap{min-height:100%; display:grid; place-items:center; padding:clamp(16px,3vw,40px)}
.card{
  width:min(100%, 980px);
  background:linear-gradient(180deg, var(--card), rgba(15,23,42,.7));
  border:1px solid var(--glass); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: clamp(20px, 4vw, 48px); position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-2px; z-index:0; border-radius:inherit;
  background: radial-gradient(800px 200px at 50% -5%, rgba(96,165,250,.18), transparent 60%),
              radial-gradient(600px 250px at 0% 100%, rgba(52,211,153,.10), transparent 60%);
  pointer-events:none;
}
header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px}
.brand-wrap{display:flex; align-items:center; gap:12px}
.logo{ width:40px; height:40px; display:grid; place-items:center; background: conic-gradient(from 160deg, var(--accent), var(--accent-2)); border-radius:12px; box-shadow: 0 8px 20px rgba(96,165,250,.35); }
.logo svg{width:22px; height:22px; color:#0b1020}
.brand{font-weight:700; letter-spacing:.4px}
.lang{ display:flex; align-items:center; gap:8px }
.lang label{ color:var(--muted); font-size:14px }
.lang select{ background:rgba(255,255,255,.06); border:1px solid var(--glass); color:var(--text); padding:8px 10px; border-radius:10px }

input, select, textarea, button {
  font-family: inherit;   /* use the same font as body */
  font-size: 15px;        /* match input font size */
  line-height: 1.4;       /* consistent line height */
  color: var(--text);     /* ensure text color matches */
}

h1{font-size:clamp(28px, 5vw, 48px); line-height:1.1; margin:8px 0 12px}
.lead{color:var(--muted); font-size:clamp(15px, 2.4vw, 18px); max-width:70ch}

.badges{display:flex; gap:12px; flex-wrap:wrap; margin:24px 0}
.store{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid var(--glass); background:rgba(255,255,255,.04); color:var(--text); text-decoration:none; transition: transform .15s ease, background .15s ease; }
.store[aria-disabled="true"]{ opacity:.7; cursor:not-allowed }
.store:not([aria-disabled="true"]):hover{ transform: translateY(-2px); background:rgba(255,255,255,.08)}

.grid{display:grid; gap:24px; grid-template-columns: 1.1fr .9fr}
@media (max-width: 880px){ .grid{ grid-template-columns: 1fr; } }

.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px }
.btn{ border:1px solid var(--accent); color:#0b1020; background:linear-gradient(180deg, var(--accent), #3b82f6); padding:12px 16px; font-weight:700; border-radius:12px; text-decoration:none; display:inline-flex; align-items:center; gap:10px }
.btn.secondary{ border-color:var(--accent-2); background:linear-gradient(180deg, var(--accent-2), #10b981) }

form{ margin-top: 10px }
.inputRow{ display:flex; gap:10px; flex-wrap:wrap }
.inputRow input{ flex:1 1 260px; min-width:220px; padding:14px 14px; border-radius:12px; border:1px solid var(--glass); background:rgba(255,255,255,.04); color:var(--text); outline:none }
.inputRow button{ padding:14px 18px; border-radius:12px; border:1px solid var(--glass); background:rgba(255,255,255,.06); color:var(--text); font-weight:700; cursor:pointer }
.hint{ color:var(--muted); font-size:13px; margin-top:8px }

.phone{ position:relative; aspect-ratio: 9/19.5; width:min(100%, 360px); margin-inline:auto; border-radius:32px; border: 10px solid #0c1224; background:linear-gradient(160deg, #0b1534, #061024); box-shadow: inset 0 0 0 2px #101936, 0 20px 60px rgba(0,0,0,.5); }
.notch{ position:absolute; width:40%; height:22px; background:#0c1224; border-radius:0 0 16px 16px; left:50%; transform:translateX(-50%)}
.screen{ position:absolute; inset:8px; border-radius:24px; background: radial-gradient(800px 500px at 80% -10%, rgba(96,165,250,.4), transparent 50%), radial-gradient(600px 500px at 0% 110%, rgba(52,211,153,.25), transparent 60%), linear-gradient(180deg, #0d1a36, #0b1020); padding:16px; display:grid; place-items:center; text-align:center; }
.screen h3{ margin:0 0 10px; font-size:20px }
.countdown{ display:flex; gap:10px; justify-content:center; margin:10px 0 0 }
.time{ min-width:68px; background:rgba(255,255,255,.06); border:1px solid var(--glass); border-radius:14px; padding:10px 8px }
.time b{ display:block; font-size:22px }
.time span{ color:var(--muted); font-size:12px }

footer{ margin-top:28px; color:var(--muted); font-size:13px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }
.social{ display:flex; gap:12px }
.social a{ color:var(--muted); text-decoration:none }
.toast{ position:fixed; left:50%; bottom:40px; transform:translateX(-50%); background:rgba(17,24,39,.9); border:1px solid var(--glass); padding:12px 16px; border-radius:12px; opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; box-shadow: var(--shadow); font-size:20px }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px) }



select#topic {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--glass);
  background-color: rgba(15,23,42,0.8);   /* dark slate */
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: linear-gradient(180deg, transparent 70%, rgba(255,255,255,0.05)),
    url("data:image/svg+xml;utf8,<svg fill='%23e5e7eb' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* Hover + focus */
select#topic:hover {
  border-color: var(--accent);
  background-color: rgba(15,23,42,1);
}
select#topic:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(96,165,250,.35);
}

/* Style the dropdown list (works in most browsers) */
select#topic option {
  background: #ffffff;      /* white background for better contrast */
  color: #111827;           /* dark gray text */
  font-size: 15px;
  padding: 8px;
}

/* Disabled option (placeholder) */
select#topic option[value=""] {
  color: #9ca3af;           /* muted gray */
}