:root{
  /* Site palette */
  --bg: #12103D!important;      /* deep navy */
  --bg-2: #0E0B2E!important;    /* darker navy */
  --text: #F8E4CC!important;    /* warm cream */
  --muted: #D8CCBE!important;   /* muted cream */
  --primary: #0C5D7B!important; /* teal */
  --accent: #EFBF7F!important;  /* peach */
  --brand-red: #F20231!important;/* red */
  --glass: rgba(255,255,255,0.05)!important;
  --glass-stroke: rgba(255,255,255,0.12)!important;
  --card: rgba(255,255,255,0.06)!important;
  --shadow: 0 10px 30px rgba(0,0,0,0.45)!important;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
/* Local font faces: Peyda (Regular 400 / Bold 700) */
@font-face {
  font-family: 'Peyda';
  src: url('../fonts/peyda/PeydaWeb-Regular.woff2') format('woff2'),
       url('../fonts/peyda/PeydaWeb-Regular.woff') format('woff'),
       url('../fonts/peyda/PeydaWeb-Regular.eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('../fonts/peyda/PeydaWeb-Bold.woff2') format('woff2'),
       url('../fonts/peyda/PeydaWeb-Bold.woff') format('woff'),
       url('../fonts/peyda/PeydaWeb-Bold.eot');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
body{
  margin:0; background:
    radial-gradient(1200px 800px at 80% -10%, color-mix(in oklab, var(--primary) 16%, transparent), transparent),
    radial-gradient(800px 600px at -10% 10%, color-mix(in oklab, var(--accent) 14%, transparent), transparent),
    var(--bg);
  color:var(--text); font: 16px/1.85 'Peyda', 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Arial;
  overflow:hidden;
}

.container{ width:min(1200px, 92%); margin-inline:auto; }
.section{ padding: clamp(60px, 8vw, 120px) 0; position:relative; }
.section-head{ text-align:center; }
.section-head h2{ font-size: clamp(24px, 4vw, 40px); margin:0 0 6px; }
.section-head p{ color:var(--muted); margin:0; }

.skip-link{ position:absolute; left:-999px; top:-999px; background:#000; color:#fff; padding:8px 12px; z-index:1000; }
.skip-link:focus{ left:8px; top:8px; }

.site-header{ position:fixed; top:0; inset-inline:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.brand .logo{ font-weight:900; letter-spacing:1px; background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 80%, white), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:20px; }
.nav-toggle{ display:none; background:transparent; border:1px solid var(--glass-stroke); color:var(--text); padding:8px 10px; border-radius:8px; }
/* Hamburger styling */
.nav-toggle{ position:relative; width:42px; height:36px; display:none; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:""; position:absolute; width:22px; height:2px; background: var(--text); border-radius:2px;
  transition: transform .25s ease, opacity .25s ease, background .25s ease; left:50%; translate:-50% 0;
}
.nav-toggle span{ top:50%; translate:-50% -50%; }
.nav-toggle::before{ top:12px; }
.nav-toggle::after{ bottom:12px; }
.nav-toggle[aria-expanded="true"] span{ opacity:0; }
.nav-toggle[aria-expanded="true"]::before{ top:50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after{ bottom:auto; top:50%; transform: translateY(-50%) rotate(-45deg); }
.nav-list{ display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center; }
.nav-list a{ color:var(--text); text-decoration:none; opacity:0.9; }
.nav-list .btn{ margin-inline-start:10px; }

@media (max-width: 800px){
  .nav-toggle{ display:flex; }
  .nav-list{ position:fixed; inset:64px 0 auto 0; background: color-mix(in oklab, var(--bg) 88%, transparent); padding:16px; transform:translateY(-140%); transition:transform .35s ease; flex-direction:column; gap:12px; }
  .nav-list.open{ transform:none; }
}

.app{ position:fixed; inset:0; display:grid; grid-template-rows: 1fr auto auto; }
.viewport{ position:relative; overflow:hidden; }
.track{ position:absolute; inset:0; display:flex; height:100%; will-change: transform; direction:ltr; transform: translateZ(0); }
.slide{ position:relative; inline-size:100vw; block-size:100vh; display:grid; place-items:center; padding:min(6vh, 80px) 0; flex: 0 0 100vw; contain: layout paint size; pointer-events: none; }
.slide.active{ pointer-events:auto; }
.bg-layers{ position:absolute; inset:-15% -10% -10% -15%; pointer-events:none; filter:saturate(105%); z-index:0; }
.bg-layers .layer{ position:absolute; inset:auto; width:80vmax; height:80vmax; border-radius:50%; filter: blur(70px); opacity:.42; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%); }
.content{ width:min(1100px, 92%); margin-inline:auto; text-align:center; position:relative; z-index:1; }
.content h1, .content h2{ margin:0 0 10px; font-size:clamp(28px, 4.8vw, 34px); }
.content p{ margin:0 auto 16px; color:color-mix(in oklab, var(--muted) 85%, white); max-width: 68ch; }
.bullets{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; list-style:none; margin:12px 0 0; padding:0; color:var(--muted); }
.tilt{ transform-style:preserve-3d; }
.tilt .fx{ will-change: transform, opacity; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; border:1px solid var(--glass-stroke); text-decoration:none; cursor:pointer; transition:transform .15s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; }
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 78%, white) 0%,
    color-mix(in oklab, var(--accent) 60%, var(--bg)) 100%);
  color:#12103D;
  font-weight:700;
  border:1px solid color-mix(in oklab, var(--accent) 55%, white);
  box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 22%, transparent);
}
.btn-primary:hover{ box-shadow: 0 10px 26px color-mix(in oklab, var(--accent) 30%, transparent); }
.btn-primary:active{ transform: translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); border-color: color-mix(in oklab, var(--accent) 35%, var(--glass-stroke)); }
.btn-ghost:hover{ background: rgba(255,255,255,0.06); border-color: color-mix(in oklab, var(--accent) 55%, var(--glass-stroke)); }

.glass{ background: var(--glass); border:1px solid var(--glass-stroke); box-shadow: var(--shadow); }
.card{ padding:18px; border-radius:16px; }

/* Inner cards slider (services) */
.cards-slider{ position:relative; margin:22px auto 0; width:min(1100px, 92%); }
.control{ position:absolute; top:50%; translate:0 -50%; z-index:2; background:var(--card); border:1px solid var(--glass-stroke); color:var(--text); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.control.prev{ right:10px; }
.control.next{ left:10px; }
.slider-viewport{ overflow:hidden; }
.cards-slider .slider-viewport{ mask-image: linear-gradient(to left, transparent 0, black 24px, black calc(100% - 24px), transparent 100%); }

/* Services cards grid */
.cards-grid{ display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:16px; margin-top:18px; align-items:stretch; }
@media (max-width: 1200px){ .cards-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px){ .cards-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px){ .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px){ .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; } }
.svc-card{ min-height: 170px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; transition: transform .25s ease, box-shadow .25s ease; transform: translateZ(0); }
.svc-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.svc-card::after{ content:""; position:absolute; inset:auto -20% -40% -20%; height:60%; background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,0.18), transparent 60%); filter: blur(30px); opacity:.0; transition: opacity .3s ease; pointer-events:none; z-index:0; }
.svc-card > *{ position:relative; z-index:1; }
.svc-card:hover::after{ opacity:.7; }
.svc-card h3{ margin:0px; font-size:18px; }
.svc-card p{ margin:0px; color:var(--muted); font-size:11px!important; }
.svc-card .link{ color:var(--accent); text-decoration:none; font-weight:700; font-size:12px; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; border:1px solid var(--glass-stroke); background:rgba(255,255,255,0.04); }
.svc-card .link:hover{ background:rgba(255,255,255,0.08); }

/* Animated arrow after "جزئیات" (RTL-forward) */
@keyframes nudge-rtl{ from{ transform: translateX(0); } to{ transform: translateX(-4px); } }
.svc-card .link::after{
  content: "\2039"; /* ‹ (RTL forward chevron) */
  font-size: 16px;
  line-height: 1;
  opacity:.9;
  margin-inline-start: 4px;
  display:inline-block;
  transition: transform .25s ease, opacity .25s ease;
  animation: nudge-rtl 1.4s ease-in-out infinite alternate;
}
.svc-card .link:hover::after{ transform: translateX(-6px); opacity:1; }
@media (prefers-reduced-motion: reduce){
  .svc-card .link::after{ animation: none; }
}

/* icon badge */
.svc-icon{ inline-size:28px; block-size:28px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,0.06); border:1px solid var(--glass-stroke); margin-inline-start:auto; margin-bottom:10px; }
.svc-icon svg{ width:18px; height:18px; opacity:.9; }
.slider-track{ display:flex; gap:18px; padding:12px; touch-action: pan-y pinch-zoom; direction:ltr; }
.cards-slider .card{ inline-size: clamp(260px, 45vw, 360px); block-size: 240px; position:relative; overflow:hidden; }
.cards-slider h3{ margin:0 0 6px; font-size:20px; }
.cards-slider p{ margin:0 0 10px; color:var(--muted); }
.cards-slider .link{ color:var(--accent); text-decoration:none; font-weight:600; }
.slide-layers .layer{ position:absolute; inset:auto; border-radius:50%; filter:blur(20px); opacity:.55; }
.l1{ width:120px; height:120px; background:color-mix(in oklab, var(--primary) 35%, transparent); left:-30px; top:-30px; }
.l2{ width:180px; height:180px; background:color-mix(in oklab, var(--brand-red) 28%, transparent); right:-40px; top:10px; }
.l3{ width:140px; height:140px; background:color-mix(in oklab, var(--accent) 26%, transparent); left:40%; bottom:-40px; }
.slider-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.dot{ inline-size:9px; block-size:9px; border-radius:50%; background:rgba(255,255,255,0.25); border:1px solid var(--glass-stroke); cursor:pointer; transition: transform .15s ease, background .3s ease; }
.dot:hover{ transform: scale(1.15); }
.dot.active{ background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, white), var(--accent)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent); }

/* Portfolio mini cards */
.portfolio-cards{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:18px; }
@media (max-width: 900px){ .portfolio-cards{ grid-template-columns:1fr; } }
.mini{ min-height:160px; }

/* Portfolio complex cards */
.pf-card{ overflow:hidden; padding:0; }
.pf-link{ display:grid; grid-template-rows: auto auto 1fr; gap:12px; align-items:start; padding:16px; color:inherit; text-decoration:none; }
.pf-media{ display:grid; place-items:center; }
.pf-logo{ width:96px; height:96px; border-radius:22px; position:relative; display:grid; place-items:center; background: rgba(255,255,255,0.04); border:1px solid var(--glass-stroke); overflow:hidden; }
.pf-logo img{ width:64px; height:64px; object-fit:contain; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.pf-logo::before{ content:""; position:absolute; inset:-10px; border-radius:inherit; filter: blur(16px);
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 38%, transparent), transparent 50%, color-mix(in oklab, var(--accent) 30%, transparent));
  animation: spin-slow 8s linear infinite; opacity:.48; }
.pf-logo::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid color-mix(in oklab, var(--accent) 34%, var(--glass-stroke)); opacity:.85; }
.pf-body h3{ margin:0 0 6px; font-size:18px; }
.pf-body p{ margin:0 0 10px; min-height: 44px; }
.pf-tags{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); justify-content: flex-end; }
.pf-tags li{ padding:4px 10px; border:1px solid var(--glass-stroke); background: rgba(255,255,255,0.04); border-radius:999px; font-size:12px; }
.pf-cta{ display: flex;
    margin-top: 20px;justify-self:center; padding:8px 12px; border:1px solid var(--glass-stroke); border-radius:10px; background: rgba(255,255,255,0.04); color:var(--text); }
.pf-link:hover .pf-cta{ background: rgba(255,255,255,0.08); border-color: color-mix(in oklab, var(--accent) 55%, var(--glass-stroke)); }
.pf-card{ transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, background .35s ease; }
.pf-card:hover{ transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 44px rgba(0,0,0,.38); }
.pf-card::before{ content:""; position:absolute; inset:-1px; border-radius:16px; opacity:0; pointer-events:none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  transition: opacity .35s ease; }
.pf-card:hover::before{ opacity:.8; }
.pf-link{ position:relative; }
.pf-link::after{ content:""; position:absolute; inset:-20% -60% auto -60%; height:200%; background: radial-gradient(50% 30% at 50% 50%, rgba(255,255,255,.18), transparent 60%); transform: translateX(-100%) rotate(8deg); opacity:0; pointer-events:none; }
.pf-card:hover .pf-link::after{ animation: shine-sweep 1.4s ease; opacity:1; }
@keyframes shine-sweep{ to{ transform: translateX(220%) rotate(8deg);} }
@media (max-width: 900px){ .pf-link{ grid-template-rows: auto auto auto; text-align:center; } }
@media (prefers-reduced-motion: reduce){ .pf-logo::before{ animation:none; } }

/* Contact */
.contact-list{ list-style:none; margin:10px 0 18px; padding:0; display:grid; gap:6px; }
.contact-list span{ color:var(--muted); margin-inline-end:6px; }

/* Contact complex layout */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:stretch; width:min(1100px, 92%); margin: 14px auto 0; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-card{ position:relative; overflow:hidden; }
.contact-card::before{ content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; opacity:.6; filter: blur(16px);
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 36%, transparent), transparent 40%, color-mix(in oklab, var(--accent) 30%, transparent)); }
.contact-card-head{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.addr{ font-style:normal; color:var(--text); opacity:.95; margin:0 0 8px; }
.map-wrap{ padding:0; overflow:hidden; }
.map{ width:100%; height:100%; min-height: 320px; border:0; border-radius:16px; filter:saturate(105%) contrast(105%); }
.copy-hint{ margin-top:8px; color:var(--muted); font-size:13px; }

/* Certificates */
.cert-card{ position:relative; overflow:hidden; }
.cert-card::before{ content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; opacity:.5; filter: blur(16px);
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 28%, transparent), transparent 40%, color-mix(in oklab, var(--accent) 24%, transparent)); }
.cert-card h3{ margin:0 0 10px; font-size:16px; }
.cert-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 700px){ .cert-list{ grid-template-columns: 1fr; } }
.cert{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--glass-stroke); border-radius:12px; background: rgba(255,255,255,0.04); color:var(--text); text-decoration:none; justify-content:center; }
.cert:hover{ background: #fff; border-color: color-mix(in oklab, var(--accent) 50%, var(--glass-stroke)); }
.cert-ico{ width:22px; height:22px; display:grid; place-items:center; }
.cert-name{ font-weight:700; }

/* Contact Modal */
.modal-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index:90; }
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:91; }
.modal[hidden], .modal-backdrop[hidden]{ display:none !important; }
.modal-card{ width:min(520px, 92%); border-radius:16px; padding:16px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.modal-head h3{ margin:0; font-size:18px; }
.modal-close{ width:36px; height:36px; }
.contact-ways{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px; }
.contact-ways a{ display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--glass-stroke); border-radius:12px; background: rgba(255,255,255,0.04); color:var(--text); text-decoration:none;position: relative; }
.contact-ways .ico{ width:22px; height:22px; display:grid; place-items:center; opacity:.95; }
.contact-ways .ico svg{ width:20px; height:20px; }
.contact-ways a:hover{ background: rgba(255,255,255,0.08); border-color: color-mix(in oklab, var(--accent) 50%, var(--glass-stroke)); }
@media (prefers-reduced-motion: reduce){ .contact-cta::before{ animation:none; } }

/* Global UI */
.ui{ display:flex; align-items:center; justify-content:center; gap:12px; padding:10px; }
.round{ background:var(--card); color:var(--text); border:1px solid var(--glass-stroke); width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
/* Animated contact button */
.contact-cta{ position:relative; isolation:isolate; }
.contact-cta::before{ content:""; position:absolute; inset:-4px; border-radius:inherit; z-index:-1; filter: blur(10px);
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 45%, transparent), transparent 40%, color-mix(in oklab, var(--accent) 35%, transparent));
  animation: spin-hero 6s linear infinite; opacity:.55;
}
.contact-cta::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; border:1px solid color-mix(in oklab, var(--accent) 50%, var(--glass-stroke)); opacity:.8; }
.contact-cta:hover{ transform: translateY(-2px); }
.dots{ display:flex; gap:10px; align-items:center; }
.dots .dot{
  --size: 36px;
  width: var(--size);
  height: var(--size);
  display:grid; place-items:center;
  border-radius:12px;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--glass-stroke);
  color: var(--text);
  cursor:pointer;
  transition: transform .15s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dots .dot:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.08); }
.dots .dot.active{ box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent); border-color: color-mix(in oklab, var(--accent) 60%, var(--glass-stroke)); }
.dots .dot svg{ width:18px; height:18px; opacity:.95; }
.dots .dot .label{ position:absolute; left:-9999px; }
.pill{ background:transparent; color:var(--text); border:1px solid var(--glass-stroke); border-radius:999px; padding:6px 10px; cursor:pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.pill:hover{ background: rgba(255,255,255,0.06); border-color: color-mix(in oklab, var(--accent) 45%, var(--glass-stroke)); }
.pill:focus-visible{ outline:2px solid color-mix(in oklab, var(--accent) 55%, white); outline-offset:2px; }
.pill.active{ background: rgba(255,255,255,0.08); border-color: color-mix(in oklab, var(--accent) 60%, var(--glass-stroke)); }
/* Progress bar removed as per request */
.progress{ display:none !important; }
/* unify primary button text color for contrast */
.btn-primary{ background:linear-gradient(180deg, var(--primary), var(--accent)); color:#12103D; font-weight:700; border:none; }
/* Reveal animations */
/* layer style defined earlier with new palette */
/* Element reveals within slide */
.fx{ opacity:0; transform: translateY(12px) scale(.98); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.fx.visible{ opacity:1; transform:none; }

/* Slide specific ambient gradients (optional stronger vibes per slide) */
.s-hero .bg-layers .layer:nth-child(1){ left:10%; top:10%; }
.s-hero .bg-layers .layer:nth-child(2){ right:0; top:20%; }
.s-hero .bg-layers .layer:nth-child(3){ left:20%; bottom:10%; }
.s-hero .bg-layers .layer:nth-child(4){ right:10%; bottom:0; }
.s-hero .bg-layers{ overflow:hidden; }
.s-hero .bg-layers::before{
  content:""; position:absolute; inset:-25% -25% -25% -25%;
  /* Simplified (lighter) background stack for performance */
  background:
    radial-gradient(60vmax 60vmax at 18% 18%, color-mix(in oklab, var(--primary) 8%, transparent), transparent 60%),
    radial-gradient(50vmax 50vmax at 82% 72%, color-mix(in oklab, var(--brand-red) 7%, transparent), transparent 60%);
  animation: grid-pan-hero 90s linear infinite;
  opacity:.45; pointer-events:none;
  z-index:0;
}
.s-hero .bg-layers::after{
  content:""; position:absolute; inset:-30% -30% -30% -30%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  filter: blur(80px); opacity:.28; animation: spin-hero 140s linear infinite; pointer-events:none;
  z-index:0;
}
@keyframes grid-pan-hero{ to{ background-position: 0 0, 0 0, 800px 800px; } }
@keyframes spin-hero{ to{ transform: rotate(1turn);} }

/* Spotlight removed per request */

/* Headline gradient shimmer */
.s-hero h1{ background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 90%, white), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; }
.s-hero h1::after{
  content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 10%, transparent 20%);
  mix-blend-mode: overlay; transform: translateX(-120%); animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine{ 0%{ transform: translateX(-120%);} 60%{ transform: translateX(120%);} 100%{ transform: translateX(120%);} }

/* CTA glow */
.s-hero .btn-primary{
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 72%, white) 0%,
    color-mix(in oklab, var(--accent) 52%, var(--bg)) 100%);
  border-color: color-mix(in oklab, var(--accent) 50%, white);
  box-shadow: 0 10px 26px color-mix(in oklab, var(--accent) 22%, transparent);
}
.s-hero .btn-primary:hover{ box-shadow: 0 16px 36px color-mix(in oklab, var(--accent) 30%, transparent); }
.s-contact .btn-primary{
  background: transparent;
  color: var(--text);
  border:1px solid color-mix(in oklab, var(--accent) 55%, var(--glass-stroke));
  box-shadow: none;
}
.s-contact .btn-primary:hover{
  background: rgba(255,255,255,0.06);
  border-color: color-mix(in oklab, var(--accent) 70%, var(--glass-stroke));
}

/* Feature chips */
.chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px; padding:0; list-style:none; }
.chips li{ padding:6px 10px; border:1px solid var(--glass-stroke); background: rgba(255,255,255,0.04); border-radius:999px; color:var(--muted); font-size:13px; }

/* Scroll hint */
/* scroll hint removed */

@media (prefers-reduced-motion: reduce){
  .s-hero .bg-layers::before,
  .s-hero .bg-layers::after,
  .s-hero h1::after,
  .scroll-hint .arrow{ animation: none !important; }
}
/* Pause / reduce hero visuals when not active to cut GPU / paint cost */
.slide.hero-paused .bg-layers::before,
.slide.hero-paused .bg-layers::after,
.slide.hero-paused .kicker::before,
.slide.hero-paused .kicker::after { animation: none !important; opacity:0 !important; }

/* Mobile: further trim effects */
@media (max-width: 700px){
  .s-hero .bg-layers::before{ opacity:.32; animation:none; }
  .s-hero .bg-layers::after{ opacity:.18; animation:none; filter:blur(60px); }
  .s-hero .kicker::after{ opacity:.3; }
  .s-hero .kicker::before{ animation:none; }
}
  /* Canvas layer removed */
/* Kicker label */
.kicker{ display:inline-block; padding:6px 10px; border:1px solid var(--glass-stroke); background: rgba(255,255,255,0.04); border-radius:999px; color: var(--muted); font-weight:600; font-size:12px; letter-spacing:.2px; margin-bottom:8px; position:relative; overflow:hidden; }
/* Wavy looping gold glow for hero tagline */
.s-hero .kicker{ --k-wave-speed:7s; --k-glow:rgba(239,191,127,.75); }
.s-hero .kicker::before,
.s-hero .kicker::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
/* Animated border using conic gradient + masking so only the ring shows */
.s-hero .kicker::before{ padding:1px; background:
  conic-gradient(from 0deg,
    rgba(239,191,127,.0) 0deg,
    rgba(239,191,127,.55) 40deg,
    rgba(239,191,127,.0) 80deg,
    rgba(239,191,127,.55) 140deg,
    rgba(239,191,127,.0) 190deg,
    rgba(239,191,127,.6) 250deg,
    rgba(239,191,127,.0) 300deg,
    rgba(239,191,127,.5) 340deg,
    rgba(239,191,127,.0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:kicker-rotate var(--k-wave-speed) linear infinite;
  opacity:.95; }
/* Soft breathing glow behind */
.s-hero .kicker::after{ inset:-8px; background:
  radial-gradient(60% 110% at 30% 120%, rgba(239,191,127,.18), transparent 70%),
  radial-gradient(55% 90% at 70% -10%, rgba(239,191,127,.22), transparent 70%);
  filter:blur(14px) saturate(120%);
  opacity:.55; animation:kicker-pulse 5.6s ease-in-out infinite; mix-blend-mode:screen; }
@keyframes kicker-rotate{ to{ transform:rotate(360deg); } }
@keyframes kicker-pulse{ 0%,100%{ opacity:.38; transform:scale(.92);} 50%{ opacity:.72; transform:scale(1);} }
/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .s-hero .kicker::before, .s-hero .kicker::after{ animation:none; }
}

/* Hero stats */
.hero-stats{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; width:min(900px, 92%); margin: 20px auto 0; }
.stat{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; position:relative; transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; flex-direction: row-reverse;}
.stat::before{
  content:""; position:absolute; inset:-1px; border-radius:14px; pointer-events:none; opacity:0; transition: opacity .25s ease;
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 55%, transparent), transparent 25%, color-mix(in oklab, var(--primary) 55%, transparent) 55%, transparent 80%, color-mix(in oklab, var(--accent) 55%, transparent));
  filter: blur(16px);
}
.stat:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.stat:hover::before{ opacity:.7; }
.stat:focus-visible{ outline:2px solid color-mix(in oklab, var(--accent) 60%, white); outline-offset:2px; }
.stat-ico{ width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background: rgba(255,255,255,0.06); border:1px solid var(--glass-stroke); color: var(--text); }
.stat-ico svg{ width:20px; height:20px; opacity:.95; }
.stat-body{ text-align:right; }
.stat-num{ font-weight:800; font-size:18px; line-height:1.1; color:#ffffff; }
.stat-label{ font-size:12px; color:var(--muted); }
/* icon micro-bounce on hover */
.stat:hover .stat-ico{ animation: micro-bounce .8s ease-out; }
@keyframes micro-bounce{ 0%{ transform: translateY(0); } 35%{ transform: translateY(-3px);} 60%{ transform: translateY(1px);} 100%{ transform: translateY(0);} }
/* optional shine sweep */
.stat{ overflow:hidden; }
.stat::after{ content:""; position:absolute; inset:-20% -50% auto -50%; height:200%; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%); transform: translateX(-100%) rotate(10deg); opacity:0; }
.stat:hover::after{ animation: shine-sweep 1s ease; opacity:1; }
@keyframes shine-sweep{ to{ transform: translateX(200%) rotate(10deg);} }
@media (prefers-reduced-motion: reduce){
  .stat:hover{ transform:none; }
  .stat:hover .stat-ico{ animation:none; }
  .stat:hover::after{ animation:none; opacity:0; }
}
@media (max-width: 700px){ .hero-stats{ grid-template-columns: 1fr; } }
.s-services .bg-layers .layer:nth-child(1){ left:15%; top:5%; }
.s-services .bg-layers .layer:nth-child(2){ right:15%; top:20%; }
.s-services .bg-layers .layer:nth-child(3){ left:40%; bottom:10%; }
.s-about .bg-layers .layer:nth-child(1){ left:12%; top:12%; }
.s-about .bg-layers .layer:nth-child(2){ right:12%; top:25%; }
.s-about .bg-layers .layer:nth-child(3){ left:45%; bottom:6%; }
.s-portfolio .bg-layers .layer:nth-child(1){ left:10%; top:8%; }
.s-portfolio .bg-layers .layer:nth-child(2){ right:14%; top:22%; }
.s-portfolio .bg-layers .layer:nth-child(3){ left:42%; bottom:8%; }
.s-contact .bg-layers .layer:nth-child(1){ left:8%; top:12%; }
.s-contact .bg-layers .layer:nth-child(2){ right:10%; top:18%; }
.s-contact .bg-layers .layer:nth-child(3){ left:46%; bottom:10%; }

/* ===== Services slide upgrades ===== */
/* Animated background: subtle moving grid + drifting blobs (scoped to .s-services) */
.s-services .bg-layers{ overflow:hidden; }
.s-services .bg-layers::before{
  /* Disabled per request */
  content:none !important;
}
.s-services .bg-layers::after{
  /* Disabled per request */
  content:none !important;
}
@keyframes grid-pan{ to{ background-position: 0 0, 0 0, 700px 700px; } }
@keyframes spin-slow{ to{ transform: rotate(1turn); } }

/* Drift existing ambient layers for extra depth */
/* Disable drifting animations for service layers */
.s-services .bg-layers .layer{ animation:none !important; }
@keyframes drift-a{ 0%{ transform: translate(-10px, 0) scale(1); } 100%{ transform: translate(14px, 6px) scale(1.06); } }
@keyframes drift-b{ 0%{ transform: translate(12px, -8px) scale(1.02); } 100%{ transform: translate(-10px, 4px) scale(1.08); } }
@keyframes drift-c{ 0%{ transform: translate(0, 8px) scale(0.98); } 100%{ transform: translate(6px, -10px) scale(1.05); } }

/* Enhance services heading */
.s-services .content h2{ background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 90%, white), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Card enhancements: ambient glow ring + icon pulse */
.svc-card{ isolation:isolate; }
.svc-card::before{
  content:"";
  position:absolute; inset:-1px; border-radius:16px;
  background: conic-gradient(from 0deg,
    color-mix(in oklab, var(--accent) 60%, transparent),
    transparent 20%,
    color-mix(in oklab, var(--primary) 60%, transparent) 45%,
    transparent 70%,
    color-mix(in oklab, var(--accent) 60%, transparent));
  filter: blur(14px);
  opacity:0; transform: scale(.98);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none; z-index:0;
}
.svc-card:hover::before{ opacity:.7; transform: none; }
.svc-icon{ will-change: transform; }
@keyframes pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }
.svc-card:hover .svc-icon{ animation: pulse 2.4s ease-in-out infinite; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .s-services .bg-layers::before,
  .s-services .bg-layers::after,
  .s-services .bg-layers .layer{ animation: none !important; }
  .svc-card:hover .svc-icon{ animation: none; }
}

/* ===== About slide: CEO profile + Quote ===== */
.s-about .about-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; margin-top:14px; align-items:stretch; }
@media (max-width: 900px){ .s-about .about-grid{ grid-template-columns: 1fr; } }
.s-about .card{ position:relative; isolation:isolate; border-radius:16px; background: var(--glass); border:1px solid var(--glass-stroke); box-shadow: var(--shadow); overflow:hidden; }
.s-about .card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:.55; filter: blur(14px);
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 35%, transparent), transparent 45%, color-mix(in oklab, var(--accent) 28%, transparent));
  transition: opacity .35s ease; }
.s-about .card:hover::before{ opacity:.85; }

/* CEO card */
.s-about .ceo{ display:flex; align-items:center; gap:24px; padding:16px; flex-direction: row-reverse;}
.s-about .avatar-wrap{ width:64px; height:64px; position:relative; flex:0 0 auto; }
.s-about .avatar-ring{ position:absolute; inset:-6px; border-radius:50%; background: conic-gradient(from 140deg, rgba(239,191,127,.85), rgba(239,191,127,.2), transparent 40%, rgba(239,191,127,.65)); filter: blur(8px); opacity:.85; animation: spin-slow 8s linear infinite; }
.s-about .avatar{ width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px -12px rgba(0,0,0,.7); }
.s-about .ceo-body{ min-width:0; text-align:right; }
.s-about .ceo-name{ margin:0; font-size:1rem; letter-spacing:.2px; }
.s-about .ceo-role{ margin:.15rem 0 0; font-size:.92rem; color: var(--muted); opacity:.9; }
.s-about .badges{ display:flex; flex-wrap:wrap; gap:8px; margin:.75rem 0 0; padding:0; list-style:none; }
.s-about .badges li{ padding:.4rem .65rem; border-radius:999px; background: rgba(239,191,127,.08); border:1px solid rgba(239,191,127,.22); color:#eecb9c; font-weight:600; font-size:.7rem; }
.s-about .badges li:hover{ background: rgba(239,191,127,.14); }

/* Quote card */
.s-about .quote{ padding:16px 18px; }
.s-about .quote-mark{ position:absolute; inset:auto auto -14px -2px; font-size:8rem; line-height:1; color: rgba(239,191,127,.1); text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.s-about blockquote.q{ margin:0; position:relative; padding-inline-end:14px; border-inline-end: 2px solid rgba(239,191,127,.34); text-align:right; }
.s-about blockquote.q p{ margin:0; color: var(--text); font-size:1.05rem; }
.s-about blockquote.q footer{ margin-top:.75rem; color:#eecb9c; font-weight:700; letter-spacing:.3px; }
.s-about .quote::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px 120px at 10% 110%, rgba(239,191,127,.13), transparent 40%); mix-blend-mode: screen; animation: q-pan 10s linear infinite; }
@keyframes q-pan{ from{ transform: translateX(-10%);} to{ transform: translateX(10%);} }
@media (prefers-reduced-motion: reduce){ .s-about .avatar-ring{ animation:none; } .s-about .quote::after{ animation:none; } }


article.svc-card h3 {
    display:flex;
    flex-direction: row-reverse;
    align-content: center;
    align-items: center;
    font-size:11px;
    text-align: right;
}

h2.fx.visible {
    line-height: 1em;
    margin-top: 20px;
}
.svc-card .link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex
;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--glass-stroke);
    background: rgba(255, 255, 255, 0.04);
    text-align: right !important;
    margin: auto;
    corner-shape: scoop;
}

span.svc-icon {
    text-align: right;
    margin: 0;
    margin-left: 15px;
}

.kicker {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--glass-stroke);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    color: var(--muted);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: .2px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    padding: 5px 20px;
}

ul.contact-list {
    direction: rtl !important;
}
ul.contact-list a {
    color: #f3cc9a;
    text-decoration: none;
    font-weight: bold;
}
a.cert {
    height: 130px;
    background: #ffffff90;
}
.cta {
    display: flex
;
    gap: 10px;
    justify-content: center;
}
a.brand {
    display: flex
;
    align-items: center;
    gap:14px
}

a.brand img {
    filter: invert(1) sepia(100) drop-shadow(2px 4px 6px black);
    max-width: 55px !important;
}

button.pill {
    font-family: 'Peyda';
}
.contact-ways-in {
    position: absolute;
    left: 20px;
}
button {
    font-family: 'Peyda';
}
@media (max-width: 800px) {
    .nav-toggle {
        display: flex
;
        left: 10px;
        position: absolute;
    }
    h1.fx.visible {
    font-size: 16px;
}
.slide {
    overflow-x: hidden;
    overflow-y: scroll;
    padding-bottom: 80px;
    padding-top: 80px;
}
section.slide.s-services.active, section.slide.s-about.active, section.slide.s-portfolio.active, section.slide.s-contact.active {
    overflow-y: scroll;
    padding-top: 80px;
    overflow-x: hidden;
   padding-bottom: 130px;
}
.s-about .avatar-wrap {
    width: 64px;
    height: 64px;
    position: relative;
    flex: 0 0 auto;
}
.s-about .badges li {
    font-size: 0.6em;
}

}

.s-about .avatar-ring {
    z-index: -1;
}
.s-about blockquote.q p {
    justify-self: right;
    direction: rtl;
}
p.muted.fx.visible {
    direction: rtl;
}
nav.nav {
    display: flex
;
    gap: 20px;
}

.pf-cta a {
    color: var(--text);
    text-decoration: none;
}

@media (max-width: 800px) {
    .nav-list {
        top: 64px;
    }
    .nav-toggle {
        left: 70px;
    }
    .contact-cta {
    border-radius: 12px;
    left: 5px;
    width: 34px;
    height: 34px;
}
}
@media (max-width: 700px) {
    .cert-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .contact-grid.fx.visible {
    display: flex
;
    flex-direction: column-reverse;
}
}

/* === Overrides: Requested removals === */
/* Remove shimmer / shine animation from hero main heading */
.s-hero h1::after{ content:none !important; animation:none !important; }
/* Keep gradient text but if you prefer solid color, uncomment next line */
/* .s-hero h1{ background:none; color:var(--text); } */

/* Remove wheel/ring light glow behind service cards */
.svc-card::before{ content:none !important; animation:none !important; display:none !important; }
/* Also suppress the older radial hover flare if undesired */
.svc-card::after{ opacity:0 !important; }
/* Prevent icon pulse since ring removed (optional) */
.svc-card:hover .svc-icon{ animation:none !important; }

a:-webkit-any-link.brand {
    text-decoration: none;
}