/* ===== amirali.dev — design tokens ===== */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #FFFFFF;
  --bg-panel: #F3F8F4;
  --bg-panel-2: #E9F2EB;
  --border: #DCE8DF;
  --text: #142019;
  --text-dim: #56685D;
  --text-faint: #8CA093;
  --accent: #1E8E5A;
  --accent-dim: #E5F3EA;
  --spark: #159C63;
  --danger: #D64545;
  --radius-sm: 6px;
  --radius: 10px;
  --font: 'Vazirmatn', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --container: 1160px;
  /* the code-editor panel keeps a dark surface on purpose for contrast + authenticity */
  --term-bg: #0E1913;
  --term-bg-2: #142A1E;
  --term-border: #1E3B2A;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  direction: rtl;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input,textarea,select{ font-family: inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

:focus-visible{
  outline: 2px solid var(--spark);
  outline-offset: 3px;
}

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ===== Nav ===== */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 68px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.05rem; letter-spacing:.2px;
}
.brand .dot{
  width:9px; height:9px; border-radius:2px; background: var(--spark);
  transform: rotate(45deg);
  flex-shrink:0;
}
.brand small{
  font-family: var(--mono); color: var(--text-faint); font-weight:500; font-size:.72rem;
}
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  color: var(--text-dim); font-size:.94rem; transition: color .15s ease;
}
.nav-links a:hover{ color: var(--text); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-size: .94rem; font-weight:600;
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--accent); color:#FFFFFF; }
.btn-primary:hover{ background:#166E46; }
.btn-ghost{ background:transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--accent); }
.btn-spark{ background: var(--spark); color:#FFFFFF; }
.btn-spark:hover{ filter:brightness(1.06); }
.btn-block{ width:100%; }
.btn-sm{ padding: 8px 14px; font-size:.85rem; }
.btn-danger{ background:transparent; color: var(--danger); border-color: rgba(255,107,107,.35); }
.btn-danger:hover{ background: rgba(255,107,107,.08); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ===== Hero ===== */
.hero{
  padding: 84px 0 60px;
  border-bottom: 1px solid var(--border);
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items:center;
}
.eyebrow-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size:.78rem; color: var(--spark);
  background: rgba(21,156,99,.09);
  border:1px solid rgba(21,156,99,.28);
  padding: 5px 10px; border-radius: 5px;
  margin-bottom: 22px;
}
.hero h1{
  font-size: clamp(2.1rem, 4vw, 3.15rem);
  font-weight:800; line-height:1.28; margin:0 0 20px;
}
.hero p.lead{
  color: var(--text-dim); font-size:1.08rem; max-width: 46ch; margin:0 0 30px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 34px;}
.hero-stats{ display:flex; gap:34px; }
.hero-stats div b{ display:block; font-size:1.4rem; font-weight:800; }
.hero-stats div span{ font-size:.82rem; color: var(--text-faint); }

/* fake terminal panel */
.term{
  background: var(--term-bg);
  border:1px solid var(--term-border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 30px 60px -25px rgba(30,142,90,.28);
}
.term-bar{
  display:flex; align-items:center; gap:8px;
  padding: 12px 14px;
  border-bottom:1px solid var(--term-border);
  background: var(--term-bg-2);
}
.term-bar span{ width:10px; height:10px; border-radius:50%; background:#2C4C38; }
.term-bar small{ margin-inline-start:auto; font-family:var(--mono); color:#6E8E7A; font-size:.72rem; direction:ltr; }
.term-body{
  padding: 22px 20px; font-family: var(--mono); font-size:.86rem; color:#B9D8C4;
  direction: ltr; text-align:left; min-height: 210px;
}
.term-body .l1{ color:#5C7A68; }
.term-body .k{ color:#7FD9A8; }
.term-body .s{ color:#DCEFD9; }
.term-body .f{ color:#4FC98A; }
.caret{
  display:inline-block; width:7px; height:15px; background: #4FC98A;
  vertical-align:-2px; animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ===== Sections ===== */
.section{ padding: 74px 0; }
.section-alt{ background: var(--bg-panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-head{ margin-bottom: 42px; max-width: 620px; }
.section-head .kicker{ font-family: var(--mono); color: var(--accent); font-size:.78rem; margin-bottom:10px; display:block; }
.section-head h2{ font-size: clamp(1.6rem,2.6vw,2.2rem); font-weight:800; margin:0 0 12px; }
.section-head p{ color: var(--text-dim); margin:0; }

/* ===== Service / Feature grid ===== */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
.card{
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color .15s ease, transform .15s ease;
}
.icon{
  width:42px; height:42px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(30,142,90,.1); color: var(--accent);
  margin-bottom:18px; font-size:1.2rem;
}
.service-card h3{ margin:0 0 8px; font-size:1.08rem; font-weight:700; }
.service-card p{ color: var(--text-dim); font-size:.92rem; margin:0 0 16px; }
.service-card .tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  font-family: var(--mono); font-size:.7rem; color: var(--text-dim);
  border:1px solid var(--border); padding:3px 8px; border-radius:5px; direction:ltr;
}

/* ===== Portfolio ===== */
.port-card{ overflow:hidden; padding:0; }
.port-thumb{
  height: 170px; display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size:.75rem; color: var(--text-faint);
  background: linear-gradient(135deg, var(--bg-panel-2), var(--bg-panel));
  border-bottom:1px solid var(--border);
}
.port-body{ padding:20px 22px 22px; }
.port-body .cat{ font-family:var(--mono); color:var(--spark); font-size:.72rem; }
.port-body h3{ margin:8px 0 8px; font-size:1.02rem; }
.port-body p{ color:var(--text-dim); font-size:.88rem; margin:0; }

/* ===== Pricing ===== */
.price-card{ display:flex; flex-direction:column; }
.price-card .amount{ font-size:2.1rem; font-weight:800; margin:14px 0 4px; }
.price-card .amount span{ font-size:.9rem; color:var(--text-faint); font-weight:500; }
.price-card ul{ margin:18px 0 24px; display:flex; flex-direction:column; gap:10px; }
.price-card li{ font-size:.9rem; color: var(--text-dim); display:flex; gap:8px; }
.price-card li::before{ content:"✓"; color: var(--spark); font-weight:700; }
.price-card.featured{ border-color: var(--accent); position:relative; }
.price-card .badge{
  position:absolute; top:-13px; right:22px;
  background: var(--accent); color:#FFFFFF; font-size:.72rem; font-weight:700;
  padding:3px 10px; border-radius:5px;
}

/* ===== Steps (real sequence: project request wizard) ===== */
.steps{ display:flex; gap:0; margin-bottom:36px; }
.step{
  flex:1; text-align:center; position:relative; padding-bottom:14px;
  font-size:.84rem; color: var(--text-faint); border-bottom:2px solid var(--border);
}
.step.active{ color: var(--accent); border-color: var(--accent); font-weight:700; }
.step.done{ color: var(--spark); border-color: var(--spark); }

/* ===== Forms ===== */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.86rem; color: var(--text-dim); margin-bottom:7px; }
.field input, .field textarea, .field select{
  width:100%; background: var(--bg); border:1px solid var(--border); color: var(--text);
  padding:12px 14px; border-radius: var(--radius-sm); font-size:.94rem;
  transition: border-color .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--accent); outline:none; }
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chip-group{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding:9px 15px; border:1px solid var(--border); border-radius:20px; font-size:.85rem;
  color: var(--text-dim); transition: all .12s ease;
}
.chip input{ display:none; }
.chip.checked{ border-color: var(--accent); color: var(--accent); background: rgba(30,142,90,.08); }
.hint{ font-size:.78rem; color: var(--text-faint); margin-top:6px; }
.error-text{ font-size:.8rem; color: var(--danger); margin-top:6px; display:none; }
.field.invalid input, .field.invalid textarea{ border-color: var(--danger); }
.field.invalid .error-text{ display:block; }

/* ===== Auth ===== */
.auth-wrap{ max-width: 420px; margin: 70px auto; padding: 0 24px; }
.auth-card{ padding: 34px 30px; }
.auth-tabs{ display:flex; border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; margin-bottom:26px; }
.auth-tab{ flex:1; text-align:center; padding:11px; font-size:.9rem; color: var(--text-dim); background: var(--bg); }
.auth-tab.active{ background: var(--accent); color:#FFFFFF; font-weight:700; }
.auth-panel{ display:none; }
.auth-panel.active{ display:block; }
.auth-divider{ display:flex; align-items:center; gap:12px; color: var(--text-faint); font-size:.78rem; margin: 20px 0; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background: var(--border); }
.auth-msg{ font-size:.85rem; padding:10px 12px; border-radius:6px; margin-bottom:16px; display:none; }
.auth-msg.show{ display:block; }
.auth-msg.ok{ background: rgba(21,156,99,.09); color: var(--spark); border:1px solid rgba(21,156,99,.28); }
.auth-msg.err{ background: rgba(255,107,107,.08); color: var(--danger); border:1px solid rgba(255,107,107,.25); }

/* ===== Dashboard ===== */
.dash{ display:grid; grid-template-columns: 240px 1fr; gap:32px; align-items:start; padding: 42px 0 90px; }
.dash-side{ position:sticky; top: 90px; }
.dash-user{ padding:22px; text-align:center; margin-bottom:16px; }
.avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 12px;
  background: linear-gradient(135deg, var(--accent), var(--spark));
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#FFFFFF; font-size:1.3rem;
}
.dash-nav a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:8px; color:var(--text-dim); font-size:.9rem; margin-bottom:4px; }
.dash-nav a.active, .dash-nav a:hover{ background: var(--bg-panel); color: var(--text); }
.dash-panel{ display:none; }
.dash-panel.active{ display:block; }
.stat-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-bottom:28px; }
.stat-box{ padding:20px; }
.stat-box b{ font-size:1.5rem; display:block; }
.stat-box span{ color:var(--text-faint); font-size:.82rem; }
.order-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border:1px solid var(--border); border-radius: var(--radius-sm); margin-bottom:10px;
}
.order-row .meta{ font-size:.82rem; color:var(--text-faint); font-family:var(--mono); direction:ltr; text-align:left; }
.status{ font-size:.76rem; padding:4px 10px; border-radius:20px; font-weight:600; }
.status.pending{ background: rgba(214,150,20,.12); color:#B5790F; }
.status.progress{ background: rgba(47,111,228,.1); color:#2F6FE4; }
.status.done{ background: rgba(21,156,99,.12); color: var(--spark); }
.status.paid{ background: rgba(21,156,99,.12); color: var(--spark); }
.empty-state{ text-align:center; padding: 50px 20px; color: var(--text-faint); }
.empty-state b{ display:block; color: var(--text-dim); margin-bottom:6px; }

/* ===== Shop ===== */
.shop-filters{ display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap; }
.filter-btn{ padding:8px 16px; border:1px solid var(--border); border-radius:20px; font-size:.85rem; color:var(--text-dim); }
.filter-btn.active{ background: var(--accent); color:#FFFFFF; border-color:var(--accent); font-weight:600; }
.prod-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.prod-thumb{ height:150px; background: linear-gradient(135deg, var(--bg-panel-2), var(--bg-panel)); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:1.6rem; color: var(--accent); }
.prod-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.prod-body .cat{ font-family:var(--mono); font-size:.7rem; color: var(--text-faint); }
.prod-body h3{ margin:0; font-size:1rem; }
.prod-body p{ margin:0; color:var(--text-dim); font-size:.85rem; flex:1; }
.prod-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.prod-price{ font-weight:800; font-family: var(--mono); }
.cart-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; border-radius:50%; background: var(--spark); color:#FFFFFF;
  font-size:.68rem; font-weight:800; padding:0 4px; margin-inline-start:4px;
}

/* ===== Checkout ===== */
.checkout-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap:30px; align-items:start; }
.cart-item{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--border); }
.cart-item .name{ font-weight:600; font-size:.94rem; }
.cart-item .cat{ font-size:.78rem; color:var(--text-faint); font-family:var(--mono); }
.sum-row{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--text-dim); margin-bottom:10px; }
.sum-row.total{ color:var(--text); font-weight:800; font-size:1.1rem; border-top:1px solid var(--border); padding-top:14px; margin-top:6px; }
.gateway-option{ display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; margin-bottom:10px; }
.gateway-option.selected{ border-color: var(--accent); background: rgba(30,142,90,.06); }
.gateway-option img, .gateway-option .gw-icon{ width:34px; height:34px; border-radius:6px; background: var(--bg-panel-2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.7rem; color: var(--accent); }
.notice{
  font-size:.82rem; color: var(--text-dim); background: var(--bg-panel-2);
  border:1px dashed var(--border); border-radius:8px; padding:12px 14px; margin-top:16px;
}
.paid-screen{ text-align:center; padding: 60px 20px; }
.paid-check{
  width:64px; height:64px; border-radius:50%; background: rgba(21,156,99,.1); color: var(--spark);
  display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin: 0 auto 22px;
}

/* ===== CTA band ===== */
.cta-band{
  border-radius: 16px; padding: 54px 46px; text-align:center;
  background: var(--bg-panel); border:1px solid var(--border); position:relative; overflow:hidden;
}
.cta-band h2{ font-size:1.8rem; margin:0 0 12px; font-weight:800; }
.cta-band p{ color:var(--text-dim); margin:0 0 26px; }

/* ===== Footer ===== */
footer{ border-top:1px solid var(--border); padding: 46px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:30px; margin-bottom:36px; }
.footer-grid h4{ font-size:.86rem; margin:0 0 14px; color: var(--text-dim); }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color: var(--text-faint); font-size:.86rem; }
.footer-grid a:hover{ color: var(--text); }
.footer-bottom{ display:flex; justify-content:space-between; color: var(--text-faint); font-size:.8rem; border-top:1px solid var(--border); padding-top:22px; }

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:26px; left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-panel-2); border:1px solid var(--border); color: var(--text);
  padding:13px 20px; border-radius:8px; font-size:.88rem; z-index:100;
  opacity:0; pointer-events:none; transition: all .25s ease;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .dash{ grid-template-columns: 1fr; }
  .dash-side{ position:static; }
  .checkout-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .nav-links{ display:none; }
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .field-row{ grid-template-columns: 1fr; }
  .hero-stats{ flex-wrap:wrap; gap:20px; }
  .steps{ flex-wrap:wrap; }
}

/* ===== AMIRALI PREMIUM UI 2026 ===== */
:root{
  --bg:#050914; --bg-panel:#0a1222; --bg-panel-2:#0f1930;
  --border:rgba(128,151,255,.16); --text:#f4f7ff; --text-dim:#a9b4ca; --text-faint:#69758f;
  --accent:#7657ff; --accent-dim:rgba(118,87,255,.13); --spark:#27e0b1; --danger:#ff667a;
  --radius-sm:10px; --radius:18px; --font:'Vazirmatn',sans-serif; --container:1180px;
  --term-bg:#060b16; --term-bg-2:#0a1220; --term-border:rgba(118,87,255,.22);
}
body{background:radial-gradient(circle at 80% 0%,rgba(86,56,255,.12),transparent 30%),var(--bg);color:var(--text);}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 75%);z-index:-1}
.nav{background:rgba(5,9,20,.76);border-bottom:1px solid rgba(128,151,255,.12);backdrop-filter:blur(20px)}
.nav .wrap{height:76px}.nav-links{gap:24px}.nav-links a{color:#aeb8cf;font-size:.86rem}.nav-links a:hover{color:#fff}.brand{color:#fff}.brand .dot{background:linear-gradient(135deg,#7a5cff,#20e1b0);width:11px;height:11px;box-shadow:0 0 18px rgba(118,87,255,.7)}
.btn{border-radius:12px;padding:12px 20px;box-shadow:none}.btn-primary{background:linear-gradient(135deg,#805dff,#5a42e8);box-shadow:0 12px 30px rgba(101,72,242,.24)}.btn-primary:hover{background:linear-gradient(135deg,#8b6aff,#6349ee);transform:translateY(-2px)}.btn-ghost{color:#e8edfa;border-color:rgba(146,161,205,.2);background:rgba(255,255,255,.025)}.btn-ghost:hover{border-color:rgba(118,87,255,.6);background:rgba(118,87,255,.08)}.btn-spark{background:linear-gradient(135deg,#1bd9ad,#22b99a);color:#03120e}
.hero{padding:78px 0 68px;border-bottom:1px solid rgba(128,151,255,.1);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:520px;height:520px;left:-250px;top:-180px;background:radial-gradient(circle,rgba(39,224,177,.09),transparent 68%);pointer-events:none}.hero .wrap{grid-template-columns:1.08fr .92fr;gap:46px}.hero-copy{position:relative;z-index:2}.eyebrow-tag{background:rgba(39,224,177,.07);border-color:rgba(39,224,177,.25);color:#55edc6;border-radius:999px;padding:7px 13px;margin-bottom:20px}.eyebrow-tag i{width:7px;height:7px;border-radius:50%;background:#27e0b1;box-shadow:0 0 12px #27e0b1}.hero h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.17;letter-spacing:-1.5px;margin-bottom:22px}.hero h1 span,.about-copy h2 span{background:linear-gradient(90deg,#9a82ff,#26dfb2);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p.lead{color:#aeb8cd;font-size:1rem;max-width:52ch;line-height:2;margin-bottom:30px}.hero-actions{margin-bottom:36px}.hero-stats{gap:0}.hero-stats div{padding-left:26px;margin-left:26px;border-left:1px solid rgba(146,161,205,.15)}.hero-stats div:first-child{padding-left:0;margin-left:0;border-left:0}.hero-stats div b{font-size:1.35rem}.hero-stats div span{color:#6f7c96}
.hero-visual{min-height:500px;position:relative;display:flex;align-items:center;justify-content:center}.hero-glow{position:absolute;width:410px;height:410px;border-radius:50%;background:radial-gradient(circle,rgba(111,78,255,.32),rgba(39,224,177,.08) 45%,transparent 72%);filter:blur(10px)}.portrait-frame{position:relative;width:min(390px,90%);height:490px;border-radius:28px;overflow:hidden;border:1px solid rgba(139,121,255,.4);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 80px rgba(91,64,255,.16);background:#10182a}.portrait-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(5,9,20,.85) 100%)}.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.9) contrast(1.03)}.portrait-badge{position:absolute;z-index:2;right:20px;bottom:18px;display:flex;flex-direction:column;padding:10px 13px;border-radius:12px;background:rgba(7,11,24,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}.portrait-badge b{font-family:var(--mono);font-size:.72rem;letter-spacing:1px}.portrait-badge span{font-size:.65rem;color:#9ba7c0;direction:ltr}.floating-card{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid rgba(142,155,211,.18);background:rgba(8,13,27,.78);backdrop-filter:blur(16px);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.28)}.floating-card b{display:block;font-size:.74rem}.floating-card small{display:block;color:#7e8aa2;font-size:.64rem}.floating-card-top{top:70px;left:0}.floating-card-bottom{bottom:50px;right:-8px}.pulse{width:9px;height:9px;border-radius:50%;background:#2de0ae;box-shadow:0 0 0 5px rgba(45,224,174,.08),0 0 15px #2de0ae}.mini-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(118,87,255,.16);color:#9c87ff}
.term{margin-top:26px;box-shadow:0 25px 70px rgba(0,0,0,.35);display:none}
.section{padding:92px 0}.section-alt{background:rgba(11,18,34,.62);border-color:rgba(128,151,255,.1)}.section-head{margin-bottom:42px}.section-head .kicker,.kicker{color:#8d76ff}.section-head h2{font-size:clamp(1.8rem,3vw,2.55rem);letter-spacing:-.5px}.section-head p{color:#8591aa}.card{background:linear-gradient(180deg,rgba(15,25,48,.9),rgba(9,16,31,.94));border-color:rgba(133,151,211,.13);box-shadow:0 18px 55px rgba(0,0,0,.16)}.card:hover{border-color:rgba(125,101,255,.42);transform:translateY(-4px)}
.about-section{position:relative}.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}.about-photo{padding:0;overflow:hidden;position:relative;min-height:520px}.about-photo img{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:center top}.about-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,8,18,.9))}.photo-caption{position:absolute;z-index:2;bottom:22px;right:22px;left:22px;display:flex;align-items:end;gap:13px}.photo-caption span{font-family:var(--mono);color:#8d76ff;font-size:.72rem}.photo-caption b{display:block;font-size:1.05rem}.photo-caption small{display:block;color:#98a4bb;font-size:.72rem;margin-right:auto}.about-copy h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.35;margin:8px 0 18px}.about-copy>p{color:#9ba7bd;max-width:58ch;line-height:2}.about-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0}.about-points div{padding:14px;border:1px solid rgba(128,151,255,.12);border-radius:13px;background:rgba(255,255,255,.02)}.about-points b{font-family:var(--mono);color:#7e68ff;font-size:.7rem;display:block;margin-bottom:5px}.about-points span{font-size:.84rem;color:#dbe1ef}
.service-card{padding:28px}.icon{background:linear-gradient(135deg,rgba(118,87,255,.18),rgba(39,224,177,.08));color:#9b87ff;border:1px solid rgba(118,87,255,.18)}.service-card p,.port-body p{color:#8e9ab1}.tag{border-color:rgba(128,151,255,.15);color:#8390a8;background:rgba(255,255,255,.015)}
.port-thumb{height:210px;background:linear-gradient(135deg,#10182c,#0a1020);border-color:rgba(128,151,255,.1);position:relative;overflow:hidden}.port-thumb:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(118,87,255,.22),transparent 45%)}.port-body{background:rgba(6,11,23,.35)}.port-body .cat{color:#34dcb2}.port-body h3{font-size:1.08rem}
.price-card{padding:28px}.price-card .amount{font-size:1.9rem}.price-card.featured{background:linear-gradient(180deg,rgba(62,43,130,.24),rgba(10,18,35,.96));border-color:rgba(128,94,255,.65);box-shadow:0 25px 70px rgba(76,50,220,.18)}.price-card .badge{background:linear-gradient(90deg,#7d5bff,#26dcb0);color:#061019;border-radius:999px}.price-card li{color:#9aa6bd}
.field label{color:#8e9ab1}.field input,.field textarea,.field select{background:#080f1e;border-color:rgba(128,151,255,.16);color:#f1f4fb}.field input::placeholder,.field textarea::placeholder{color:#56637d}.field input:focus,.field textarea:focus,.field select:focus{border-color:#7258f8;box-shadow:0 0 0 4px rgba(114,88,248,.08)}
.chip{border-color:rgba(128,151,255,.15);color:#98a4bb;background:rgba(255,255,255,.015)}.chip.checked{border-color:#775aff;color:#a895ff;background:rgba(118,87,255,.1)}
.auth-wrap{margin:90px auto}.auth-card{background:linear-gradient(180deg,#0d1629,#080f1d);border:1px solid rgba(128,151,255,.17);box-shadow:0 30px 80px rgba(0,0,0,.4)}.auth-tabs{border-color:rgba(128,151,255,.15)}.auth-tab{background:#080f1d;color:#8390a8}.auth-tab.active{background:linear-gradient(135deg,#795bff,#5c43e8)}
.dash{padding:55px 0 100px}.dash-user,.dash-nav,.stat-box{background:linear-gradient(180deg,rgba(14,24,45,.92),rgba(8,14,28,.96))}.avatar{background:linear-gradient(135deg,#7c5cff,#25dbb0);box-shadow:0 0 35px rgba(118,87,255,.2)}.dash-nav a{color:#8895ae}.dash-nav a.active,.dash-nav a:hover{background:rgba(118,87,255,.1);color:#fff}.order-row{border-color:rgba(128,151,255,.12);background:rgba(255,255,255,.015)}
.shop-filters{margin-bottom:28px}.filter-btn{background:rgba(255,255,255,.02);border-color:rgba(128,151,255,.14);color:#8f9bb2}.filter-btn.active{background:linear-gradient(135deg,#795bff,#5b42e8);border-color:transparent}.prod-thumb{height:185px;background:linear-gradient(135deg,#121a32,#080e1c);border-color:rgba(128,151,255,.1)}.prod-body{background:rgba(8,13,25,.25)}
.checkout-grid{gap:26px}.gateway-option{border-color:rgba(128,151,255,.14);background:rgba(255,255,255,.015)}.gateway-option.selected{border-color:#7657ff;background:rgba(118,87,255,.08)}.notice{background:rgba(118,87,255,.05);border-color:rgba(118,87,255,.2);color:#909db6}
.cta-band{padding:65px 46px;background:radial-gradient(circle at 50% 20%,rgba(118,87,255,.2),transparent 55%),linear-gradient(135deg,#0d1730,#0a1121);border-color:rgba(118,87,255,.25);box-shadow:0 30px 80px rgba(0,0,0,.24)}.cta-band:after{content:"";position:absolute;inset:auto 10% -100px 10%;height:160px;background:rgba(39,224,177,.1);filter:blur(60px)}
footer{background:#040812;border-color:rgba(128,151,255,.1)}.footer-grid a{color:#6f7c96}.footer-grid a:hover{color:#dce3f2}.footer-bottom{border-color:rgba(128,151,255,.1)}
.toast{background:#101a30;border-color:rgba(128,151,255,.2);color:#f0f3fb;box-shadow:0 20px 50px rgba(0,0,0,.3)}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-visual{min-height:440px}.portrait-frame{height:440px}.about-grid{grid-template-columns:1fr;gap:38px}.about-photo,.about-photo img{min-height:460px}.floating-card-top{left:5%}.floating-card-bottom{right:3%}}
@media(max-width:640px){.nav .wrap{height:66px}.nav-links{display:none}.nav-cta .btn{padding:9px 12px;font-size:.76rem}.hero{padding:55px 0}.hero h1{font-size:2.25rem}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.hero-stats div{padding:0;margin:0;border:0!important}.hero-stats div b{font-size:1.1rem}.hero-stats div span{font-size:.68rem}.hero-visual{min-height:390px}.portrait-frame{height:390px;width:86%}.floating-card{transform:scale(.88)}.floating-card-top{top:30px;left:0}.floating-card-bottom{bottom:25px;right:-2px}.section{padding:70px 0}.about-photo,.about-photo img{min-height:420px}.about-points{grid-template-columns:1fr}.cta-band{padding:45px 22px}}

.port-thumb img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:transform .5s ease,opacity .3s ease;position:relative;z-index:1}.port-card:hover .port-thumb img{transform:scale(1.05);opacity:1}.port-thumb:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 35%,rgba(5,9,20,.55));pointer-events:none}

/* ===== Admin / account navigation ===== */
.admin-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-page .card{box-shadow:0 8px 30px rgba(20,32,25,.06)}
.order-row{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:10px;background:#fff}
@media(max-width:760px){.nav-links{display:none}.nav .wrap{height:auto;min-height:64px;padding-top:10px;padding-bottom:10px}.nav-cta{gap:6px}.nav-cta .btn{padding:7px 10px;font-size:.78rem}.wrap{padding-left:16px;padding-right:16px}}

/* ===== Premium authentication flow ===== */
.auth-page{min-height:100vh;background:radial-gradient(circle at 50% 10%,rgba(124,92,255,.12),transparent 35%),var(--bg)}
.auth-shell{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:60px 20px}
.auth-card{width:min(520px,100%);padding:34px;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.auth-brand-mark{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin:0 auto 14px;background:linear-gradient(135deg,#7c5cff,#25dbb0);color:#fff;font-size:25px;box-shadow:0 12px 30px rgba(124,92,255,.25)}
.auth-card>h1{text-align:center;margin:0;font-size:1.7rem}.auth-subtitle{text-align:center;color:var(--text-dim);margin:8px 0 26px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:13px;margin-bottom:18px}.auth-tab{border:0;background:transparent;color:var(--text-dim);padding:11px;border-radius:9px;cursor:pointer;font:inherit}.auth-tab.active{background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(37,219,176,.09));color:#fff}
.auth-panel{display:none}.auth-panel.active{display:block}.auth-step{display:none}.auth-step.active{display:block}.auth-step h2{font-size:1.15rem;margin:22px 0 8px}.auth-link-row{text-align:center;margin:16px 0 0;color:var(--text-dim)}.auth-link-row a{color:var(--accent);text-decoration:none}.optional{font-size:.75em;color:var(--text-faint);font-weight:normal}.password-wrap{position:relative}.password-wrap input{padding-left:78px}.password-toggle{position:absolute;left:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--accent);cursor:pointer;font:inherit;font-size:.8rem;padding:7px}.otp-input{text-align:center!important;direction:ltr;letter-spacing:8px;font-size:1.35rem;font-family:var(--mono)}.step-indicator{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px}.step-indicator span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);color:var(--text-faint);font-size:.78rem}.step-indicator span.active,.step-indicator span.done{background:rgba(124,92,255,.18);border-color:rgba(124,92,255,.5);color:#fff}.step-indicator i{width:42px;height:1px;background:var(--border)}.step-indicator i.done{background:rgba(37,219,176,.5)}.auth-msg{min-height:0;margin:0 0 14px;padding:0;border-radius:10px;font-size:.9rem}.auth-msg:not(:empty){padding:11px 13px}.auth-msg.error{background:rgba(255,80,100,.09);border:1px solid rgba(255,80,100,.22);color:#ff9daa}.auth-msg.ok{background:rgba(37,219,176,.08);border:1px solid rgba(37,219,176,.2);color:#75f0d0}.security-note{font-size:.75rem;line-height:1.8;text-align:center;color:var(--text-faint);margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border)}.nav-auth{display:flex;gap:10px;align-items:center}
@media(max-width:700px){.auth-shell{padding:30px 14px}.auth-card{padding:24px 18px}.auth-card>h1{font-size:1.45rem}.auth-subtitle{font-size:.85rem}.nav-links{display:none}}

/* ===== Demo verification ===== */
.demo-code-box{
  margin:-4px 0 18px;padding:16px 18px;border:1px solid rgba(39,224,177,.28);
  border-radius:14px;background:rgba(39,224,177,.06);text-align:center;
}
.demo-code-box span,.demo-code-box small{display:block;color:var(--text-faint);font-size:.76rem}
.demo-code-box strong{display:block;font:800 2rem/1.2 var(--mono);letter-spacing:.2em;color:var(--spark);direction:ltr;margin:5px 0}
.demo-code-box small{color:var(--text-dim)}
.admin-user-detail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.admin-detail-item{padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.018)}
.admin-detail-item span{display:block;color:var(--text-faint);font-size:.72rem;margin-bottom:5px}
.admin-detail-item b{font-size:.9rem;word-break:break-word}
.detail-panel{margin-top:12px;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--bg-panel-2)}
.detail-panel h4{margin:0 0 12px}
@media(max-width:700px){.admin-user-detail{grid-template-columns:1fr 1fr}}