/* ==========================================================================
   ScoutMe — أنماط الموقع (RTL، متجاوب: سطح المكتب + الجوال)
   ========================================================================== */
:root{
  color-scheme: light;
  --navy: #142645;
  --navy-2: #0D1B33;
  --navy-3: #1D3766;
  --gold: #F5B700;
  --gold-ink: #17223D;
  --blue: #2F6FED;
  --green: #1DA45B;
  --green-soft: #E5F7EC;
  --blue-soft: #E9F0FF;
  --warn: #B8860B;
  --warn-soft: #FCF3D9;
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --ink: #16213B;
  --ink-soft: #566076;
  --ink-faint: #7C8496;
  --border: #E3E6EC;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,38,69,.05), 0 6px 20px rgba(20,38,69,.07);
  --shadow-lg: 0 2px 4px rgba(20,38,69,.06), 0 14px 34px rgba(20,38,69,.13);
  --container: 1200px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px; line-height: 1.65; direction: rtl;
}
body.has-modal{ overflow:hidden; }
img, svg{ max-width:100%; }
img{ display:block; }
a{ color: inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-weight:800; line-height:1.3; margin:0 0 .5em; }
p{ margin:0 0 1em; }
button, input, select, textarea{ font-family:inherit; }
button{ cursor:pointer; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

.sm-container{ max-width: var(--container); margin-inline:auto; padding-inline:20px; }
.sm-page{ padding-block:36px 56px; min-height:60vh; }
.sm-empty{ color: var(--ink-faint); padding: 24px 0; text-align:center; }

/* Icons */
.ico{ display:inline-flex; width:1.15em; height:1.15em; flex-shrink:0; vertical-align:middle; }
.ico svg{ width:100%; height:100%; display:block; }

/* Buttons */
.sm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px; border-radius: 10px; font-weight:800; font-size:15px; line-height:1.2;
  border: 1.5px solid transparent; transition: transform .1s ease, background .15s ease, box-shadow .15s ease;
  min-height:44px; text-align:center; white-space:nowrap;
}
.sm-btn:hover{ box-shadow: 0 4px 14px rgba(20,38,69,.16); }
.sm-btn:active{ transform: scale(.98); }
.sm-btn--sm{ padding:9px 12px; font-size:13.5px; min-height:40px; }
.sm-btn--primary, .sm-btn--whatsapp{ background: var(--gold); color: var(--gold-ink); }
.sm-btn--primary:hover, .sm-btn--whatsapp:hover{ background:#FFC61A; }
.sm-btn--navy{ background: var(--navy); color:#fff; }
.sm-btn--navy:hover{ background: var(--navy-3); }
.sm-btn--blue{ background: var(--blue); color:#fff; }
.sm-btn--soft{ background: var(--blue-soft); color: var(--blue); }
.sm-btn--soft:hover{ background:#DCE8FF; }
.sm-btn--outline{ background:#fff; border-color: var(--navy); color: var(--navy); }
.sm-btn--outline:hover{ background: var(--bg); }
.sm-btn--whatsapp-outline{ border-color: rgba(255,255,255,.3); color:#fff; background: rgba(255,255,255,.06); }
.sm-btn--whatsapp-outline:hover{ background: rgba(255,255,255,.14); box-shadow:none; }
.sm-btn--block{ width:100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.sm-header{ background: var(--navy); position: sticky; top:0; z-index:50; box-shadow: 0 2px 12px rgba(13,27,51,.25); }
.sm-header__inner{ display:flex; align-items:center; gap:28px; min-height:68px; }
.sm-logo{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:22px; flex-shrink:0; }
.sm-logo__icon{ width:34px; height:34px; object-fit:contain; flex-shrink:0; }
.sm-logo__accent{ color: var(--gold); }
.sm-nav{ flex:1; display:flex; align-items:center; gap:8px; }
.sm-nav__actions{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; }
.sm-nav__login{ display:block; padding:9px 14px; border-radius:8px; color: rgba(255,255,255,.86); font-weight:700; font-size:15px; white-space:nowrap; }
.sm-nav__login:hover{ background: rgba(255,255,255,.09); color:#fff; }
.sm-nav__login.is-current{ color: var(--gold); }
.sm-nav__list{ display:flex; align-items:center; gap:4px; }
.sm-nav__list a:not(.sm-btn){
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:8px; color: rgba(255,255,255,.86);
  font-weight:700; font-size:15px; white-space:nowrap; transition: background .15s ease, color .15s ease;
}
.sm-nav__list a .ico{ font-size:17px; opacity:.85; }
.sm-nav__list a:not(.sm-btn):hover{ background: rgba(255,255,255,.09); color:#fff; }
.sm-nav__list a.is-current{ color: var(--gold); }
.sm-nav__register .sm-btn{ padding:9px 20px; min-height:42px; }
.sm-nav__toggle{
  display:none; align-items:center; justify-content:center; width:44px; height:44px; margin-inline-start:auto;
  background: rgba(255,255,255,.08); border:0; border-radius:10px; color:#fff; font-size:22px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.sm-hero{ position:relative; background: var(--navy); color:#fff; padding-block:64px 0; overflow:hidden; }
.sm-hero__bg{ position:absolute; inset:0; pointer-events:none; background: url('../img/hero-photo.jpg') center 35% / cover no-repeat; }
.sm-hero__bg::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to left, rgba(13,27,51,.97) 0%, rgba(13,27,51,.9) 34%, rgba(13,27,51,.5) 60%, rgba(13,27,51,.1) 85%, rgba(13,27,51,0) 100%);
}
.sm-hero__inner{ position:relative; }
.sm-hero__copy{ max-width:640px; }
.sm-hero h1{ font-size: clamp(30px, 4.4vw, 46px); margin-bottom:14px; text-wrap:balance; }
.sm-hero__copy > p{ color: rgba(255,255,255,.85); font-size:17px; max-width:52ch; margin-bottom:0; }
.sm-hero__tabs{ display:flex; gap:8px; margin:0 0 12px; flex-wrap:wrap; }
.sm-hero__tab{
  display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); color:#fff;
  padding:10px 18px; border-radius:999px; font-weight:700; font-size:14.5px; min-height:44px;
}
.sm-hero__tab:hover{ background: rgba(255,255,255,.16); }
.sm-hero__tab.is-active{ background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.sm-hero__search{ display:flex; gap:8px; background:#fff; padding:8px; border-radius:14px; box-shadow: var(--shadow-lg); }
.sm-hero__search input, .sm-hero__search select{
  border:1px solid var(--border); border-radius:10px; padding:11px 14px; font-size:15px; color: var(--ink);
  background:#fff; flex:1; min-width:0; min-height:48px;
}
.sm-hero__search input[name="age"]{ flex:0 1 110px; }
.sm-hero__search .sm-btn{ flex-shrink:0; min-width:110px; }

/* Quick links */
.sm-quicklinks{ padding-block:32px 8px; }
.sm-quicklinks__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.sm-quicklink{
  display:flex; align-items:center; gap:14px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding:18px; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.sm-quicklink:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sm-quicklink__icon{ width:46px; height:46px; border-radius:12px; background: var(--blue-soft); color: var(--blue); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.sm-quicklink strong{ display:block; font-size:15px; line-height:1.4; }
.sm-quicklink small{ color: var(--ink-faint); font-size:12.5px; }

/* Sections */
.sm-section{ padding-block:36px 8px; }
.sm-section-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.sm-section-head h2{ font-size:24px; margin:0; }
.sm-section-head a{ display:inline-flex; align-items:center; gap:6px; color: var(--blue); font-weight:800; font-size:14.5px; }
.sm-section-head a .ico{ transform: none; }

.sm-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }

/* Cards (player / coach / team) */
.sm-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sm-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sm-card__media{
  display:flex; align-items:center; justify-content:center; aspect-ratio: 4/5; overflow:hidden;
  background: linear-gradient(160deg, var(--navy-3), var(--navy));
}
.sm-card__media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.sm-card__media--crest{ background:#fff; border-bottom:1px solid var(--border); aspect-ratio: 5/4; }
.sm-card__media--crest img{ object-fit:contain; padding:20px; width:74%; height:74%; }
.sm-card__placeholder{ display:flex; color: rgba(255,255,255,.55); font-size:64px; }
.sm-card__body{ padding:16px; display:flex; flex-direction:column; gap:4px; flex:1; }
.sm-card__name{ font-size:17px; margin:0 0 4px; }
.sm-card__name a:hover{ color: var(--blue); }
.sm-card__meta{ color: var(--ink-soft); font-size:14px; margin:0; display:flex; align-items:center; gap:6px; }
.sm-card__meta .ico{ color: var(--ink-faint); font-size:15px; }
.sm-card__rating{ display:flex; align-items:center; gap:5px; margin:2px 0 0; font-size:14.5px; }
.sm-card__rating .ico{ color: var(--gold); font-size:16px; }
.sm-card__actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:14px; }

.sm-stars{ display:inline-flex; gap:2px; }
.sm-stars .on{ color: var(--gold); }
.sm-stars .off{ color:#D5DAE4; }
.sm-stars .ico{ font-size:16px; }

/* CTA band */
.sm-cta{ margin-top:44px; }
.sm-cta__box{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color:#fff; border-radius:18px;
  padding:36px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.sm-cta__box h2{ font-size:24px; margin:0 0 6px; }
.sm-cta__box p{ color: rgba(255,255,255,.8); margin:0; }
.sm-cta__btns{ display:flex; gap:10px; flex-wrap:wrap; }

/* ==========================================================================
   Listing pages
   ========================================================================== */
.sm-page__head{ margin-bottom:24px; }
.sm-page__head h1{ font-size:30px; margin-bottom:6px; }
.sm-page__head p{ color: var(--ink-soft); margin:0; }
.sm-page__head--row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }

.sm-listing{ display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:start; }
.sm-filters{
  margin-top:38px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); position:sticky; top:88px;
}
.sm-filters__toggle{
  display:none; width:100%; align-items:center; justify-content:space-between; gap:10px; background:none; border:0; padding:14px 18px;
  font-weight:800; font-size:15px; color: var(--ink);
}
.sm-filters__title{ font-size:17px; margin:0; padding:18px 20px 0; }
.sm-filters__form{ padding:16px 20px 20px; }
.sm-field{ margin-bottom:16px; }
.sm-field label{ display:block; font-size:13.5px; font-weight:800; color: var(--ink-soft); margin-bottom:6px; }
.sm-field input, .sm-field select, .sm-field textarea{
  width:100%; padding:11px 12px; border:1px solid #D5DAE4; border-radius:10px; font-size:15px;
  background:#fff; color: var(--ink); min-height:46px;
}
.sm-field textarea{ resize:vertical; min-height:96px; }
.sm-field input:focus, .sm-field select:focus, .sm-field textarea:focus{ border-color: var(--blue); outline:3px solid rgba(47,111,237,.18); outline-offset:0; }
.sm-field.is-invalid input, .sm-field.is-invalid select, .sm-field.is-invalid textarea{ border-color:#D64545; }
.sm-field__error{ color:#C43737; font-size:12.5px; margin-top:4px; display:none; }
.sm-field.is-invalid .sm-field__error{ display:block; }
.sm-field--range .sm-range-inputs{ display:flex; align-items:center; gap:8px; }
.sm-field--range input{ width:0; flex:1; }
.sm-filters__reset{ display:block; text-align:center; margin-top:10px; color: var(--ink-faint); font-size:14px; background:none; border:0; width:100%; padding:8px; }
.sm-filters__reset:hover{ color: var(--ink); }
.sm-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.sm-results-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; color: var(--ink-soft); font-size:14.5px; }
.sm-results-bar strong{ color: var(--ink); }
.sm-listing__results .sm-grid{ grid-template-columns:repeat(3,1fr); }

/* ==========================================================================
   Profile pages (CV layout)
   ========================================================================== */
.sm-crumbs{ display:flex; align-items:center; gap:8px; color: var(--ink-faint); font-size:14px; margin-bottom:18px; }
.sm-crumbs a:hover{ color: var(--blue); }
.sm-cv{ display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start; }
.sm-cv__side{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; position:sticky; top:88px; }
.sm-cv__photo{ aspect-ratio: 5/5.4; background: linear-gradient(160deg, var(--navy-3), var(--navy)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sm-cv__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.sm-cv__photo .sm-card__placeholder{ font-size:96px; }
.sm-cv__photo--crest{ background: linear-gradient(180deg,#F8F9FC,#EEF1F7); aspect-ratio: 4/3; }
.sm-cv__photo--crest img{ object-fit:contain; width:60%; height:75%; }
.sm-cv__body{ padding:22px; }
.sm-cv__name{ font-size:25px; margin:0 0 4px; }
.sm-cv__sub{ color: var(--ink-soft); font-weight:700; margin:0 0 12px; }
.sm-cv__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.sm-tag{ display:inline-flex; align-items:center; gap:6px; background: var(--bg); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:13.5px; font-weight:700; color: var(--ink-soft); }
.sm-tag--accent{ background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.sm-cv__rating{ display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.sm-cv__rating strong{ font-size:18px; }
.sm-cv__rating span{ color: var(--ink-faint); font-size:13.5px; }
.sm-cv__actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }

.sm-facts{ margin:0; }
.sm-facts > div{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
.sm-facts dt{ display:flex; align-items:center; gap:8px; color: var(--ink-soft); font-size:14px; }
.sm-facts dt .ico{ color: var(--ink-faint); }
.sm-facts dd{ margin:0; font-weight:800; font-size:14.5px; text-align:left; }
.sm-facts dd a{ color: var(--blue); }

.sm-cv__main{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.sm-panel{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:24px; }
.sm-panel__title{ display:flex; align-items:center; gap:10px; font-size:19px; margin:0 0 18px; }
.sm-panel__title .ico{ color: var(--gold); font-size:22px; }

.sm-skills{ display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; }
.sm-skill__row{ display:flex; justify-content:space-between; font-weight:700; font-size:14.5px; margin-bottom:7px; }
.sm-skill__row span:last-child{ color: var(--ink-soft); }
.sm-skill__bar{ height:9px; background:#E9EDF4; border-radius:999px; overflow:hidden; }
.sm-skill__bar i{ display:block; height:100%; border-radius:999px; background: linear-gradient(to left, var(--gold), #FFD75A); }

.sm-video{ position:relative; display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:12px; overflow:hidden; padding:0; background: var(--navy-2); }
.sm-video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; opacity:.5; filter: blur(2px); transform: scale(1.05); }
.sm-video.has-poster img{ opacity:1; filter:none; transform:none; object-position:center; }
.sm-video__play{ position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; background: var(--gold); color: var(--gold-ink); display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 6px 24px rgba(0,0,0,.35); transition: transform .15s ease; }
.sm-video:hover .sm-video__play{ transform: scale(1.08); }
.sm-video__label{ position:absolute; bottom:14px; right:16px; color:#fff; font-weight:800; font-size:14px; background: rgba(0,0,0,.45); padding:5px 12px; border-radius:999px; }
.sm-video--empty{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color: var(--ink-faint); background: var(--bg); border:1px dashed #C9CFDB; cursor:default; }
.sm-video--empty .ico{ font-size:34px; }

.sm-rating-summary{ display:flex; align-items:center; gap:18px; padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--border); }
.sm-rating-summary__num{ font-size:40px; font-weight:800; line-height:1; }
.sm-rating-summary small{ display:block; color: var(--ink-faint); margin-top:4px; }
.sm-review{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--border); }
.sm-review:last-child{ border-bottom:0; padding-bottom:0; }
.sm-review__avatar{ width:42px; height:42px; border-radius:50%; background: var(--blue-soft); color: var(--blue); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.sm-review__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.sm-review__top strong{ font-size:14.5px; }
.sm-review p{ margin:0; color: var(--ink-soft); font-size:14.5px; }

.sm-list{ display:flex; flex-direction:column; }
.sm-list li{ display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); font-size:15px; }
.sm-list li:first-child{ padding-top:0; }
.sm-list li:last-child{ border-bottom:0; padding-bottom:0; }
.sm-list li .ico{ color: var(--gold); font-size:20px; margin-top:2px; }
.sm-list--cert li .ico{ color: var(--blue); }

.sm-sticky-cta{ display:none; }

/* ==========================================================================
   Matches
   ========================================================================== */
.sm-match-filters{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:20px; }
.sm-match-type-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.sm-match-type-tab{ padding:9px 18px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-weight:800; font-size:14px; color:var(--ink-soft); min-height:42px; }
.sm-match-type-tab:hover{ border-color: var(--navy); color: var(--navy); }
.sm-match-type-tab.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.sm-match-selects{ display:flex; gap:10px; }
.sm-match-selects select{ padding:9px 12px; border:1px solid #D5DAE4; border-radius:10px; background:#fff; font-size:14.5px; min-height:42px; color: var(--ink); }

.sm-match-list{ display:flex; flex-direction:column; gap:14px; }
.sm-match{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:18px 22px;
  box-shadow: var(--shadow); display:grid; grid-template-columns: minmax(240px, 1.1fr) 1.6fr auto; align-items:center; gap:20px;
  transition: box-shadow .15s ease;
}
.sm-match:hover{ box-shadow: var(--shadow-lg); }
.sm-match__team{ display:flex; align-items:center; gap:14px; min-width:0; }
.sm-match__crest{ width:56px; height:56px; border-radius:50%; background: var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; color: var(--ink-faint); font-size:24px; }
.sm-match__crest img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.sm-match__name{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:17px; }
.sm-dot{ width:10px; height:10px; border-radius:50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); flex-shrink:0; }
.sm-match__title{ color: var(--ink-soft); font-weight:700; font-size:14.5px; }
.sm-match__title:hover{ color: var(--blue); }
.sm-match__facts{ display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; font-size:14.5px; color: var(--ink-soft); }
.sm-match__facts li{ display:flex; align-items:center; gap:8px; }
.sm-match__facts .ico{ color: var(--blue); font-size:18px; }
.sm-match__cta{ min-width:140px; }

.sm-match-single__banner{
  border-radius: var(--radius); padding:38px 24px; text-align:center; color:#fff; margin-bottom:20px;
  background: linear-gradient(160deg, var(--navy-3), var(--navy-2));
}
.sm-match-single__crest{ width:96px; height:96px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); overflow:hidden; font-size:40px; color: var(--ink-faint); }
.sm-match-single__crest img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.sm-match-single__banner h1{ font-size:26px; margin:0 0 6px; display:flex; align-items:center; justify-content:center; gap:10px; }
.sm-match-single__banner p{ margin:0; color: rgba(255,255,255,.8); font-weight:700; font-size:17px; }
.sm-match-single__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.sm-match-single__item{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; box-shadow: var(--shadow); }
.sm-match-single__item .ico{ color: var(--blue); font-size:24px; margin-bottom:6px; }
.sm-match-single__item small{ display:block; color: var(--ink-faint); font-size:12.5px; }
.sm-match-single__item strong{ font-size:15.5px; }
.sm-match-single__actions{ display:flex; justify-content:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.sm-match-single__actions .sm-btn{ min-width:200px; }

/* ==========================================================================
   Forms (register / post match / login)
   ========================================================================== */
.sm-auth-page{ display:flex; justify-content:center; }
.sm-auth-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:32px; width:100%; max-width:640px; }
.sm-auth-card__brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; color: var(--navy); margin-bottom:6px; }
.sm-auth-card__brand .ico{ color: var(--gold); font-size:26px; }
.sm-auth-card__sub{ color: var(--ink-soft); margin-bottom:22px; }
.sm-form-note{ font-size:13px; color: var(--ink-faint); text-align:center; margin:14px 0 0; }

.sm-auth-split{ min-height: 100vh; display:grid; grid-template-columns:1fr 1.15fr; }
.sm-auth-split__brand{ order:2; background: var(--navy); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:40px; text-align:center; }
.sm-auth-split__brand img{ width:96px; height:96px; object-fit:contain; }
.sm-auth-split__brand .sm-logo__text{ font-size:34px; font-weight:800; color:#fff; }
.sm-auth-split__tagline{ color: rgba(255,255,255,.65); font-weight:600; letter-spacing:.5px; font-size:14px; margin:0; }
.sm-auth-split__form{ display:flex; align-items:center; justify-content:center; padding:40px 24px; background: var(--bg); }
.sm-auth-form{ width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:32px; }
.sm-auth-form h1{ font-size:26px; margin-bottom:6px; }
.sm-auth-form__sub{ color: var(--ink-soft); margin-bottom:24px; }
.sm-field-pw{ position:relative; }
.sm-field-pw button{ position:absolute; inset-inline-start:8px; top:50%; transform:translateY(-50%); background:none; border:0; color: var(--ink-faint); width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.sm-field-pw input{ padding-inline-start:44px; }
.sm-auth-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; font-size:14px; }
.sm-auth-row label{ display:flex; align-items:center; gap:8px; color: var(--ink-soft); }
.sm-auth-row input{ width:18px; height:18px; accent-color: var(--navy); }
.sm-auth-row a{ color: var(--blue); font-weight:800; }
.sm-auth-divider{ display:flex; align-items:center; gap:12px; color: var(--ink-faint); font-size:13px; margin:18px 0; }
.sm-auth-divider::before, .sm-auth-divider::after{ content:""; flex:1; height:1px; background: var(--border); }
.sm-auth-form__foot{ text-align:center; margin:22px 0 0; font-size:14.5px; color: var(--ink-soft); }
.sm-auth-form__foot a{ color: var(--blue); font-weight:800; }

.sm-steps{ display:flex; align-items:flex-start; justify-content:center; gap:8px; margin:6px 0 30px; }
.sm-steps__step{ display:flex; flex-direction:column; align-items:center; gap:8px; width:84px; }
.sm-steps__num{ width:34px; height:34px; border-radius:50%; background: var(--bg); border:1.5px solid var(--border); color: var(--ink-faint); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.sm-steps__step.is-active .sm-steps__num{ background: var(--navy); border-color: var(--navy); color:#fff; }
.sm-steps__step.is-done .sm-steps__num{ background: var(--green); border-color: var(--green); color:#fff; }
.sm-steps__label{ font-size:12.5px; color: var(--ink-faint); font-weight:700; text-align:center; line-height:1.3; }
.sm-steps__step.is-active .sm-steps__label{ color: var(--ink); }
.sm-steps__line{ width:36px; height:2px; background: var(--border); margin-top:17px; flex-shrink:0; }

.sm-role-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:8px; }
.sm-role-card{ position:relative; background: var(--surface); border:2px solid var(--border); border-radius: var(--radius); padding:24px 14px; text-align:center; cursor:pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.sm-role-card:hover{ border-color:#C9CFDB; }
.sm-role-card:focus-visible{ outline:3px solid var(--blue); }
.sm-role-card__icon{ display:flex; align-items:center; justify-content:center; margin:0 auto 12px; width:56px; height:56px; border-radius:16px; background: var(--blue-soft); color: var(--navy); font-size:28px; }
.sm-role-card h3{ font-size:17px; margin-bottom:6px; }
.sm-role-card p{ font-size:13px; color: var(--ink-soft); margin:0; }
.sm-role-card.is-selected{ border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245,183,0,.16); }
.sm-role-card.is-selected .sm-role-card__icon{ background: var(--gold); }
.sm-role-card__check{ position:absolute; top:10px; left:10px; width:22px; height:22px; border-radius:50%; background: var(--gold); color: var(--gold-ink); display:none; align-items:center; justify-content:center; font-size:14px; }
.sm-role-card.is-selected .sm-role-card__check{ display:flex; }
.sm-wizard-step{ display:none; }
.sm-wizard-step.is-active{ display:block; }
.sm-wizard-nav{ display:flex; gap:12px; margin-top:22px; }
.sm-wizard-nav .sm-btn{ flex:1; }
.sm-review-box{ background: var(--bg); border:1px solid var(--border); border-radius:12px; padding:6px 18px; }
.sm-review-box h4{ margin:14px 0 0; font-size:15px; }
.sm-review-box .sm-facts > div:first-child{ border-top:0; }

/* Pricing */
.sm-pricing__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-block:24px; }
.sm-pricing-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:30px 24px; text-align:center; box-shadow: var(--shadow); }
.sm-pricing-card.is-recommended{ border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245,183,0,.16); }
.sm-pricing-card__icon{ display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:0 auto 12px; border-radius:16px; background: var(--blue-soft); color: var(--navy); font-size:30px; }
.sm-pricing-card__price{ font-size:26px; font-weight:800; color: var(--navy); margin-bottom:4px; }
.sm-pricing-card__price span{ font-size:13.5px; font-weight:500; color: var(--ink-faint); }
.sm-pricing-card__price--alt{ font-size:15px; color: var(--ink-soft); }
.sm-pricing-card__features{ text-align:right; margin:20px 0; display:flex; flex-direction:column; gap:10px; font-size:14.5px; color: var(--ink-soft); }
.sm-pricing-card__features li{ display:flex; align-items:flex-start; gap:8px; }
.sm-pricing-card__features .ico{ color: var(--green); margin-top:3px; }
.sm-pricing__note{ text-align:center; color: var(--ink-faint); font-size:13.5px; }

/* Modal */
.sm-modal{ position:fixed; inset:0; z-index:100; background: rgba(9,16,32,.78); display:flex; align-items:center; justify-content:center; padding:20px; }
.sm-modal__box{ width:100%; max-width:860px; background:#0B1426; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.sm-modal__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; color:#fff; }
.sm-modal__close{ width:44px; height:44px; border-radius:10px; border:0; background: rgba(255,255,255,.1); color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; }
.sm-modal__close:hover{ background: rgba(255,255,255,.2); }
.sm-modal__video{ aspect-ratio:16/9; background:#000; }
.sm-modal__video video, .sm-modal__video iframe{ width:100%; height:100%; border:0; display:block; }
.sm-modal__empty{ padding:56px 20px; text-align:center; color: rgba(255,255,255,.7); }
.sm-modal__empty .ico{ font-size:44px; margin-bottom:8px; }

/* Footer */
.sm-footer{ background: var(--navy-2); color: rgba(255,255,255,.8); margin-top:24px; }
.sm-footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-block:48px 40px; }
.sm-footer__brand{ display:flex; flex-direction:column; gap:12px; }
.sm-footer__brand p{ color: rgba(255,255,255,.62); font-size:14px; margin:0; max-width:36ch; }
.sm-footer h3{ color:#fff; font-size:15px; margin-bottom:14px; }
.sm-footer__links ul{ display:flex; flex-direction:column; gap:10px; }
.sm-footer__links a{ font-size:14px; color: rgba(255,255,255,.7); }
.sm-footer__links a:hover{ color: var(--gold); }
.sm-footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:18px; font-size:13px; text-align:center; color: rgba(255,255,255,.5); }


/* ==========================================================================
   Mock-up refinements: hero panel, profile header, plans, login
   ========================================================================== */
.sm-gold{ color: var(--gold); }
.sm-hero__panel{ margin-top:30px; max-width:940px; }
.sm-hero__features{ position:relative; margin-top:52px; background: rgba(8,16,32,.62); border-top:1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.sm-hero__features ul{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-block:18px; }
.sm-hero__features li{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:14.5px; color: rgba(255,255,255,.92); }
.sm-hero__features li span{ width:38px; height:38px; border-radius:10px; background: rgba(245,183,0,.16); color: var(--gold); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }

.sm-plans-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sm-plan-mini{ display:flex; align-items:center; gap:16px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:20px; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.sm-plan-mini:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.sm-plan-mini__icon{ width:54px; height:54px; border-radius:14px; background: var(--blue-soft); color: var(--navy); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; }
.sm-plan-mini h3{ font-size:16px; margin:0 0 2px; }
.sm-plan-mini__price{ font-size:22px; font-weight:800; color: var(--navy); line-height:1.3; }
.sm-plan-mini__price small{ font-size:12.5px; font-weight:600; color: var(--ink-faint); }
.sm-plan-mini__alt{ font-size:13px; color: var(--ink-soft); }
.sm-plan-mini__go{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; color: var(--blue); font-weight:800; font-size:13.5px; white-space:nowrap; }

.sm-pill{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:800; line-height:1.6; vertical-align:middle; }
.sm-pill--green{ background: var(--green-soft); color: #14804A; }
.sm-pill--blue{ background: var(--blue-soft); color: var(--blue); }
.sm-pill--warn{ background: var(--warn-soft); color: var(--warn); }

/* Profile header (photo | info | video) */
.sm-ph{ display:grid; grid-template-columns:230px 1fr 380px; gap:28px; align-items:center; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:24px; margin-bottom:20px; }
.sm-ph--noaside{ grid-template-columns:230px 1fr; }
.sm-ph__photo{ aspect-ratio:4/5; border-radius:14px; overflow:hidden; background: linear-gradient(160deg, var(--navy-3), var(--navy)); display:flex; align-items:center; justify-content:center; }
.sm-ph__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.sm-ph__photo .sm-card__placeholder{ font-size:84px; }
.sm-ph__photo--crest{ aspect-ratio:1; background: linear-gradient(180deg,#F8F9FC,#EEF1F7); border:1px solid var(--border); }
.sm-ph__photo--crest img{ object-fit:contain; padding:22px; }
.sm-ph--crest .sm-ph__photo--crest .sm-card__placeholder{ color: var(--ink-faint); }
.sm-ph__info{ min-width:0; }
.sm-ph__name{ font-size:28px; margin:0 0 8px; }
.sm-ph__facts{ display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
.sm-ph__facts li{ display:flex; align-items:center; gap:8px; font-size:15px; color: var(--ink-soft); }
.sm-ph__facts li .ico{ color: var(--gold); font-size:19px; }
.sm-ph__facts strong{ color: var(--ink); }
.sm-ph__facts a{ color: var(--blue); }
.sm-ph__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.sm-ph__actions .sm-btn{ min-width:140px; }
.sm-ph__aside{ min-width:0; }
.sm-ph__squad{ aspect-ratio:16/9; border-radius:12px; overflow:hidden; background: var(--bg); }
.sm-ph__squad img{ width:100%; height:100%; object-fit:cover; }
.sm-cv__panelside{ position:sticky; top:88px; }
.sm-cv__panelside .sm-facts > div:first-child{ border-top:0; padding-top:0; }
.sm-two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:0; }
.sm-two .sm-panel{ min-width:0; }

/* Registration: prices + plan choice */
.sm-role-card__price{ display:inline-block; margin-top:10px; padding:3px 12px; border-radius:999px; background: var(--warn-soft); color: var(--warn); font-size:12.5px; font-weight:800; }
.sm-step-title{ font-size:16px; margin:4px 0 12px; }
.sm-plans{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.sm-plan{ position:relative; display:flex; flex-direction:column; gap:4px; background: var(--surface); border:2px solid var(--border); border-radius:12px; padding:16px; cursor:pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.sm-plan input{ position:absolute; opacity:0; pointer-events:none; }
.sm-plan:hover{ border-color:#C9CFDB; }
.sm-plan.is-selected{ border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245,183,0,.16); }
.sm-plan:focus-within{ outline:3px solid var(--blue); outline-offset:2px; }
.sm-plan__name{ font-weight:800; color: var(--ink-soft); font-size:14px; }
.sm-plan__price{ font-size:24px; font-weight:800; color: var(--navy); line-height:1.3; }
.sm-plan__price small{ font-size:12.5px; font-weight:600; color: var(--ink-faint); }
.sm-plan__badge{ position:absolute; top:10px; left:10px; background: var(--green); color:#fff; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:800; }

/* Login */
.sm-auth-split__back{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:9px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.88); font-weight:700; font-size:14px; }
.sm-auth-split__back:hover{ background: rgba(255,255,255,.1); color:#fff; }
.sm-auth-split__back .ico{ transform: rotate(180deg); }
.sm-btn--block{ display:flex; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px){
  .sm-header__inner{ position:relative; gap:16px; }
  .sm-nav{ display:none; flex-direction:column; align-items:stretch; position:absolute; top:100%; right:0; left:0; background: var(--navy); padding:8px 20px 20px; box-shadow: 0 12px 24px rgba(13,27,51,.3); border-top:1px solid rgba(255,255,255,.08); }
  .sm-nav.is-open{ display:flex; }
  .sm-nav__list{ flex-direction:column; align-items:stretch; gap:2px; }
  .sm-nav__list a:not(.sm-btn){ padding:14px 12px; font-size:16px; }
  .sm-nav__actions{ flex-direction:column; align-items:stretch; margin:8px 0 0; gap:4px; }
  .sm-nav__login{ padding:14px 12px; font-size:16px; }
  .sm-nav__register{ margin:6px 0 0; }
  .sm-nav__register .sm-btn{ width:100%; min-height:48px; }
  .sm-nav__toggle{ display:flex; }
}
@media (max-width: 1080px){
  .sm-grid{ grid-template-columns:repeat(3, 1fr); }
  .sm-listing__results .sm-grid{ grid-template-columns:repeat(2,1fr); }
  .sm-cv{ grid-template-columns:300px 1fr; }
  .sm-match{ grid-template-columns:1fr 1fr; }
  .sm-match__cta{ grid-column:1 / -1; }
  .sm-footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 960px){
  .sm-listing{ grid-template-columns:1fr; gap:16px; }
  .sm-filters{ position:static; margin-top:0; }
  .sm-filters__toggle{ display:flex; }
  .sm-filters__title{ display:none; }
  .sm-filters__form{ display:none; padding-top:4px; border-top:1px solid var(--border); }
  .sm-filters.is-open .sm-filters__form{ display:block; }
  .sm-quicklinks__grid{ grid-template-columns:repeat(2,1fr); }
  .sm-cv{ grid-template-columns:1fr; }
  .sm-cv__side{ position:static; }
  .sm-cv__photo{ aspect-ratio: 16/12; }
  .sm-cv__photo img{ object-position:center 20%; }
  .sm-pricing__grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
  .sm-auth-split{ grid-template-columns:1fr; min-height:auto; }
  .sm-auth-split__brand{ padding:28px; }
  .sm-match-single__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  body{ font-size:15.5px; }
  .sm-container{ padding-inline:16px; }
  .sm-page{ padding-block:24px 96px; }
  .sm-hero{ padding-block:44px 48px; }
  .sm-hero__bg::before{ background: linear-gradient(to bottom, rgba(13,27,51,.9), rgba(13,27,51,.94)); }
  .sm-hero__copy > p{ font-size:15.5px; }
  .sm-hero__tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .sm-hero__tab{ padding:10px 6px; font-size:13.5px; justify-content:center; }
  .sm-hero__tab .ico{ display:none; }
  .sm-hero__search{ flex-direction:column; }
  .sm-hero__search input[name="age"]{ flex:1 1 auto; }
  .sm-hero__search .sm-btn{ width:100%; }
  .sm-grid, .sm-listing__results .sm-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .sm-card__body{ padding:12px; }
  .sm-card__name{ font-size:15.5px; }
  .sm-card__meta{ font-size:13px; }
  .sm-card__actions{ padding-top:10px; }
  .sm-btn--sm{ padding:8px 6px; font-size:13px; }
  .sm-section-head h2{ font-size:21px; }
  .sm-quicklinks__grid{ gap:10px; }
  .sm-quicklink{ flex-direction:column; align-items:flex-start; padding:14px; gap:10px; }
  .sm-quicklink strong{ font-size:14px; }
  .sm-quicklink small{ display:none; }
  .sm-cta__box{ padding:26px 20px; }
  .sm-cta__btns{ width:100%; }
  .sm-cta__btns .sm-btn{ flex:1; }
  .sm-page__head h1{ font-size:25px; }
  .sm-panel{ padding:18px; }
  .sm-skills{ grid-template-columns:1fr; gap:14px; }
  .sm-cv__body{ padding:18px; }
  .sm-cv__name{ font-size:22px; }
  .sm-cv__actions{ display:none; }
  .sm-sticky-cta{ display:flex; gap:10px; position:fixed; bottom:0; right:0; left:0; z-index:45; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--border); box-shadow: 0 -6px 20px rgba(20,38,69,.1); }
  .sm-sticky-cta .sm-btn{ flex:1; }
  .sm-match{ grid-template-columns:1fr; gap:14px; padding:16px; }
  .sm-match__facts{ grid-template-columns:1fr 1fr; background: var(--bg); border-radius:10px; padding:12px; }
  .sm-match__cta{ width:100%; }
  .sm-match-filters{ flex-direction:column; align-items:stretch; }
  .sm-match-type-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; margin-inline:-16px; padding-inline:16px; scrollbar-width:none; }
  .sm-match-type-tab{ flex-shrink:0; }
  .sm-match-selects select{ flex:1; }
  .sm-match-single__banner{ padding:28px 16px; }
  .sm-match-single__actions .sm-btn{ min-width:0; flex:1 1 100%; }
  .sm-auth-card{ padding:22px 18px; }
  .sm-auth-form{ padding:24px 18px; }
  .sm-auth-split__form{ padding:20px 16px 32px; }
  .sm-field-row{ grid-template-columns:1fr; gap:0; }
  .sm-role-cards{ grid-template-columns:1fr; gap:10px; }
  .sm-role-card{ display:flex; align-items:center; gap:14px; text-align:right; padding:14px 16px; }
  .sm-role-card__icon{ margin:0; flex-shrink:0; }
  .sm-steps__step{ width:auto; }
  .sm-steps__label{ display:none; }
  .sm-steps__line{ width:28px; margin-top:16px; }
  .sm-footer__inner{ grid-template-columns:1fr 1fr; gap:24px; padding-block:36px 28px; }
  .sm-footer__brand, .sm-footer__contact{ grid-column:1 / -1; }
  .sm-modal{ padding:10px; }
}
@media (max-width: 359px){
  .sm-grid, .sm-listing__results .sm-grid{ grid-template-columns:1fr; }
}


/* ---- Polish: alignment + attractiveness ---- */
.sm-section-head h2, .sm-page__head h1{ position:relative; padding-inline-start:16px; }
.sm-section-head h2::before, .sm-page__head h1::before{ content:""; position:absolute; inset-inline-start:0; top:.18em; bottom:.18em; width:5px; border-radius:4px; background: var(--gold); }
.sm-page__head p{ padding-inline-start:16px; }
.sm-hero__panel{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:16px; backdrop-filter: blur(8px); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.sm-hero__search{ box-shadow:none; }
.sm-footer__phone{ text-align:right; color:#fff; font-weight:800; font-size:17px; margin:0 0 12px; letter-spacing:.3px; }
.sm-footer__social{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.sm-footer__contact .sm-btn{ min-width:150px; }
.sm-ph{ align-items:stretch; }
.sm-ph__info{ align-self:center; }
.sm-ph__aside{ align-self:center; }
.sm-ph__aside--stretch{ align-self:stretch; display:flex; }
.sm-ph__aside--stretch > *{ flex:1; }
.sm-ph__card{ background: linear-gradient(160deg, var(--navy-3), var(--navy-2)); color:#fff; border-radius:14px; padding:22px 24px; display:flex; flex-direction:column; justify-content:center; }
.sm-ph__card h2{ font-size:16px; margin:0 0 6px; color: var(--gold); }
.sm-ph__card dl{ margin:0; }
.sm-ph__card dl > div{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid rgba(255,255,255,.12); }
.sm-ph__card dl > div:first-child{ border-top:0; }
.sm-ph__card dt{ display:flex; align-items:center; gap:8px; color: rgba(255,255,255,.7); font-size:14px; }
.sm-ph__card dt .ico{ color: var(--gold); font-size:18px; }
.sm-ph__card dd{ margin:0; font-weight:800; font-size:15px; }
.sm-ph__card dd a{ color: var(--gold); }

/* ---- Responsive additions ---- */
@media (max-width: 1080px){
  .sm-ph{ grid-template-columns:200px 1fr; }
  .sm-ph__aside{ grid-column:1 / -1; }
  .sm-plans-mini{ grid-template-columns:1fr; }
  .sm-hero__features ul{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 960px){
  .sm-cv__panelside{ position:static; }
  .sm-auth-split__brand{ order:0; }
  .sm-two{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .sm-hero{ padding-block:40px 0; }
  .sm-hero__panel{ margin-top:22px; }
  .sm-hero__features{ margin-top:32px; }
  .sm-hero__features ul{ gap:12px 10px; padding-block:16px; }
  .sm-hero__features li{ font-size:13px; gap:8px; align-items:flex-start; }
  .sm-hero__features li span{ width:32px; height:32px; font-size:17px; }
  .sm-plan-mini{ padding:16px; gap:12px; flex-wrap:wrap; }
  .sm-plan-mini__go{ margin-inline-start:0; width:100%; justify-content:flex-end; }
  .sm-ph, .sm-ph--noaside{ grid-template-columns:1fr; gap:18px; padding:16px; text-align:right; }
  .sm-ph__photo{ aspect-ratio:1/1; max-height:none; }
  .sm-ph__photo--crest{ aspect-ratio:16/9; }
  .sm-ph__photo img{ object-position:center 32%; }
  .sm-ph__photo--crest img{ padding:14px; }
  .sm-ph__name{ font-size:23px; }
  .sm-ph__actions{ display:none; }
  .sm-plans{ grid-template-columns:1fr; }
  .sm-pill{ font-size:11.5px; }
}
@media (max-width: 640px){
  .sm-hero__panel{ padding:12px; border-radius:16px; }
  .sm-hero__tabs{ margin-bottom:10px; }
  .sm-ph__card{ padding:16px 18px; }
  .sm-section-head h2, .sm-page__head h1{ padding-inline-start:14px; }
  .sm-page__head p{ padding-inline-start:14px; }
}

.sm-nav__list a.sm-nav__home{ color:#fff; }
@media (max-width: 640px){
  .sm-footer__social{ flex-direction:row; flex-wrap:wrap; }
  .sm-footer__social .sm-btn{ flex:1 1 140px; }
}

/* ==========================================================================
   Header social icons
   ========================================================================== */
.sm-header__social{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.sm-social-btn{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); font-size:20px; transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sm-social-btn .ico{ font-size:20px; width:1em; height:1em; }
.sm-social-btn:hover{ transform: translateY(-3px) scale(1.08); border-color: transparent; }
.sm-social-btn--wa:hover{ background:#25D366; box-shadow: 0 8px 20px rgba(37,211,102,.4); }
.sm-social-btn--ig:hover{ background: linear-gradient(45deg,#F9A825 0%,#E1306C 55%,#7B3FE4 100%); box-shadow: 0 8px 20px rgba(225,48,108,.4); }
.sm-social-btn:active{ transform: scale(.95); }

/* ==========================================================================
   Floating WhatsApp widget
   ========================================================================== */
.sm-wa{ position:fixed; left:22px; bottom:22px; z-index:60; direction:rtl; }
.sm-wa__fab{ position:relative; width:60px; height:60px; border-radius:50%; border:0; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow: 0 10px 28px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease; }
.sm-wa__fab .ico{ width:1em; height:1em; }
.sm-wa__ic{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.sm-wa__ic--close{ opacity:0; transform: rotate(-90deg) scale(.5); }
.sm-wa.is-open .sm-wa__ic--open{ opacity:0; transform: rotate(90deg) scale(.5); }
.sm-wa.is-open .sm-wa__ic--close{ opacity:1; transform:none; }
.sm-wa__fab:hover{ transform: scale(1.08) rotate(-6deg); }
.sm-wa.is-open .sm-wa__fab{ background: var(--navy); box-shadow: 0 10px 28px rgba(20,38,69,.4); }
.sm-wa.is-open .sm-wa__fab:hover{ transform: scale(1.08) rotate(90deg); }
.sm-wa__ping{ position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; opacity:0; animation: smPing 2.4s ease-out infinite; pointer-events:none; }
.sm-wa.is-open .sm-wa__ping{ display:none; }
.sm-wa__tip{ position:absolute; left:74px; bottom:12px; background:#fff; color: var(--ink); font-weight:800; font-size:14px; white-space:nowrap; padding:10px 16px; border-radius:12px; box-shadow: var(--shadow-lg); opacity:0; transform: translateX(-8px) scale(.96); transform-origin:left center; visibility:hidden; pointer-events:none; transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s; }
.sm-wa__tip::before{ content:""; position:absolute; left:-6px; top:50%; width:12px; height:12px; background:#fff; transform: translateY(-50%) rotate(45deg); }
.sm-wa__tip.is-show{ opacity:1; transform:none; visibility:visible; }
.sm-wa__card{ position:absolute; left:0; bottom:76px; width:340px; max-width:calc(100vw - 32px); background:#fff; border-radius:18px; overflow:hidden; box-shadow: 0 24px 60px rgba(13,27,51,.35), 0 2px 8px rgba(0,0,0,.1); opacity:0; transform: translateY(16px) scale(.94); transform-origin: bottom left; visibility:hidden; transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s; }
.sm-wa.is-open .sm-wa__card{ opacity:1; transform:none; visibility:visible; }
.sm-wa__head{ display:flex; align-items:center; gap:12px; padding:16px 18px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color:#fff; }
.sm-wa__avatar{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sm-wa__avatar img{ width:26px; height:32px; object-fit:contain; }
.sm-wa__who{ flex:1; min-width:0; }
.sm-wa__who strong{ display:block; font-size:16px; line-height:1.3; }
.sm-wa__who span{ display:flex; align-items:center; gap:6px; font-size:12.5px; color: rgba(255,255,255,.8); }
.sm-wa__dot{ width:8px; height:8px; border-radius:50%; background:#25D366; box-shadow: 0 0 0 0 rgba(37,211,102,.7); animation: smDot 1.8s ease-out infinite; }
.sm-wa__close{ width:34px; height:34px; border-radius:50%; border:0; background: rgba(255,255,255,.12); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; transition: background .2s ease, transform .25s ease; }
.sm-wa__close:hover{ background: rgba(255,255,255,.24); transform: rotate(90deg); }
.sm-wa__body{ padding:18px; background:#ECE5DD; background-image: radial-gradient(rgba(20,38,69,.05) 1px, transparent 1px); background-size:14px 14px; }
.sm-wa__bubble{ position:relative; background:#fff; border-radius:4px 14px 14px 14px; padding:12px 14px; font-size:14.5px; line-height:1.7; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); max-width:88%; }
.sm-wa__bubble small{ display:block; margin-top:4px; font-size:11.5px; color: var(--ink-faint); }
.sm-wa.is-open .sm-wa__bubble{ animation: smBubble .5s .25s cubic-bezier(.2,.8,.2,1) both; }
.sm-wa__quick{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.sm-wa__quick a{ display:block; background: rgba(255,255,255,.92); border:1.5px solid rgba(37,211,102,.55); color:#0E7C3A; font-weight:800; font-size:13.5px; padding:9px 14px; border-radius:999px; text-align:center; transition: background .2s ease, color .2s ease, transform .2s ease; }
.sm-wa__quick a:hover{ background:#25D366; color:#fff; transform: translateY(-2px); }
.sm-wa.is-open .sm-wa__quick a{ animation: smBubble .45s cubic-bezier(.2,.8,.2,1) both; }
.sm-wa.is-open .sm-wa__quick a:nth-child(1){ animation-delay:.4s; }
.sm-wa.is-open .sm-wa__quick a:nth-child(2){ animation-delay:.5s; }
.sm-wa.is-open .sm-wa__quick a:nth-child(3){ animation-delay:.6s; }
.sm-wa__start{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px; padding:13px 16px; border-radius:12px; background:#25D366; color:#fff; font-weight:800; font-size:15px; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.sm-wa__start .ico{ font-size:20px; }
.sm-wa__start:hover{ background:#1FB959; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,.4); }

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes smFadeUp{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes smFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes smPing{ 0%{ transform: scale(1); opacity:.7; } 70%,100%{ transform: scale(1.65); opacity:0; } }
@keyframes smDot{ 0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.7); } 70%,100%{ box-shadow: 0 0 0 8px rgba(37,211,102,0); } }
@keyframes smBubble{ from{ opacity:0; transform: translateY(10px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes smKen{ from{ transform: scale(1.12); } to{ transform: scale(1); } }
@keyframes smPlay{ 0%{ box-shadow: 0 0 0 0 rgba(245,183,0,.6), 0 6px 24px rgba(0,0,0,.35); } 70%,100%{ box-shadow: 0 0 0 18px rgba(245,183,0,0), 0 6px 24px rgba(0,0,0,.35); } }
@keyframes smStar{ 0%{ transform: scale(0) rotate(-40deg); opacity:0; } 70%{ transform: scale(1.25) rotate(6deg); opacity:1; } 100%{ transform:none; } }
@keyframes smStep{ 0%{ transform: scale(.6); } 60%{ transform: scale(1.18); } 100%{ transform:none; } }
@keyframes smShine{ from{ transform: translateX(130%) skewX(-20deg); } to{ transform: translateX(-130%) skewX(-20deg); } }

/* scroll reveal (only when JS + motion allowed) */
.sm-motion .sm-reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s); will-change: opacity, transform; }
.sm-motion .sm-reveal.is-in{ opacity:1; transform:none; }

/* page + hero entrance */
body{ animation: smFadeIn .45s ease both; }
.sm-hero__bg{ animation: smKen 2.4s cubic-bezier(.2,.7,.2,1) both; }
.sm-hero h1{ animation: smFadeUp .8s .1s cubic-bezier(.2,.7,.2,1) both; }
.sm-hero__copy > p{ animation: smFadeUp .8s .25s cubic-bezier(.2,.7,.2,1) both; }
.sm-hero__panel{ animation: smFadeUp .8s .4s cubic-bezier(.2,.7,.2,1) both; }
.sm-auth-split__brand > *{ animation: smFadeUp .7s cubic-bezier(.2,.7,.2,1) both; }
.sm-auth-split__brand > :nth-child(2){ animation-delay:.12s; } .sm-auth-split__brand > :nth-child(3){ animation-delay:.24s; } .sm-auth-split__brand > :nth-child(4){ animation-delay:.36s; }
.sm-auth-form{ animation: smFadeUp .7s .15s cubic-bezier(.2,.7,.2,1) both; }
.sm-logo__icon{ transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.sm-logo:hover .sm-logo__icon{ transform: scale(1.12) rotate(-6deg); }

/* nav underline */
.sm-nav__list a:not(.sm-btn){ position:relative; }
.sm-nav__list a:not(.sm-btn)::after{ content:""; position:absolute; inset-inline:14px; bottom:3px; height:2px; border-radius:2px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.sm-nav__list a:not(.sm-btn):hover::after, .sm-nav__list a.is-current::after{ transform: scaleX(1); }

/* buttons: lift + shine */
.sm-btn{ position:relative; overflow:hidden; }
.sm-btn:hover{ transform: translateY(-2px); }
.sm-btn:active{ transform: translateY(0) scale(.98); }
.sm-btn--primary::after, .sm-btn--blue::after, .sm-btn--whatsapp::after{ content:""; position:absolute; inset:0; width:45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(130%) skewX(-20deg); pointer-events:none; }
.sm-btn--primary:hover::after, .sm-btn--blue:hover::after, .sm-btn--whatsapp:hover::after{ animation: smShine .7s ease; }

/* cards */
.sm-card__media img{ transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sm-card:hover .sm-card__media img{ transform: scale(1.06); }
.sm-card__media--crest img{ transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sm-plan-mini__icon, .sm-pricing-card__icon, .sm-role-card__icon{ transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s ease; }
.sm-plan-mini:hover .sm-plan-mini__icon, .sm-pricing-card:hover .sm-pricing-card__icon, .sm-role-card:hover .sm-role-card__icon{ transform: scale(1.1) rotate(-6deg); }
.sm-pricing-card{ transition: transform .25s ease, box-shadow .25s ease; }
.sm-pricing-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.sm-plan-mini__go .ico{ transition: transform .25s ease; }
.sm-plan-mini:hover .sm-plan-mini__go .ico{ transform: translateX(-4px); }
.sm-section-head a .ico{ transition: transform .25s ease; }
.sm-section-head a:hover .ico{ transform: translateX(-4px); }
.sm-match{ transition: transform .25s ease, box-shadow .25s ease; }
.sm-match:hover{ transform: translateY(-3px); }
.sm-hero__features li span{ transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease; }
.sm-hero__features li:hover span{ transform: scale(1.12) rotate(-5deg); background: rgba(245,183,0,.3); }
.sm-hero__tab{ transition: background .2s ease, transform .2s ease, color .2s ease; }
.sm-hero__tab:hover{ transform: translateY(-2px); }
.sm-tag{ transition: transform .2s ease; }
.sm-tag:hover{ transform: translateY(-2px); }
.sm-footer__links a{ transition: color .2s ease, transform .2s ease; display:inline-block; }
.sm-footer__links a:hover{ transform: translateX(-4px); }

/* video play pulse */
.sm-video__play{ animation: smPlay 2.2s ease-out infinite; }

/* rating stars pop + skill bars grow */
.sm-motion .sm-cv__rating .sm-stars .ico, .sm-motion .sm-rating-summary .sm-stars .ico{ animation: smStar .5s cubic-bezier(.2,.9,.3,1.3) both; }
.sm-motion .sm-stars > :nth-child(2) .ico{ animation-delay:.08s; } .sm-motion .sm-stars > :nth-child(3) .ico{ animation-delay:.16s; }
.sm-motion .sm-stars > :nth-child(4) .ico{ animation-delay:.24s; } .sm-motion .sm-stars > :nth-child(5) .ico{ animation-delay:.32s; }
.sm-motion .sm-skill__bar i{ transform: scaleX(0); transform-origin: right; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .2s; }
.sm-motion .sm-panel.is-seen .sm-skill__bar i, .sm-motion .is-seen .sm-skill__bar i{ transform:none; }
.sm-motion .sm-skill:nth-child(2) .sm-skill__bar i{ transition-delay:.3s; } .sm-motion .sm-skill:nth-child(3) .sm-skill__bar i{ transition-delay:.4s; }
.sm-motion .sm-skill:nth-child(4) .sm-skill__bar i{ transition-delay:.5s; } .sm-motion .sm-skill:nth-child(5) .sm-skill__bar i{ transition-delay:.6s; }

/* wizard */
.sm-wizard-step.is-active{ animation: smFadeUp .45s cubic-bezier(.2,.7,.2,1) both; }
.sm-steps__step.is-active .sm-steps__num, .sm-steps__step.is-done .sm-steps__num{ animation: smStep .45s cubic-bezier(.2,.8,.2,1) both; }
.sm-role-card.is-selected{ animation: smStep .4s cubic-bezier(.2,.8,.2,1); }
.sm-plan.is-selected{ animation: smStep .4s cubic-bezier(.2,.8,.2,1); }
.sm-modal{ animation: smFadeIn .25s ease both; }
.sm-modal__box{ animation: smFadeUp .35s cubic-bezier(.2,.8,.2,1) both; }

/* header icons position on collapsed nav */
@media (max-width: 1279px){
  .sm-header__social{ margin-inline-start:auto; }
  .sm-nav__toggle{ margin-inline-start:0; }
}
@media (max-width: 640px){
  .sm-wa{ left:14px; bottom:16px; }
  .sm-wa__fab{ width:56px; height:56px; font-size:28px; }
  .sm-wa__tip{ left:68px; font-size:13px; }
  body.has-sticky .sm-wa{ bottom:88px; }
  .sm-social-btn{ width:38px; height:38px; }
  .sm-header__social{ gap:6px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* header: fit inside the 1200px container on desktop */
@media (min-width: 1280px){
  .sm-header__inner{ gap:16px; }
  .sm-nav{ gap:4px; }
  .sm-nav__list{ gap:0; }
  .sm-nav__list a:not(.sm-btn){ padding:9px 10px; font-size:14.5px; gap:6px; }
  .sm-nav__list a:not(.sm-btn)::after{ inset-inline:10px; }
  .sm-nav__login{ padding:9px 10px; font-size:14.5px; }
  .sm-nav__register .sm-btn{ padding:9px 16px; }
  .sm-nav__actions{ gap:4px; }
  .sm-header__social{ gap:6px; }
  .sm-social-btn{ width:38px; height:38px; }
}