/* ================================================================
   EncashYourGiftCards.com — Next Level Gift Card Platform
   Light · Airy · Premium · Mobile-first · 4K Ready
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  /* Brand palette — warm light with violet-teal accent */
  --white:      #ffffff;
  --snow:       #f8f9ff;
  --ice:        #f0f2ff;
  --frost:      #e8ecff;
  --mist:       #dde3ff;

  --violet:     #6c63ff;
  --violet-d:   #4f46e5;
  --violet-l:   #ede9fe;
  --violet-ll:  #f5f3ff;
  --teal:       #0ea5e9;
  --teal-l:     #e0f2fe;
  --amber:      #f59e0b;
  --amber-l:    #fef3c7;
  --rose:       #f43f5e;
  --rose-l:     #ffe4e6;
  --emerald:    #10b981;
  --emerald-l:  #d1fae5;

  --ink:        #0f0e2a;
  --ink-2:      #1e1b4b;
  --slate:      #4b5563;
  --muted:      #9ca3af;
  --border:     #e5e7f0;
  --border-l:   #f0f1f8;

  --font:       'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --serif:      'Playfair Display', Georgia, serif;

  --sh1:  0 1px 3px rgba(15,14,42,.06);
  --sh2:  0 4px 16px rgba(15,14,42,.08);
  --sh3:  0 8px 32px rgba(15,14,42,.10);
  --sh4:  0 20px 64px rgba(15,14,42,.12);
  --shv:  0 8px 32px rgba(108,99,255,.22);
  --sht:  0 8px 32px rgba(14,165,233,.22);

  --r1: 6px;   --r2: 12px;  --r3: 20px;
  --r4: 28px;  --r5: 40px;  --r6: 9999px;

  --max:  1520px;
  --nav:  72px;
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); background:var(--snow); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100dvh; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul { list-style:none; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--snow); }
::-webkit-scrollbar-thumb { background:var(--mist); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--violet); }

.container { max-width:var(--max); margin:0 auto; padding:0 clamp(20px,4vw,72px); }

/* ── TOPBAR ── */
.topbar {
  background:linear-gradient(135deg,var(--violet-d) 0%,var(--violet) 50%,#818cf8 100%);
  padding:9px 0; font-size:.72rem; font-weight:600;
  color:rgba(255,255,255,.85); letter-spacing:.02em;
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.topbar strong { color:#fff; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-right a { color:rgba(255,255,255,.75); transition:color .15s; }
.topbar-right a:hover { color:#fff; }
.topbar-sep { color:rgba(255,255,255,.25); }
@media(max-width:640px){ .topbar-right { display:none; } }

/* ── HEADER ── */
.site-header {
  background:rgba(248,249,255,.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-l);
  position:sticky; top:0; z-index:1000;
  height:var(--nav);
  transition:box-shadow .2s, background .2s;
}
.site-header.scrolled { box-shadow:var(--sh2); background:rgba(255,255,255,.98); }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; }

/* Logo */
.site-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-icon {
  width:40px; height:40px;
  background:linear-gradient(135deg,var(--violet),var(--teal));
  border-radius:var(--r2); display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:#fff; box-shadow:var(--shv); flex-shrink:0;
}
.logo-wordmark { display:flex; flex-direction:column; }
.logo-top { font-size:1.1rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.logo-top span { color:var(--violet); }
.logo-sub { font-size:.56rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:2px; }

/* Nav */
.main-nav ul { display:flex; align-items:center; gap:2px; }
.nav-link { padding:8px 13px; font-size:.84rem; font-weight:600; color:var(--slate); border-radius:var(--r2); transition:all .15s; display:flex; align-items:center; gap:5px; }
.nav-link:hover,.nav-link.active { color:var(--violet); background:var(--violet-ll); }
.nav-badge { font-size:.58rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--rose); color:#fff; padding:2px 7px; border-radius:var(--r6); margin-left:2px; }

/* Dropdowns */
.has-dropdown { position:relative; }
.drop-menu { position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); background:var(--white); border-radius:var(--r3); box-shadow:var(--sh4); border:1px solid var(--border); min-width:200px; padding:8px; opacity:0; pointer-events:none; transition:all .2s var(--ease); }
.has-dropdown:hover .drop-menu { opacity:1; pointer-events:auto; }
.drop-menu li a { display:flex; align-items:center; gap:10px; padding:9px 13px; font-size:.84rem; font-weight:500; color:var(--slate); border-radius:var(--r1); transition:all .15s; }
.drop-menu li a i { width:16px; color:var(--violet); font-size:.82rem; }
.drop-menu li a:hover { color:var(--violet); background:var(--violet-ll); }

/* Header right */
.header-actions { display:flex; align-items:center; gap:8px; }
.action-btn { width:40px; height:40px; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; color:var(--slate); font-size:.9rem; transition:all .15s; position:relative; }
.action-btn:hover { background:var(--violet-ll); color:var(--violet); }
.cart-badge { position:absolute; top:3px; right:3px; width:16px; height:16px; background:var(--rose); color:#fff; font-size:.56rem; font-weight:800; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.btn-sell { display:flex; align-items:center; gap:7px; padding:10px 22px; background:linear-gradient(135deg,var(--violet),var(--violet-d)); color:#fff; font-size:.84rem; font-weight:700; border-radius:var(--r6); box-shadow:var(--shv); transition:all .18s; white-space:nowrap; }
.btn-sell:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(108,99,255,.38); }

/* Burger */
.hamburger { display:none; width:40px; height:40px; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--ink); border-radius:var(--r1); }
.hamburger span { display:block; width:22px; height:2px; background:currentColor; border-radius:2px; transition:all .25s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu { position:fixed; inset:0 0 0 auto; width:min(320px,100vw); background:var(--white); z-index:2000; transform:translateX(100%); transition:transform .32s var(--ease); box-shadow:var(--sh4); overflow-y:auto; }
.mobile-menu.open { transform:translateX(0); }
.mob-overlay { position:fixed; inset:0; background:rgba(15,14,42,.35); z-index:1999; opacity:0; pointer-events:none; transition:opacity .3s; }
.mob-overlay.open { opacity:1; pointer-events:auto; }
.mob-hd { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.mob-nav a { display:block; padding:13px 20px; font-size:.9rem; font-weight:600; color:var(--slate); border-bottom:1px solid var(--border-l); transition:all .15s; }
.mob-nav a:hover { background:var(--violet-ll); color:var(--violet); padding-left:26px; }
.mob-sell { background:linear-gradient(135deg,var(--violet-ll),var(--teal-l)) !important; color:var(--violet) !important; font-weight:700 !important; }
@media(max-width:960px){ .main-nav,.btn-sell { display:none; } .hamburger { display:flex; } }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; border-radius:var(--r2); font-family:var(--font); font-size:.88rem; font-weight:700; transition:all .18s var(--ease); cursor:pointer; border:none; white-space:nowrap; letter-spacing:-.01em; }
.btn-violet { background:linear-gradient(135deg,var(--violet),var(--violet-d)); color:#fff; box-shadow:var(--shv); }
.btn-violet:hover { transform:translateY(-2px); box-shadow:0 14px 44px rgba(108,99,255,.42); }
.btn-teal { background:linear-gradient(135deg,var(--teal),#0284c7); color:#fff; box-shadow:var(--sht); }
.btn-teal:hover { transform:translateY(-2px); box-shadow:0 14px 44px rgba(14,165,233,.38); }
.btn-white { background:var(--white); color:var(--violet); border:1.5px solid var(--mist); box-shadow:var(--sh1); }
.btn-white:hover { border-color:var(--violet); background:var(--violet-ll); transform:translateY(-1px); }
.btn-ghost { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.22); backdrop-filter:blur(8px); }
.btn-ghost:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); }
.btn-lg { padding:16px 36px; font-size:.95rem; border-radius:var(--r3); }
.btn-xl { padding:18px 44px; font-size:1.05rem; border-radius:var(--r3); }
.btn-full { width:100%; justify-content:center; }
.btn-sm { padding:8px 16px; font-size:.8rem; border-radius:var(--r1); }

/* ── HERO ── */
.hero {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#fafbff 0%,#f0f2ff 50%,#e8f4ff 100%);
  min-height:clamp(600px,80vw,900px);
  display:flex; align-items:center;
}
/* Floating blob decorations */
.hero-blob-1 { position:absolute; top:-120px; right:-80px; width:clamp(400px,55vw,800px); height:clamp(400px,55vw,800px); background:radial-gradient(ellipse,rgba(108,99,255,.10) 0%,transparent 65%); border-radius:50%; pointer-events:none; animation:blob-drift1 12s ease-in-out infinite; }
.hero-blob-2 { position:absolute; bottom:-100px; left:-60px; width:clamp(300px,40vw,600px); height:clamp(300px,40vw,600px); background:radial-gradient(ellipse,rgba(14,165,233,.09) 0%,transparent 65%); border-radius:50%; pointer-events:none; animation:blob-drift2 10s ease-in-out infinite; }
@keyframes blob-drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,20px) scale(1.08)} }
@keyframes blob-drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,-25px) scale(1.06)} }

/* Dot grid bg */
.hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(108,99,255,.08) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; }

.hero-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center; padding:clamp(60px,8vw,100px) 0; position:relative; z-index:1; }

/* Left text */
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1.5px solid var(--mist); border-radius:var(--r6); padding:7px 16px; font-size:.72rem; font-weight:700; color:var(--violet); box-shadow:var(--sh1); margin-bottom:24px; }
.hero-badge .badge-dot { width:7px; height:7px; background:var(--emerald); border-radius:50%; animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.4)} }
.hero h1 { font-family:var(--serif); font-size:clamp(2.6rem,5.5vw,5rem); font-weight:700; line-height:1.08; color:var(--ink); letter-spacing:-.03em; margin-bottom:20px; }
.hero h1 em { font-style:italic; background:linear-gradient(135deg,var(--violet),var(--teal)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-desc { font-size:clamp(.92rem,1.4vw,1.1rem); color:var(--slate); line-height:1.78; margin-bottom:36px; max-width:480px; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
.hero-stats { display:flex; gap:28px; flex-wrap:wrap; }
.stat-item { }
.stat-num { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1; }
.stat-num span { color:var(--violet); }
.stat-label { font-size:.75rem; color:var(--muted); margin-top:3px; }

/* Right visual — card stack */
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:clamp(400px,50vw,580px); }
.card-stack { position:relative; width:clamp(300px,40vw,420px); }
.gift-card {
  border-radius:var(--r4); padding:clamp(22px,3vw,32px);
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:clamp(180px,22vw,240px);
  position:absolute; box-shadow:var(--sh4);
  transition:all .4s var(--ease);
}
.gc-1 { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); top:0; left:0; right:0; z-index:3; transform:rotate(-2deg); }
.gc-2 { background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%); top:14px; left:14px; right:-14px; z-index:2; transform:rotate(2deg); }
.gc-3 { background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%); top:28px; left:28px; right:-28px; z-index:1; transform:rotate(5deg); }
.gift-card:hover { transform:rotate(0) translateY(-8px) !important; z-index:10 !important; }
.gc-brand { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:8px; }
.gc-value { font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:700; color:#fff; letter-spacing:-.02em; }
.gc-tag { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); border-radius:var(--r6); padding:4px 11px; font-size:.7rem; font-weight:700; color:#fff; }
.gc-num { font-family:'Courier New',monospace; font-size:.88rem; color:rgba(255,255,255,.7); letter-spacing:.12em; margin-top:12px; }
.gc-chip { width:38px; height:28px; background:rgba(255,255,255,.22); border-radius:5px; margin-bottom:8px; display:flex; align-items:center; justify-content:center; }
.gc-chip i { font-size:.75rem; color:rgba(255,255,255,.7); }
.gc-footer { display:flex; align-items:center; justify-content:space-between; }
.gc-brand-logo { font-family:var(--serif); font-size:1rem; font-weight:700; color:#fff; }

/* Floating pills around card stack */
.float-pill { position:absolute; background:var(--white); border-radius:var(--r3); padding:10px 14px; box-shadow:var(--sh3); border:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; color:var(--ink); white-space:nowrap; }
.fp-1 { top:-20px; right:-20px; animation:float-a 4s ease-in-out infinite; }
.fp-2 { bottom:20px; left:-30px; animation:float-b 5s ease-in-out infinite; }
.fp-3 { bottom:-20px; right:10px; animation:float-c 3.5s ease-in-out infinite; }
@keyframes float-a { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes float-b { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@keyframes float-c { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.fp-icon { width:28px; height:28px; border-radius:var(--r1); display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; }

@media(max-width:880px){ .hero-layout { grid-template-columns:1fr; } .hero-visual { min-height:320px; } }
@media(max-width:480px){ .hero-ctas { flex-direction:column; } .hero-ctas .btn { width:100%; } }

/* ── MARQUEE ── */
.marquee-bar { background:var(--white); border-top:1px solid var(--border-l); border-bottom:1px solid var(--border-l); padding:14px 0; overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-flex; animation:marquee 30s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item { display:inline-flex; align-items:center; gap:10px; padding:0 28px; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.marquee-item i { color:var(--violet); font-size:.78rem; }
.marquee-item strong { color:var(--ink); }

/* ── HOW IT WORKS ── */
.how-section { padding:clamp(64px,8vw,112px) 0; background:var(--white); }
.how-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:clamp(20px,3vw,32px); }
.how-card {
  text-align:center; padding:clamp(28px,4vw,44px) clamp(20px,3vw,32px);
  background:var(--snow); border-radius:var(--r4);
  border:1.5px solid var(--border-l);
  position:relative; overflow:hidden;
  transition:all .28s var(--ease);
}
.how-card::before { content:attr(data-step); position:absolute; top:-8px; right:16px; font-family:var(--serif); font-size:5rem; font-weight:700; color:var(--violet); opacity:.06; line-height:1; pointer-events:none; }
.how-card:hover { box-shadow:var(--sh3); transform:translateY(-5px); border-color:var(--mist); }
.how-icon { width:60px; height:60px; margin:0 auto 18px; border-radius:var(--r3); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.how-icon-violet { background:var(--violet-ll); color:var(--violet); }
.how-icon-teal { background:var(--teal-l); color:var(--teal); }
.how-icon-amber { background:var(--amber-l); color:var(--amber); }
.how-icon-emerald { background:var(--emerald-l); color:var(--emerald); }
.how-card h3 { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
.how-card p { font-size:.84rem; color:var(--slate); line-height:1.68; }

/* ── BRAND CARDS GRID ── */
.brands-section { padding:clamp(64px,8vw,112px) 0; background:var(--snow); }
.brands-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); gap:clamp(12px,2vw,18px); }
.brand-card {
  background:var(--white); border-radius:var(--r3);
  padding:clamp(16px,2.5vw,24px);
  border:1.5px solid var(--border-l);
  box-shadow:var(--sh1);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; cursor:pointer;
  transition:all .22s var(--ease); position:relative; overflow:hidden;
}
.brand-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(108,99,255,.04),rgba(14,165,233,.04)); opacity:0; transition:opacity .22s; }
.brand-card:hover { box-shadow:var(--sh3); transform:translateY(-4px); border-color:var(--mist); }
.brand-card:hover::after { opacity:1; }
.brand-logo-wrap { width:64px; height:64px; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0; }
.brand-name { font-size:.88rem; font-weight:700; color:var(--ink); }
.brand-rate { font-size:.75rem; font-weight:700; color:var(--emerald); }
.brand-badge { position:absolute; top:10px; right:10px; font-size:.58rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r6); }
.bb-popular { background:var(--amber-l); color:var(--amber); }
.bb-new { background:var(--emerald-l); color:var(--emerald); }
.bb-hot { background:var(--rose-l); color:var(--rose); }

/* ── SELL FORM SECTION ── */
.sell-section { padding:clamp(64px,8vw,112px) 0; background:var(--white); }
.sell-inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:start; }

/* Left info */
.sell-info .tag { display:inline-flex; align-items:center; gap:7px; background:var(--violet-ll); color:var(--violet); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:var(--r6); margin-bottom:18px; }
.sell-info h2 { font-family:var(--serif); font-size:clamp(2rem,3.5vw,3.2rem); font-weight:700; color:var(--ink); letter-spacing:-.03em; line-height:1.1; margin-bottom:16px; }
.sell-info h2 em { font-style:italic; color:var(--violet); }
.sell-info p { font-size:clamp(.9rem,1.3vw,1rem); color:var(--slate); line-height:1.8; margin-bottom:28px; }
.sell-benefits { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.sell-benefit { display:flex; align-items:flex-start; gap:12px; }
.sb-icon { width:36px; height:36px; border-radius:var(--r1); display:flex; align-items:center; justify-content:center; font-size:.88rem; flex-shrink:0; }
.sb-title { font-size:.9rem; font-weight:700; color:var(--ink); display:block; margin-bottom:2px; }
.sb-desc { font-size:.8rem; color:var(--slate); }

/* Right form */
.sell-form-box { background:var(--white); border-radius:var(--r4); box-shadow:var(--sh4); border:1.5px solid var(--border); overflow:hidden; position:sticky; top:calc(var(--nav) + 20px); }
.sfb-header { padding:22px 26px; background:linear-gradient(135deg,var(--violet-ll),var(--teal-l)); border-bottom:1px solid var(--border-l); }
.sfb-header h3 { font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:4px; }
.sfb-header p { font-size:.8rem; color:var(--slate); }
.sfb-body { padding:clamp(20px,3vw,28px); }
.sfb-lbl { font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--violet); padding-bottom:8px; border-bottom:2px solid var(--violet-ll); margin-bottom:16px; }

/* Brand selector */
.brand-select-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px; }
.brand-opt { border:1.5px solid var(--border); border-radius:var(--r2); padding:10px 8px; text-align:center; cursor:pointer; transition:all .15s; background:var(--snow); }
.brand-opt:hover { border-color:var(--violet); background:var(--violet-ll); }
.brand-opt.active { border-color:var(--violet); background:var(--violet-ll); box-shadow:0 0 0 3px rgba(108,99,255,.12); }
.brand-opt .bo-icon { font-size:1.3rem; margin-bottom:4px; }
.brand-opt .bo-name { font-size:.72rem; font-weight:700; color:var(--ink); }
.brand-opt .bo-rate { font-size:.64rem; color:var(--emerald); font-weight:600; }

/* Form inputs */
.form-group { margin-bottom:16px; }
.form-group.no-mb { margin-bottom:0; }
.form-group label { display:block; font-size:.73rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); margin-bottom:7px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--border); border-radius:var(--r2);
  font-family:var(--font); font-size:.9rem; color:var(--ink);
  background:var(--snow); outline:none;
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(108,99,255,.1); background:var(--white); }
.form-group .mono { font-family:'Courier New',monospace; letter-spacing:.07em; font-size:.95rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
@media(max-width:480px){ .form-row { grid-template-columns:1fr; } }

/* Value badge */
.value-display { background:linear-gradient(135deg,var(--violet-ll),var(--teal-l)); border:1.5px solid var(--mist); border-radius:var(--r2); padding:14px 16px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.vd-label { font-size:.75rem; font-weight:600; color:var(--slate); }
.vd-amount { font-family:var(--serif); font-size:1.6rem; font-weight:700; color:var(--violet); }
.vd-rate { font-size:.72rem; color:var(--emerald); font-weight:600; }

/* Submit */
.sfb-submit { width:100%; padding:16px; background:linear-gradient(135deg,var(--violet),var(--violet-d)); color:#fff; font-size:.95rem; font-weight:800; border:none; border-radius:var(--r3); box-shadow:var(--shv); cursor:pointer; transition:all .18s; display:flex; align-items:center; justify-content:center; gap:8px; letter-spacing:-.01em; }
.sfb-submit:hover { transform:translateY(-2px); box-shadow:0 14px 44px rgba(108,99,255,.42); }
.sfb-secure { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:12px; font-size:.73rem; color:var(--muted); }
.sfb-secure i { color:var(--emerald); }

@media(max-width:860px){ .sell-inner { grid-template-columns:1fr; } }

/* ── WHY US ── */
.why-section { padding:clamp(64px,8vw,112px) 0; background:var(--snow); }
.why-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:clamp(16px,2.5vw,24px); }
.why-card {
  background:var(--white); border-radius:var(--r4);
  padding:clamp(24px,3.5vw,36px);
  border:1.5px solid var(--border-l); box-shadow:var(--sh1);
  transition:all .25s var(--ease);
}
.why-card:hover { box-shadow:var(--sh3); transform:translateY(-4px); border-color:var(--mist); }
.why-icon { width:52px; height:52px; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:16px; }
.why-card h3 { font-size:.95rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
.why-card p { font-size:.83rem; color:var(--slate); line-height:1.66; }

/* ── TESTIMONIALS ── */
.testi-section { padding:clamp(64px,8vw,112px) 0; background:var(--white); }
.testi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:clamp(16px,2vw,22px); }
.testi-card { background:var(--snow); border-radius:var(--r4); padding:clamp(22px,3vw,30px); border:1.5px solid var(--border-l); transition:all .22s; }
.testi-card:hover { box-shadow:var(--sh2); border-color:var(--mist); }
.testi-stars { font-size:.8rem; color:var(--amber); margin-bottom:14px; display:flex; gap:2px; }
.testi-text { font-family:var(--serif); font-size:1.02rem; font-style:italic; color:var(--ink-2); line-height:1.65; margin-bottom:16px; }
.testi-author { display:flex; align-items:center; gap:10px; }
.testi-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; color:#fff; flex-shrink:0; }
.testi-name { font-size:.84rem; font-weight:700; color:var(--ink); }
.testi-detail { font-size:.74rem; color:var(--muted); }

/* ── SECTION HEADS ── */
.sec-head { margin-bottom:clamp(32px,4vw,52px); }
.sec-head.center { text-align:center; display:flex; flex-direction:column; align-items:center; }
.sec-head.split { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.sec-tag { display:inline-flex; align-items:center; gap:7px; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--violet); background:var(--violet-ll); padding:5px 12px; border-radius:var(--r6); margin-bottom:12px; }
.sec-head h2 { font-family:var(--serif); font-size:clamp(2rem,3.5vw,3rem); font-weight:700; color:var(--ink); letter-spacing:-.03em; line-height:1.1; }
.sec-head h2 em { font-style:italic; color:var(--violet); }
.sec-head p { font-size:clamp(.9rem,1.2vw,1rem); color:var(--slate); max-width:560px; line-height:1.75; margin-top:10px; }
.sec-link { font-size:.84rem; font-weight:700; color:var(--violet); display:inline-flex; align-items:center; gap:5px; transition:gap .15s; }
.sec-link:hover { gap:10px; }

/* ── FAQ ── */
.faq-section { padding:clamp(64px,8vw,112px) 0; background:var(--snow); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); }
details.faq-item { background:var(--white); border:1.5px solid var(--border-l); border-radius:var(--r3); overflow:hidden; transition:all .2s; }
details.faq-item:hover { border-color:var(--mist); }
details.faq-item[open] { border-color:var(--violet); box-shadow:0 0 0 3px rgba(108,99,255,.08); }
details.faq-item summary { padding:18px 20px; font-size:.9rem; font-weight:700; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
details.faq-item summary::after { content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.72rem; color:var(--violet); flex-shrink:0; transition:transform .2s; }
details.faq-item[open] summary::after { transform:rotate(180deg); }
details.faq-item p { padding:0 20px 18px; font-size:.86rem; color:var(--slate); line-height:1.76; border-top:1px solid var(--border-l); padding-top:14px; }
@media(max-width:680px){ .faq-grid { grid-template-columns:1fr; } }

/* ── CTA BANNER ── */
.cta-banner {
  margin:clamp(40px,5vw,64px) 0;
  background:linear-gradient(135deg,var(--ink-2) 0%,#312e81 50%,#1e3a5f 100%);
  border-radius:var(--r5);
  padding:clamp(40px,6vw,72px) clamp(28px,5vw,72px);
  position:relative; overflow:hidden; text-align:center;
}
.cta-banner::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:28px 28px; }
.cta-banner::after { content:''; position:absolute; top:-100px; right:-60px; width:400px; height:400px; background:radial-gradient(ellipse,rgba(108,99,255,.25),transparent 65%); border-radius:50%; }
.cta-inner { position:relative; z-index:1; }
.cta-banner h2 { font-family:var(--serif); font-size:clamp(1.8rem,3.5vw,3rem); font-weight:700; color:#fff; margin-bottom:14px; letter-spacing:-.03em; }
.cta-banner p { font-size:clamp(.9rem,1.3vw,1.05rem); color:rgba(255,255,255,.65); line-height:1.75; max-width:520px; margin:0 auto 32px; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── NEWSLETTER ── */
.nl-section { padding:clamp(56px,6vw,80px) 0; background:var(--white); border-top:1px solid var(--border-l); }
.nl-inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.nl-tag { font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); background:var(--teal-l); display:inline-flex; padding:5px 12px; border-radius:var(--r6); margin-bottom:12px; }
.nl-inner h2 { font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; color:var(--ink); margin-bottom:10px; }
.nl-inner p { font-size:.88rem; color:var(--slate); line-height:1.75; }
.nl-form { display:flex; gap:10px; flex-wrap:wrap; }
.nl-input-wrap { flex:1; min-width:200px; display:flex; align-items:center; gap:10px; background:var(--snow); border:1.5px solid var(--border); border-radius:var(--r2); padding:12px 16px; transition:border-color .15s; }
.nl-input-wrap:focus-within { border-color:var(--violet); background:var(--white); box-shadow:0 0 0 3px rgba(108,99,255,.1); }
.nl-input-wrap i { color:var(--muted); }
.nl-input-wrap input { flex:1; background:none; border:none; outline:none; color:var(--ink); font-size:.88rem; }
.nl-input-wrap input::placeholder { color:var(--muted); }
.nl-btn { padding:12px 24px; background:linear-gradient(135deg,var(--teal),#0284c7); color:#fff; border:none; border-radius:var(--r2); font-size:.86rem; font-weight:700; cursor:pointer; transition:all .15s; white-space:nowrap; box-shadow:var(--sht); }
.nl-btn:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(14,165,233,.38); }
.nl-success { display:flex; align-items:center; gap:8px; color:var(--emerald); font-size:.88rem; }
@media(max-width:680px){ .nl-inner { grid-template-columns:1fr; } }

/* ── FOOTER ── */
.site-footer { background:var(--ink-2); color:rgba(255,255,255,.5); padding:clamp(48px,6vw,72px) 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(24px,4vw,48px); margin-bottom:40px; }
.footer-brand .footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-brand .logo-top { color:var(--white); }
.footer-asda-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(108,99,255,.15); border:1px solid rgba(108,99,255,.3); color:#a5b4fc; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; border-radius:var(--r6); margin-bottom:14px; }
.footer-brand > p { font-size:.82rem; line-height:1.78; color:rgba(255,255,255,.38); margin-bottom:18px; }
.footer-social { display:flex; gap:8px; }
.footer-social a { width:34px; height:34px; border-radius:var(--r1); background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-size:.82rem; transition:all .15s; }
.footer-social a:hover { background:var(--violet); color:#fff; }
.footer-col h4 { font-size:.6rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.22); margin-bottom:14px; }
.footer-col ul { display:flex; flex-direction:column; gap:8px; }
.footer-col ul li a { font-size:.82rem; color:rgba(255,255,255,.4); transition:color .15s; }
.footer-col ul li a:hover { color:#a5b4fc; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding:18px 0; }
.footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-copy { font-size:.76rem; color:rgba(255,255,255,.27); }
.footer-copy a { color:rgba(255,255,255,.38); }
@media(max-width:880px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-grid { grid-template-columns:1fr; } }

/* ── COOKIE ── */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:var(--ink-2); border-top:2px solid var(--violet); padding:14px 0; transform:translateY(100%); transition:transform .4s var(--ease); }
.cookie-banner.show { transform:translateY(0); }
.cookie-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cookie-inner p { font-size:.82rem; color:rgba(255,255,255,.65); flex:1; min-width:200px; }
.cookie-inner a { color:#a5b4fc; }
.cookie-btns { display:flex; gap:8px; }
.cookie-accept { padding:8px 18px; background:var(--violet); color:#fff; border:none; border-radius:var(--r1); font-size:.82rem; font-weight:700; cursor:pointer; }
.cookie-decline { padding:8px 18px; background:transparent; color:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.2); border-radius:var(--r1); font-size:.82rem; cursor:pointer; }

/* ── PAGE BANNER ── */
.page-banner { position:relative; min-height:clamp(180px,24vw,300px); display:flex; align-items:center; overflow:hidden; background:linear-gradient(135deg,var(--ink-2),#312e81); }
.pb-overlay { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:28px 28px; }
.pb-glow { position:absolute; top:-100px; right:-60px; width:400px; height:400px; background:radial-gradient(ellipse,rgba(108,99,255,.3),transparent 65%); border-radius:50%; }
.pb-content { position:relative; z-index:2; }
.pb-content h1 { font-family:var(--serif); font-size:clamp(1.9rem,4.5vw,3rem); font-weight:700; color:var(--white); margin-bottom:10px; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.78rem; color:rgba(255,255,255,.5); }
.breadcrumb a { color:rgba(255,255,255,.5); }
.breadcrumb a:hover { color:#a5b4fc; }

/* ── SELL PAGE ── */
.sell-page-section { padding:clamp(40px,5vw,64px) 0 80px; }

/* ── ANIMATIONS ── */
.ani { opacity:0; transform:translateY(20px); transition:opacity .55s ease,transform .55s ease; }
.ani.visible { opacity:1; transform:translateY(0); }
@keyframes fade-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── 4K ── */
@media(min-width:2560px){ :root { font-size:18px; --max:2200px; } }
@media(min-width:3840px){ :root { font-size:22px; --max:3000px; } }

/* ── MISC ── */
.text-violet { color:var(--violet); }
.text-teal { color:var(--teal); }
.text-emerald { color:var(--emerald); }
.divider { border:none; border-top:1px solid var(--border-l); margin:0; }

/* ══════════════════════════════════════════
   SELL FORM — ENHANCED COMPONENTS
   Per-brand validation · Photo upload · Multi-card
   ══════════════════════════════════════════ */

/* Brand selector — scrollable grid */
.brand-select-scroll { max-height:320px; overflow-y:auto; padding-right:4px; }
.brand-select-scroll::-webkit-scrollbar { width:4px; }
.brand-select-scroll::-webkit-scrollbar-thumb { background:var(--mist); border-radius:2px; }
.brand-select-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media(max-width:600px){ .brand-select-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:380px){ .brand-select-grid { grid-template-columns:repeat(2,1fr); } }

.brand-opt { border:1.5px solid var(--border); border-radius:var(--r2); padding:10px 6px; text-align:center; cursor:pointer; transition:all .15s; background:var(--snow); user-select:none; }
.brand-opt:hover { border-color:var(--violet); background:var(--violet-ll); }
.brand-opt.active { border-color:var(--violet); background:var(--violet-ll); box-shadow:0 0 0 3px rgba(108,99,255,.14); }
.bo-icon { font-size:1.3rem; margin-bottom:3px; }
.bo-name { font-size:.7rem; font-weight:700; color:var(--ink); line-height:1.2; }
.bo-rate { font-size:.62rem; color:var(--emerald); font-weight:600; margin-top:2px; }

/* Selected brand rate badge */
.selected-rate-badge { display:none; align-items:center; gap:6px; background:var(--emerald-l); border:1px solid var(--emerald); color:var(--emerald); font-size:.75rem; font-weight:800; padding:5px 13px; border-radius:var(--r6); }

/* ── CARD ENTRY ── */
.card-entry {
  background:var(--snow); border:1.5px solid var(--border-l);
  border-radius:var(--r3); overflow:hidden; margin-bottom:16px;
  transition:all .25s;
}
.card-entry-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:linear-gradient(135deg,var(--violet-ll),var(--teal-l));
  border-bottom:1px solid var(--border-l);
}
.ce-title { font-size:.88rem; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; }
.ce-title i { color:var(--violet); }
.ce-remove { font-size:.78rem; font-weight:700; color:var(--rose); display:flex; align-items:center; gap:5px; transition:all .15s; padding:4px 10px; border-radius:var(--r1); background:rgba(244,63,94,.08); }
.ce-remove:hover { background:var(--rose); color:#fff; }
.card-entry-body { padding:18px; }

/* Brand hint box */
.brand-hint {
  background:var(--violet-ll); border:1px solid var(--mist);
  border-radius:var(--r2); padding:10px 14px;
  font-size:.8rem; color:var(--slate); line-height:1.55;
  display:flex; align-items:flex-start; gap:8px; margin-bottom:14px;
}
.brand-hint i { color:var(--violet); flex-shrink:0; margin-top:2px; font-size:.82rem; }

/* Field format hint */
.field-format-hint { font-size:.72rem; color:var(--muted); margin-top:5px; font-style:italic; }

/* Validation error */
.field-error { font-size:.76rem; color:var(--rose); font-weight:600; margin-top:5px; display:none; }
.field-error::before { content:'⚠ '; }

/* Card value bar */
.card-val-bar {
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(135deg,var(--violet-ll),var(--teal-l));
  border:1px solid var(--mist); border-radius:var(--r2);
  padding:12px 16px; margin:14px 0; font-size:.84rem;
}
.cvb-label { color:var(--slate); margin-right:4px; }
.cvb-rate  { color:var(--violet); font-size:.88rem; }
.cvb-payout { color:var(--emerald); font-size:1.05rem; }

/* ── PHOTO UPLOAD ── */
.photo-upload-wrap { margin-top:16px; border-top:1px dashed var(--border); padding-top:16px; }
.puw-label { font-size:.78rem; font-weight:700; color:var(--slate); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.puw-label i { color:var(--violet); }
.puw-label em { font-style:normal; font-weight:400; color:var(--muted); }

.puw-drop {
  border:2px dashed var(--mist); border-radius:var(--r3);
  padding:24px 16px; text-align:center; cursor:pointer;
  transition:all .2s; background:var(--snow);
}
.puw-drop:hover { border-color:var(--violet); background:var(--violet-ll); }
.puw-drop.drag-active { border-color:var(--violet); background:var(--violet-ll); transform:scale(1.01); }

.photo-thumbs { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.photo-thumb {
  position:relative; width:80px; height:80px;
  border-radius:var(--r2); overflow:hidden;
  border:2px solid var(--border); background:var(--snow);
  box-shadow:var(--sh1);
}
.photo-thumb img { width:100%; height:100%; object-fit:cover; }
.pt-remove {
  position:absolute; top:3px; right:3px;
  width:20px; height:20px; border-radius:50%;
  background:rgba(244,63,94,.9); color:#fff;
  font-size:.6rem; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.pt-remove:hover { background:var(--rose); transform:scale(1.1); }

/* ── ADD CARD BUTTON ── */
.add-card-btn {
  width:100%; padding:13px; margin-top:4px;
  border:2px dashed var(--mist); border-radius:var(--r3);
  background:var(--snow); color:var(--violet);
  font-size:.88rem; font-weight:700; cursor:pointer;
  transition:all .18s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.add-card-btn:hover { border-color:var(--violet); background:var(--violet-ll); transform:translateY(-1px); }

/* ── GRAND TOTAL BAR ── */
.grand-total-bar {
  background:linear-gradient(135deg,var(--ink-2),#312e81);
  border-radius:var(--r3); padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
  margin:16px 0; flex-wrap:wrap; gap:10px;
}
.gtb-label { font-size:.82rem; font-weight:600; color:rgba(255,255,255,.65); }
.gtb-value { font-family:var(--serif); font-size:1.5rem; font-weight:700; color:#fff; }
.card-count-badge { background:rgba(255,255,255,.15); color:#fff; font-size:.72rem; font-weight:700; padding:4px 11px; border-radius:var(--r6); }