/* Webora — iOS Liquid Glass + Deep Black · Optimized */
:root{
  --bg:#000;
  --surface:#0a0a0d; --surface-2:#111116; --surface-3:#17171e;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16); --border-glass:rgba(255,255,255,.12);
  --primary:#EAB308; --primary-hover:#F5CE1F; --secondary:#0A84FF;
  --text:#F5F5F7; --text-2:#8E8E93; --text-3:#48484A;
  --danger:#FF453A; --success:#30D158; --warning:#FF9F0A;
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --sf-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sf);font-size:15px;line-height:1.55;letter-spacing:-.011em}
html{scroll-behavior:smooth}
body{overflow-x:hidden;background-color:#000;background-image:radial-gradient(1200px 700px at 15% -10%, rgba(234,179,8,.05), transparent 60%),radial-gradient(900px 700px at 95% 10%, rgba(10,132,255,.04), transparent 60%);background-attachment:fixed}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--primary);color:#000}

h1,h2,h3,h4{font-family:var(--sf);letter-spacing:-.035em;margin:0;font-weight:700}
h1{font-size:clamp(2.4rem,7vw,6.4rem);line-height:1;font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.05;font-weight:700;letter-spacing:-.03em}
h3{font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:600}

.mono{font-family:var(--sf-mono);letter-spacing:0}
.overline{font-family:var(--sf-mono);text-transform:uppercase;letter-spacing:.22em;font-size:10.5px;color:var(--text-2);font-weight:500}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
.container-tight{max-width:960px;margin:0 auto;padding:0 20px}

/* Grid pattern */
.bg-pattern{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.bg-pattern.grid{background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px}
.bg-pattern.dots{background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:22px 22px}
.mask-fade-edges{-webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%)}
.mask-fade-y{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.mask-fade-top{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to bottom,transparent,#000 40%)}

/* Nav */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);background:rgba(0,0,0,.6);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:1400px;margin:0 auto;gap:16px}
.brand{font-family:var(--sf);font-weight:800;font-size:22px;letter-spacing:-.035em;color:var(--text);flex-shrink:0}
.brand .dot{color:var(--primary)}
.nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav a.nav-link{color:var(--text-2);transition:color .18s;font-size:14px;font-weight:500}
.nav a.nav-link:hover{color:var(--text)}
.nav-right{display:flex;gap:8px;align-items:center}
@media (max-width:820px){.nav ul{display:none}}
@media (max-width:520px){.brand{font-size:19px}.nav a.brand span{display:none}.nav-inner{padding:12px 16px}}
@media (max-width:768px){.nav-inner{height:56px}}

/* Liquid glass buttons */
.btn{--_bg1:rgba(255,255,255,.10);--_bg2:rgba(255,255,255,.03);--_border:rgba(255,255,255,.18);--_text:var(--text);--_shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(0,0,0,.35) inset,0 8px 30px -8px rgba(0,0,0,.6);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;font-family:var(--sf);font-weight:600;font-size:13.5px;color:var(--_text);background:linear-gradient(180deg,var(--_bg1),var(--_bg2));border:1px solid var(--_border);border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--_shadow);transition:transform .18s cubic-bezier(.2,.9,.3,1.2),background .2s,border-color .2s;overflow:hidden;isolation:isolate;text-decoration:none;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 45%);border-radius:inherit;z-index:1}
.btn>*{position:relative;z-index:2}
.btn:hover{transform:translateY(-1px) scale(1.02);--_bg1:rgba(255,255,255,.14);--_border:rgba(255,255,255,.28)}
.btn:active{transform:scale(.98)}
.btn.primary{--_bg1:rgba(234,179,8,.98);--_bg2:rgba(202,138,4,.88);--_border:rgba(255,255,255,.35);--_text:#0a0a0a;--_shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -1px 0 rgba(0,0,0,.25) inset,0 10px 30px -8px rgba(234,179,8,.5)}
.btn.primary:hover{--_bg1:rgba(245,206,31,1);--_bg2:rgba(234,179,8,.95)}
.btn.danger{--_bg1:rgba(255,69,58,.9);--_bg2:rgba(200,50,45,.85);--_border:rgba(255,255,255,.28);--_text:#fff}
.btn.ghost{--_bg1:rgba(255,255,255,.04);--_bg2:rgba(255,255,255,.01);--_border:rgba(255,255,255,.08);--_text:var(--text-2)}
.btn.ghost:hover{--_text:var(--text)}
.btn.sm{padding:7px 14px;font-size:12.5px}
.btn.lg{padding:14px 26px;font-size:15px}

/* Cards */
.card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid var(--border);padding:24px;border-radius:22px;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);position:relative;transition:border-color .2s,transform .2s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%)}
.card>*{position:relative}
.card.hover:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 30px -8px rgba(234,179,8,.25)}

/* Inputs */
label{display:block;font-family:var(--sf-mono);text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--text-2);margin-bottom:8px;font-weight:500}
.input,select,textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);padding:13px 16px;font-family:var(--sf);font-size:14px;outline:none;border-radius:14px;transition:border-color .2s,background .2s,box-shadow .2s}
.input:focus,select:focus,textarea:focus{border-color:var(--primary);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px rgba(234,179,8,.15)}
select{appearance:none;background-color:rgba(255,255,255,.04);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%238E8E93' d='M6 8L2 4h8z'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.form-row{display:grid;gap:14px;margin-bottom:14px}
.form-row.two{grid-template-columns:1fr 1fr}
@media (max-width:640px){.form-row.two{grid-template-columns:1fr}}
.error{color:var(--danger);font-size:12.5px;margin-top:6px}
.helper{color:var(--text-2);font-size:12.5px;margin-top:8px}

/* Badges */
.badge{display:inline-block;font-family:var(--sf-mono);text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;border:1px solid currentColor;padding:4px 9px;border-radius:999px;font-weight:600}
.badge.ok{color:var(--success);animation:badgePulse 2s infinite}
@keyframes badgePulse{0%{box-shadow:0 0 0 0 rgba(48,209,88,.4)}70%{box-shadow:0 0 0 6px rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
.badge.warn{color:var(--warning)}.badge.err{color:var(--danger)}.badge.mut{color:var(--text-2)}
.tag{display:inline-block;background:linear-gradient(180deg,var(--primary),var(--primary-hover));color:#000;font-family:var(--sf-mono);text-transform:uppercase;letter-spacing:.14em;font-size:10px;padding:4px 10px;font-weight:700;border-radius:999px;box-shadow:0 4px 14px rgba(234,179,8,.35)}

/* Tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.table th{font-family:var(--sf-mono);text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:var(--text-2);text-align:left;padding:14px;border-bottom:1px solid var(--border);font-weight:500;white-space:nowrap}
.table td{padding:14px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:hover td{background:rgba(255,255,255,.02)}

/* Grid */
.grid{display:grid;gap:20px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}}
@media (max-width:640px){.grid.three{grid-template-columns:1fr}}

/* Alerts */
.alert{border:1px solid var(--border);background:rgba(255,255,255,.02);padding:14px 18px;font-size:13.5px;border-radius:14px}
.alert.ok{border-color:var(--success);background:rgba(48,209,88,.08);color:#a7f3d0}
.alert.err{border-color:var(--danger);background:rgba(255,69,58,.08);color:#fecaca}
.alert.warn{border-color:var(--warning);background:rgba(255,159,10,.08);color:#fde68a}

/* Hero — with a live 3D orb */
.hero{position:relative;min-height:calc(100vh - 60px);overflow:hidden;padding-top:24px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg .orb{position:absolute;width:min(650px,80vw);height:min(650px,80vw);top:50%;right:-10%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(234,179,8,.35),rgba(234,179,8,.06) 40%,transparent 65%);filter:blur(30px);animation:orb 14s ease-in-out infinite alternate;will-change:transform}
@keyframes orb{from{transform:translate(0,-50%) scale(1)}to{transform:translate(-6%,-46%) scale(1.06)}}
.hero-bg .ring{position:absolute;top:50%;right:5%;width:min(520px,70vw);height:min(520px,70vw);transform:translateY(-50%) rotateX(70deg);border-radius:50%;border:1px solid rgba(234,179,8,.18);box-shadow:0 0 40px rgba(234,179,8,.08) inset;animation:spin 34s linear infinite}
.hero-bg .ring.r2{width:min(400px,54vw);height:min(400px,54vw);border-color:rgba(255,255,255,.06);animation-duration:44s;animation-direction:reverse}
.hero-bg .ring.r3{width:min(280px,38vw);height:min(280px,38vw);border-color:rgba(234,179,8,.24);animation-duration:24s}
@keyframes spin{from{transform:translateY(-50%) rotateX(70deg) rotateZ(0)}to{transform:translateY(-50%) rotateX(70deg) rotateZ(360deg)}}
@media (max-width:820px){.hero-bg .orb{right:-40%;opacity:.5}.hero-bg .ring{right:-30%;opacity:.6}}
@media (prefers-reduced-motion:reduce){.hero-bg .orb,.hero-bg .ring{animation:none}}

.hero-content{position:relative;z-index:2;padding:64px 24px 40px;max-width:1240px;margin:0 auto;width:100%}
.hero h1 .hl{background:linear-gradient(180deg,#fff 0%,#EAB308 55%,#F59E0B 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .kicker{color:var(--text-2);font-size:12px;text-transform:uppercase;letter-spacing:.28em;margin-bottom:22px;font-family:var(--sf-mono);font-weight:500}
.hero .sub{color:var(--text-2);font-size:17px;max-width:600px;margin-top:24px;font-weight:400}
@media (max-width:640px){.hero .sub{font-size:15px}.hero-content{padding:48px 20px 32px}.hero .kicker{font-size:11px;letter-spacing:.2em}}

.hero-search{position:relative;z-index:2;margin:44px auto 0;max-width:720px;border:1px solid rgba(255,255,255,.12);background:rgba(20,20,25,.55);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);padding:8px;display:flex;gap:8px;align-items:center;border-radius:999px;box-shadow:0 20px 60px -10px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(255,255,255,.02);transition: border-color 0.3s, box-shadow 0.3s;}
.hero-search:focus-within { border-color: rgba(234,179,8,0.5); box-shadow: 0 0 30px rgba(234,179,8,0.15), 0 20px 60px -10px rgba(0,0,0,.8); }
.hero-search .input-wrap { flex:1 1 100%; position: relative; display: flex; align-items: center; min-width: 0; }
.hero-search .input-wrap svg { position: absolute; left: 22px; color: var(--text-2); width: 22px; height: 22px; flex-shrink: 0; pointer-events: none; }
.hero-search .input{flex:1 1 100%; min-width:0; width: 100%; background:transparent;border:none;padding:0 20px 0 54px;font-size:16px;border-radius:999px;font-family:var(--sf-mono); color: var(--text); outline: none; margin:0; height: 56px;}
.hero-search .input::placeholder { color: var(--text-2); }
.hero-search .input:focus{box-shadow:none;background:rgba(255,255,255,.02)}
.hero-search select{flex:0 0 auto; width: auto; background:rgba(255,255,255,.06);border-radius:999px;padding:0 40px 0 20px;font-size:15px;border:1px solid rgba(255,255,255,.1);min-width:130px; color: var(--text); font-weight: 600; height: 56px; outline: none; transition: border-color 0.2s;}
.hero-search select:focus { border-color: var(--primary); }
.hero-search .btn{flex:0 0 auto; padding:0 32px; font-size:15px; height: 56px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; width: auto;}
@media (max-width:700px){.hero-search{border-radius:24px;flex-direction:column;padding:12px; gap: 12px;}.hero-search .input-wrap,.hero-search select,.hero-search .btn{width:100%}.hero-search .btn{padding:16px}}

.cta-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
@media (max-width:520px){.cta-row .btn{flex:1;min-width:130px}}

/* Footer */
.footer{border-top:1px solid var(--border);margin-top:120px;padding:80px 0 40px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.015));position:relative;overflow:hidden}
.footer .huge{font-family:var(--sf);font-weight:900;font-size:clamp(3.4rem,15vw,14rem);line-height:.85;letter-spacing:-.06em;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(234,179,8,.14));-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;user-select:none;padding:0 12px}
@media (max-width:640px){.footer{margin-top:80px;padding:60px 0 32px}}

/* Utility */
.mt-8{margin-top:32px}.mt-4{margin-top:16px}.mt-2{margin-top:8px}.mb-4{margin-bottom:16px}
.text-mut{color:var(--text-2)}.text-ok{color:var(--success)}.text-err{color:var(--danger)}.text-warn{color:var(--warning)}.text-primary{color:var(--primary)}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-4{gap:16px}
.hidden{display:none}.divider{height:1px;background:var(--border);margin:24px 0}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);padding:6px 12px;font-size:12px;border-radius:999px}

/* Shell (dashboard/admin) */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.shell aside{border-right:1px solid var(--border);padding:0 12px 24px;background:rgba(10,10,13,.6);position:sticky;top:0;height:100vh;overflow-y:auto;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
/* Hide the direct a.brand inside aside on desktop (only show in sidebar-header) */
.shell aside > a.brand{display:none}
.mobile-topbar{display:none;justify-content:space-between;align-items:center;padding:16px 20px;background:rgba(10,10,13,.9);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.hamburger-animated{background:none;border:none;cursor:pointer;padding:8px;margin:-8px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;transition:transform .3s ease;width:40px;height:40px;position:relative;z-index:60}
.hamburger-animated span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}
.hamburger-animated.active span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--primary)}
.hamburger-animated.active span:nth-child(2){opacity:0;transform:translateX(10px)}
.hamburger-animated.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--primary)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 12px 20px;border-bottom:1px solid var(--border);margin-bottom:14px}
.sidebar-header .brand{border:none;padding:0;margin:0;display:block}
.hamburger-close{display:none !important}
.side-link{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--text-2);font-size:13.5px;border-radius:12px;margin-bottom:2px;transition:background .16s,color .16s;font-weight:500;text-decoration:none}
.side-link:hover{color:var(--text);background:rgba(255,255,255,.04)}
.side-link.active{color:#000;background:linear-gradient(180deg,var(--primary),var(--primary-hover));box-shadow:0 4px 12px rgba(234,179,8,.3)}
.shell main{padding:32px;min-width:0;overflow-x:hidden}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:16px}
.topbar h1{font-size:clamp(1.6rem,3vw,2rem)}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .shell aside{
    position:relative;
    height:auto;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:16px;
    border-right:none;
    border-bottom:1px solid var(--border);
    z-index:10;
  }
  .shell aside > .sidebar-header {
    width: 100%;
    margin-bottom: 8px;
    padding: 0 0 12px;
  }
  .shell aside > .side-link {
    flex: 1 1 auto;
    justify-content: center;
    margin-bottom: 0;
    padding: 8px 12px;
  }
  .shell aside > .divider { display: none; }
  .shell main{padding:24px 20px}
  .topbar h1{font-size:1.5rem}
}
@media (max-width:520px){.shell main{padding:20px 16px}}

/* Auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:40px 20px;position:relative}
.auth-card{width:100%;max-width:460px;position:relative;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:24px;padding:36px 28px;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.auth-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%)}
.auth-card>*{position:relative}
.auth-card h1{font-size:32px;margin:20px 0 6px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
@media (max-width:520px){.auth-card{padding:28px 22px}.auth-card h1{font-size:26px}}

/* Empty state */
.empty{border:2px dashed var(--border-strong);padding:56px 24px;text-align:center;color:var(--text-2);border-radius:22px;background:rgba(255,255,255,.02)}
.empty h3{color:var(--text);margin-bottom:8px;font-weight:600}

/* Cart line */
.cart-line{display:grid;grid-template-columns:1.4fr .8fr 100px auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}
@media (max-width:700px){.cart-line{grid-template-columns:1fr;gap:6px}.cart-line>form{justify-self:end}}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bento .b{border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.005));padding:26px;min-height:200px;position:relative;overflow:hidden;border-radius:22px}
.bento .b::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%)}
.bento .b>*{position:relative}
.bento .b h3{font-family:var(--sf);font-weight:700}.bento .b p{color:var(--text-2)}
.bento .b.large{grid-column:span 7;grid-row:span 2}
.bento .b.mid{grid-column:span 5}
.bento .b.small{grid-column:span 4}
@media (max-width:900px){.bento{grid-template-columns:repeat(6,1fr)}.bento .b.large{grid-column:span 6;grid-row:auto}.bento .b.mid{grid-column:span 6}.bento .b.small{grid-column:span 3}}
@media (max-width:640px){.bento .b{grid-column:span 6 !important;min-height:160px;padding:22px}}

/* Social */
.social-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
@media (max-width:600px){.social-row{grid-template-columns:1fr}}
.social-row a{border:1px solid var(--border);background:rgba(255,255,255,.03);padding:14px 16px;display:flex;align-items:center;gap:12px;font-family:var(--sf);color:var(--text);border-radius:14px;transition:border-color .18s,color .18s,transform .18s;font-size:13.5px;font-weight:500}
.social-row a:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:80;display:none;align-items:center;justify-content:center;padding:16px}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border-strong);padding:24px;max-width:520px;width:100%;border-radius:22px;max-height:90vh;overflow-y:auto;}
@media(max-width:520px){.modal{padding:20px 16px; border-radius:18px;}}
.modal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap: 12px; }
.modal-header h3 { margin: 0; word-break: break-all; font-size: 20px; }

/* Fade in — subtle & non-blocking */
.fadeIn{animation:fu .55s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fadeIn{animation:none}.reveal{opacity:1;transform:none}}

/* Section headers */
.section-head{margin-bottom:36px}
.section-head h2{margin-top:8px}
@media (max-width:640px){.section-head{margin-bottom:24px}}

/* Custom Select */
.custom-select-wrapper { position: relative; display: inline-block; width: 100%; user-select: none; }
.custom-select-trigger { background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text); padding: 13px 38px 13px 16px; font-family: var(--sf); font-size: 14px; border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: border-color .2s, background .2s, box-shadow .2s; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-select-trigger:after { content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%238E8E93' d='M6 8L2 4h8z'/></svg>"); background-repeat: no-repeat; background-position: center; transition: transform 0.2s; pointer-events: none; }
.custom-select-wrapper.open { z-index: 90; }
.custom-select-wrapper.open .custom-select-trigger { border-color: var(--primary); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(234,179,8,.15); }
.custom-select-wrapper.open .custom-select-trigger:after { transform: translateY(-50%) rotate(180deg); }
.custom-select-options { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: rgba(20,20,25,0.85); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--border-strong); border-radius: 14px; padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 100; box-shadow: 0 20px 50px -10px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04) inset; max-height: 260px; overflow-y: auto; overflow-x: hidden; }
.custom-select-wrapper.open .custom-select-options { display: flex; animation: fu 0.2s cubic-bezier(0.2,0.9,0.3,1.1) forwards; }
.custom-select-option { padding: 10px 14px; color: var(--text-2); font-size: 14px; font-family: var(--sf); border-radius: 10px; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-select-option:hover, .custom-select-option.selected { background: rgba(255,255,255,0.08); color: var(--text); }
.custom-select-option.selected { color: var(--primary); font-weight: 500; }
/* Override global selects inside hero */
.hero-search .custom-select-wrapper { width: auto; flex: 0 0 auto; }
.hero-search .custom-select-trigger { background: rgba(255,255,255,.06); border-radius: 999px; padding: 0 40px 0 20px; display: flex; align-items: center; font-size: 15px; border-color: rgba(255,255,255,.1); min-width: 130px; color: var(--text); font-weight: 600; height: 56px; }
.hero-search .custom-select-options { min-width: 220px; right: auto; left: 0; top: calc(100% + 12px); border-radius: 20px; }
@media(max-width:700px){ .hero-search .custom-select-wrapper, .hero-search .custom-select-trigger { width: 100%; flex: 1 1 100%; } .hero-search .custom-select-options { min-width: 100%; } }


@media (max-width: 768px) {
  .nav-inner { padding: 0 16px; height: 56px; }
  .nav-right .btn { padding: 6px 12px; font-size: 12px; }
}