/* ============================================================
   Sam Sufi Iranian Trading Co. — سام صوفی ایرانیان
   Design system: navy + silver, Persian geometric seal motif
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- Color tokens --- */
  --navy-950:#080e18;
  --navy-900:#0c1729;
  --navy-800:#122238;
  --navy-700:#1a2f4d;
  --navy-600:#233f63;

  --blue-600:#2c5aa0;
  --blue-500:#3d6fbf;
  --blue-400:#6e9bd1;
  --blue-300:#9dbde3;

  --silver-400:#aab7c4;
  --silver-300:#c9d2dc;
  --silver-200:#dde4ea;
  --silver-100:#eef2f6;

  --gold-600:#a97d33;
  --gold-500:#c9a04a;
  --gold-400:#dab876;

  --paper:#f5f7fa;
  --paper-2:#ffffff;

  --ink-900:#0e1420;
  --ink-700:#39485c;
  --ink-500:#6b7c91;
  --ink-300:#a7b4c2;

  --line: rgba(201,210,220,0.16);
  --line-soft: rgba(14,20,32,0.08);

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;

  --font-display:'Vazirmatn', sans-serif;
  --font-body:'Vazirmatn', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --ease:cubic-bezier(.16,.8,.24,1);
  --dur-s:.25s;
  --dur-m:.6s;
  --dur-l:1.1s;

  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[dir="rtl"] body{ font-feature-settings:"ss01" 1; }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; cursor:pointer; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* Numerals: registration / mono data */
.mono{ font-family:var(--font-mono); letter-spacing:.02em; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--blue-400);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding:18px 0;
  transition:padding var(--dur-s) var(--ease), background var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.site-header.is-scrolled{
  padding:10px 0;
  background:rgba(8,14,24,0.82);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -18px rgba(0,0,0,.6);
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ height:38px; width:auto; flex:none; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-weight:800; font-size:16px; color:var(--silver-100); letter-spacing:.01em; }
.brand-sub{ font-size:10px; color:var(--silver-400); font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  position:relative; display:inline-block; padding:8px 14px; font-size:14px; font-weight:500;
  color:var(--silver-200);
}
.nav-links a::after{
  content:""; position:absolute; inset-inline:14px; bottom:4px; height:1px;
  background:var(--blue-400); transform:scaleX(0); transform-origin:center;
  transition:transform var(--dur-s) var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ transform:scaleX(1); }
.nav-links a.is-active{ color:#fff; }

.header-actions{ display:flex; align-items:center; gap:10px; }
.lang-toggle{
  border:1px solid var(--line); background:transparent; color:var(--silver-100);
  border-radius:999px; padding:7px 16px; font-size:12px; font-weight:600; font-family:var(--font-mono);
  letter-spacing:.06em; transition:border-color var(--dur-s), background var(--dur-s), color var(--dur-s);
}
.lang-toggle:hover{ border-color:var(--blue-400); color:#fff; }

.nav-toggle{
  display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:transparent; position:relative;
}
.nav-close{ display:none; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; inset-inline-start:9px; width:20px; height:1.5px; background:var(--silver-100);
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav-toggle span{ top:18px; }
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0; top:0; z-index:99;
    background:var(--navy-950); flex-direction:column; justify-content:center; gap:6px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  }
  .nav-links.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-links a{ font-size:22px; padding:14px 20px; }
  .nav-toggle{ display:block; }

  /* backdrop-filter on the header creates a new containing block for
     position:fixed descendants, which shrinks the fullscreen mobile
     menu down to the header's own box once .is-scrolled is active.
     Drop it while the menu is open so .nav-links stays fixed to the viewport. */
  .site-header.menu-open{ backdrop-filter:none; }

  .nav-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:20px; inset-inline-end:20px;
    width:40px; height:40px; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:transparent; color:var(--silver-100);
  }
  .nav-close:hover{ border-color:var(--blue-400); color:#fff; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(61,111,191,.22), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 60%, var(--navy-800));
  color:var(--silver-100); overflow:hidden;
  padding-top:100px; padding-bottom:56px;
}
.hero-lines{ position:absolute; inset:0; opacity:.35; pointer-events:none; }
.hero-lines svg{ width:100%; height:100%; }

/* ============================================================
   Ambient background decoration (reusable on dark sections)
   ============================================================ */
.bg-orbs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.bg-orbs .orb{ position:absolute; border-radius:50%; filter:blur(70px); }
.bg-orbs .orb.blue{
  width:440px; height:440px; top:-160px; inset-inline-start:-120px;
  background:radial-gradient(circle, var(--blue-500), transparent 72%); opacity:.32;
  animation:orbFloatA 19s ease-in-out infinite alternate;
}
.bg-orbs .orb.gold{
  width:380px; height:380px; bottom:-140px; inset-inline-end:-100px;
  background:radial-gradient(circle, var(--gold-500), transparent 72%); opacity:.22;
  animation:orbFloatB 23s ease-in-out infinite alternate;
}
.bg-orbs .orb.small{
  width:220px; height:220px; top:35%; inset-inline-end:8%;
  background:radial-gradient(circle, var(--blue-300), transparent 72%); opacity:.16;
  animation:orbFloatC 15s ease-in-out infinite alternate;
}
@keyframes orbFloatA{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(60px,45px) scale(1.15); } }
@keyframes orbFloatB{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-50px,-40px) scale(1.12); } }
@keyframes orbFloatC{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-30px,30px) scale(1.2); } }

.bg-grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:54px 54px;
  opacity:.3;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, black 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%, black 30%, transparent 78%);
  animation:gridDrift 34s linear infinite;
}
@keyframes gridDrift{ from{ background-position:0 0, 0 0; } to{ background-position:54px 54px, 54px 54px; } }

/* Hero image carousel */
.hero-carousel{
  position:relative; z-index:2; width:100%; max-width:760px; margin:0 auto;
  aspect-ratio:1.54; border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -28px rgba(0,0,0,.6);
  background:var(--navy-950);
}

.carousel-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); }
.carousel-slide.is-active{ opacity:1; z-index:1; }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.hero-carousel::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:100px; z-index:2;
  background:linear-gradient(to top, rgba(4,7,13,.78), transparent); pointer-events:none;
}

.carousel-arrow{
  position:absolute; bottom:12px; z-index:3;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(8,14,24,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:18px; line-height:1; cursor:pointer; transition:background var(--dur-s), transform var(--dur-s);
}
.carousel-arrow:hover{ background:rgba(8,14,24,.85); }
.carousel-arrow.prev{ left:14px; }
.carousel-arrow.next{ right:14px; }

.carousel-dots{ position:absolute; bottom:16px; inset-inline:0; z-index:3; display:flex; gap:9px; justify-content:center; }
.dot{
  width:9px; height:9px; border-radius:50%; padding:0; border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.25); cursor:pointer; transition:background var(--dur-s), transform var(--dur-s);
}
.dot.is-active{ background:#fff; transform:scale(1.2); }

.hero-inner{
  position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:20px; max-width:780px; margin:40px auto 0;
}

.eyebrow{
  font-family:var(--font-mono); font-size:16px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-300); display:flex; align-items:center; gap:12px; opacity:0; animation:riseIn .8s var(--ease) forwards .3s;
}
.eyebrow::before, .eyebrow::after{ content:""; width:28px; height:1px; background:var(--blue-400); opacity:.6; flex:none; }
@media (max-width:480px){
  .eyebrow{ font-size:13px; letter-spacing:.08em; gap:8px; }
  .eyebrow::before, .eyebrow::after{ width:16px; }
}

.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.6rem); font-weight:800; line-height:1.08; letter-spacing:-.01em;
  opacity:0; animation:riseIn .9s var(--ease) forwards .45s;
}
.hero h1 .hl{ color:var(--blue-300); }

.hero p.lede{
  font-size:clamp(1rem,2vw,1.2rem); color:var(--silver-300); max-width:600px; line-height:1.8;
  opacity:0; animation:riseIn .9s var(--ease) forwards .65s;
}

@keyframes riseIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; opacity:0; animation:riseIn .9s var(--ease) forwards .85s; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:700; position:relative; overflow:hidden; transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
  border:1px solid transparent;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:linear-gradient(120deg, var(--blue-500), var(--blue-600)); color:#fff; box-shadow:0 10px 24px -10px rgba(44,90,160,.6); }
.btn-primary:hover{ box-shadow:0 16px 32px -12px rgba(44,90,160,.75); }
.btn-ghost{ border-color:var(--line); color:var(--silver-100); }
.btn-ghost:hover{ border-color:var(--blue-400); background:rgba(110,155,209,.08); }
.btn-dark{ border-color:var(--line-soft); color:var(--ink-900); }
.btn-dark:hover{ border-color:var(--blue-500); background:rgba(44,90,160,.06); }

/* ============================================================
   Credentials plaque
   ============================================================ */
.plaque{
  background:var(--navy-800); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 0; position:relative;
}
.plaque .container{
  display:flex; flex-wrap:wrap; gap:20px 40px; justify-content:center; align-items:center;
}
.plaque-item{ display:flex; align-items:center; gap:10px; color:var(--silver-300); font-size:13px; }
.plaque-item .k{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--blue-300); }
.plaque-item .v{ font-family:var(--font-mono); color:var(--silver-100); font-size:13px; }
.plaque-sep{ width:1px; height:16px; background:var(--line); }
@media (max-width:700px){ .plaque-sep{ display:none; } }

/* ============================================================
   Section base
   ============================================================ */
.section{ padding:110px 0; position:relative; }
.section-tight{ padding:70px 0; }
.section-dark{ background:var(--navy-950); color:var(--silver-100); }
.section-navy{ background:var(--navy-900); color:var(--silver-100); }

.section-head{ max-width:640px; margin-bottom:56px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500); margin-bottom:14px;
}
.section-dark .kicker, .section-navy .kicker{ color:var(--blue-300); }
.kicker::before{ content:""; width:16px; height:1px; background:currentColor; }
.section-head h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:800; line-height:1.22; letter-spacing:-.01em; }
.section-head p{ margin-top:14px; color:var(--ink-500); line-height:1.85; font-size:1rem; }
.section-dark .section-head p, .section-navy .section-head p{ color:var(--silver-300); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ============================================================
   About teaser / split
   ============================================================ */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:40px; } }

.board-list{ margin-top:28px; display:flex; flex-direction:column; gap:18px; }
.board-item{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.board-item .name{ font-weight:700; font-size:16px; }
.board-item .role{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); white-space:nowrap; }

.art-panel{
  aspect-ratio:1/1; border-radius:var(--radius-lg); background:radial-gradient(60% 60% at 50% 40%, var(--navy-800), var(--navy-950));
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  border:1px solid var(--line);
}
.art-panel .art-rings{ position:absolute; inset:0; width:100%; height:100%; }
.art-panel .ring{ fill:none; stroke:var(--line); stroke-width:1; }
.art-panel .art-mark{ width:56%; height:auto; position:relative; z-index:1; }

/* ============================================================
   Cards / services
   ============================================================ */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius-md); overflow:hidden; }
@media (max-width:900px){ .card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .card-grid{ grid-template-columns:1fr; } }

.card{
  background:var(--paper-2); padding:34px 28px; display:flex; flex-direction:column; gap:14px;
  transition:background var(--dur-s) var(--ease);
}
.card:hover{ background:var(--paper); }
.card .num{ font-family:var(--font-mono); font-size:12px; color:var(--blue-500); }
.card-icon{ width:38px; height:38px; }
.card-icon path, .card-icon rect, .card-icon circle{ stroke:var(--blue-600); }
.card h3{ font-size:1.05rem; font-weight:700; color:var(--ink-900); }
.card p{ font-size:.9rem; color:var(--ink-500); line-height:1.75; }

/* ============================================================
   Affiliates
   ============================================================ */
.affiliate-strip{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.affiliate-badge{
  display:flex; align-items:center; gap:10px; padding:14px 24px; border:1px solid var(--line-soft);
  border-radius:999px; font-weight:700; font-size:14px; color:var(--ink-700);
  transition:border-color var(--dur-s), background var(--dur-s);
}
.affiliate-badge:hover{ border-color:var(--blue-500); background:rgba(44,90,160,.05); }
.affiliate-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-500); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  background:linear-gradient(120deg, var(--navy-900), var(--navy-800));
  border-radius:var(--radius-lg); padding:60px; display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap; color:var(--silver-100); position:relative; overflow:hidden;
}
.cta-band h3{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; max-width:480px; }
.cta-band p{ color:var(--silver-300); margin-top:8px; }
.cta-band > *:not(.bg-orbs){ position:relative; z-index:1; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.info-row{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line-soft); }
.info-row .ic{ width:22px; height:22px; flex:none; margin-top:2px; }
.info-row .ic path{ stroke:var(--blue-600); }
.info-row .k{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500); margin-bottom:4px; }
.info-row .v{ font-size:.98rem; line-height:1.7; }
.info-row .pending{ color:var(--ink-500); font-style:italic; }

.form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:12px; font-family:var(--font-mono); letter-spacing:.05em; color:var(--ink-500); }
.field input, .field textarea{
  border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:13px 15px; font:inherit;
  background:var(--paper-2); color:var(--ink-900); transition:border-color var(--dur-s), box-shadow var(--dur-s);
}
.field input:focus, .field textarea:focus{ border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(44,90,160,.12); outline:none; }
.field textarea{ resize:vertical; min-height:130px; }

.map-frame{ border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line-soft); aspect-ratio:16/10; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--navy-950); color:var(--silver-300); padding:70px 0 26px; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:46px; border-bottom:1px solid var(--line); }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
.footer-grid h4{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--blue-300); margin-bottom:16px; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{ font-size:14px; color:var(--silver-300); transition:color var(--dur-s); }
.footer-links a:hover{ color:#fff; }
.footer-bottom{ padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--ink-300); font-family:var(--font-mono); }

.credit-mark{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-300); opacity:.7; transition:opacity var(--dur-s), color var(--dur-s); }
.credit-mark:hover{ opacity:1; color:var(--silver-100); }
.credit-mark svg{ width:16px; height:16px; }

/* Page hero (inner pages) */
.page-hero{
  background:linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color:var(--silver-100); padding:160px 0 70px; position:relative; overflow:hidden;
}
.page-hero .kicker{ color:var(--blue-300); }
.page-hero h1{ font-size:clamp(2rem,4.4vw,3.2rem); font-weight:800; margin-top:12px; }
.page-hero p{ margin-top:16px; max-width:560px; color:var(--silver-300); line-height:1.8; }

/* Breadcrumb-ish micro nav */
.crumbs{ font-family:var(--font-mono); font-size:11px; color:var(--blue-300); letter-spacing:.08em; text-transform:uppercase; }