@font-face {
  font-family: "Vazirmatn";
  src: url("./assets/fonts/Vazirmatn.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy: #0c3161;
  --blue: #146fc3;
  --blue-2: #43a7ed;
  --ice: #eaf6ff;
  --ink: #102a45;
  --muted: #61788e;
  --white: #fff;
  --line: rgba(21, 102, 174, .13);
  --shadow: 0 20px 55px rgba(13, 67, 116, .13);
  --radius: 26px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: #f8fbfe;
  font-family: "Vazirmatn", system-ui, sans-serif;
  line-height: 1.8;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.site-header {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  padding: 14px 0;
  transition: padding .35s ease, background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled {
  padding: 8px 0;
  background: rgba(244, 250, 255, .82);
  box-shadow: 0 12px 40px rgba(8, 61, 109, .1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav-shell {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 9px 13px 9px 18px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 22px;
  background: linear-gradient(110deg, rgba(255,255,255,.92), rgba(222,242,255,.82));
  box-shadow: 0 15px 45px rgba(12, 76, 130, .12);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}
.brand {
  width: 96px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
}
.brand img { width: 100%; height: 100%; object-fit: contain; }
.nav-list { display: flex; align-items: center; gap: 5px; list-style: none; }
.nav-link {
  position: relative;
  display: block;
  padding: 10px 15px;
  border-radius: 13px;
  color: #234d73;
  font-size: .94rem;
  font-weight: 600;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 5px;
  width: 0;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--blue-2), var(--blue));
  transform: translateX(50%);
  transition: width .25s ease;
}
.nav-link:hover, .nav-link.active { color: var(--blue); background: rgba(255,255,255,.58); transform: translateY(-1px); }
.nav-link:hover::after, .nav-link.active::after { width: 25px; }
.nav-link.contact { color: white; background: linear-gradient(135deg, var(--blue), #095da9); box-shadow: 0 9px 22px rgba(19, 108, 188, .23); }
.nav-link.contact::after { display: none; }
.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 15px;
  color: var(--navy);
  background: rgba(255,255,255,.78);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  width: 22px; height: 2px; border-radius: 5px; background: currentColor; transition: .28s ease;
}
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; right: 0; }
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }
.menu-toggle.open span { background: transparent; }
.menu-toggle.open span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.open span::after { top: 0; transform: rotate(-45deg); }

.hero {
  position: relative;
  min-height: 810px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #d9edfc;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("./Images/hero-main-v1.png") center/cover no-repeat;
  animation: heroZoom 12s ease-out both;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 43, 82, .05) 0%, rgba(237, 248, 255, .08) 44%, rgba(247, 252, 255, .97) 83%, #f9fdff 100%);
}
@keyframes heroZoom { from { transform: scale(1.055); } to { transform: scale(1); } }
.hero-content { width: min(1180px, calc(100% - 40px)); margin: 95px auto 0; }
.hero-copy { width: min(545px, 48%); margin-right: 0; margin-left: auto; text-align: right; animation: heroEnter .9s .18s cubic-bezier(.2,.8,.2,1) both; }
@keyframes heroEnter { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: -.2px;
}
.hero-kicker::before { content: ""; width: 32px; height: 2px; border-radius: 4px; background: var(--blue-2); }
.hero h1 { direction: ltr; color: var(--navy); font-size: clamp(2.7rem, 4.5vw, 4.55rem); line-height: 1.05; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.hero h1 span { display: block; color: var(--blue); font-size: .47em; margin-top: 18px; letter-spacing: -.8px; font-weight: 600; }
.hero-text { max-width: 500px; margin: 24px 0 0 auto; color: #486985; font-size: 1.05rem; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 51px;
  padding: 0 22px;
  border-radius: 15px;
  font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--blue-2), var(--blue)); box-shadow: 0 14px 28px rgba(19, 110, 194, .25); }
.btn-ghost { color: var(--navy); border: 1px solid rgba(18, 99, 170, .17); background: rgba(255,255,255,.64); backdrop-filter: blur(10px); }
.scroll-cue { position: absolute; bottom: 27px; right: 50%; color: #42769f; transform: translateX(50%); font-size: .78rem; text-align: center; }
.scroll-cue i { display: block; width: 24px; height: 38px; margin: 6px auto 0; border: 1.5px solid rgba(31,109,171,.4); border-radius: 20px; }
.scroll-cue i::after { content: ""; display: block; width: 4px; height: 7px; margin: 7px auto; border-radius: 5px; background: var(--blue); animation: scrollDot 1.6s infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }

.section { padding: 105px 0; }
.section-head { max-width: 680px; margin: 0 auto 45px; text-align: center; }
.eyebrow { color: var(--blue); font-size: .88rem; font-weight: 700; }
.section-title { margin-top: 7px; color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.35; }
.section-desc { margin-top: 12px; color: var(--muted); }
.products { background: linear-gradient(180deg, #f8fbfe, #eef7fe); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card {
  position: relative;
  overflow: hidden;
  min-height: 325px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  box-shadow: 0 13px 38px rgba(12,75,129,.07);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.product-card:hover { transform: translateY(-9px); border-color: rgba(38,140,219,.32); box-shadow: var(--shadow); }
.product-visual { width: 100%; height: 185px; display: grid; place-items: center; margin: 16px 0 23px; }
.product-visual img { max-width: 100%; max-height: 175px; object-fit: contain; transition: transform .4s ease; }
.product-card:hover img { transform: scale(1.05); }
.product-card h3 {
  position: relative;
  z-index: 1;
  width: calc(100% + 40px);
  margin-inline: -20px;
  padding: 9px 22px;
  color: white;
  background: linear-gradient(100deg, #0b4f91, #1787d5 58%, #49b4ef);
  box-shadow: 0 9px 20px rgba(15, 104, 177, .22);
  font-size: 1.16rem;
  text-align: center;
}
.product-card h3::before,
.product-card h3::after {
  content: "";
  position: absolute;
  bottom: -8px;
  width: 13px;
  height: 8px;
  background: #073d73;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.product-card h3::before { right: 0; }
.product-card h3::after { left: 0; }
.product-card p { margin-top: 7px; color: var(--muted); font-size: .86rem; text-align: center; }
.product-more { margin-top: auto; padding-top: 14px; color: var(--blue); font-size: .86rem; font-weight: 700; }

.apps { position: relative; overflow: hidden; background: var(--navy); color: white; }
.apps::before, .apps::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); }
.apps::before { width: 420px; height: 420px; top: -220px; right: -130px; background: rgba(56,166,237,.24); }
.apps::after { width: 330px; height: 330px; bottom: -220px; left: -100px; background: rgba(74,180,245,.15); }
.apps-inner { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 65px; align-items: center; }
.apps-copy .eyebrow { color: #80cfff; }
.apps-copy h2 { margin: 8px 0 16px; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.apps-copy p { color: #c8deef; }
.version-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.version-card { display: flex; align-items: center; gap: 13px; padding: 17px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.075); backdrop-filter: blur(8px); transition: .3s ease; }
.version-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.13); }
.version-no { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: linear-gradient(145deg, #48b5f7, #1476c7); font-weight: 800; }
.version-card small { display: block; color: #a9cbe4; }

.about-grid { max-width: 900px; text-align: center; }
.about-copy { padding: 50px clamp(22px, 5vw, 62px); border: 1px solid var(--line); border-radius: 32px; background: linear-gradient(145deg, #fff, #eff8ff); box-shadow: var(--shadow); }
.about-copy h2 { margin: 8px 0 17px; color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.55rem); }
.about-copy p { color: var(--muted); }
.about-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.about-point { display: flex; align-items: center; gap: 11px; color: #315673; font-weight: 600; }
.about-point i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--ice); color: var(--blue); font-style: normal; }

.contact-section { padding: 0 0 100px; }
.contact-box { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 42px 48px; border-radius: 30px; color: white; background: linear-gradient(120deg, #0b3565, #1179ca); box-shadow: 0 25px 55px rgba(12,80,139,.21); }
.contact-box h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
.contact-box p { color: #cbe5f7; margin-top: 6px; }
.contact-box .btn { flex: 0 0 auto; color: var(--navy); background: white; }
footer { padding: 28px 0; color: #698097; background: #eef6fc; text-align: center; font-size: .88rem; }
.apps-heading{max-width:720px;margin:0 auto 50px;text-align:center}.apps-heading .eyebrow{color:#80cfff}.apps-heading h2{margin:8px 0 10px;font-size:clamp(1.8rem,3vw,2.7rem)}.apps-heading p{color:#c8deef}.software-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.software-card{position:relative;min-height:580px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:18px;padding:30px;border:1px solid rgba(255,255,255,.14);border-radius:30px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055));box-shadow:0 24px 50px rgba(3,24,48,.18);backdrop-filter:blur(10px)}.software-card::after{content:"";position:absolute;width:220px;height:220px;left:-90px;bottom:-100px;border-radius:50%;background:rgba(68,177,241,.13)}.software-info{position:relative;z-index:3;align-self:center}.software-info>img{width:70px;height:70px;margin-bottom:18px;border-radius:19px;object-fit:cover;box-shadow:0 13px 28px rgba(2,23,47,.2)}.software-info h3{direction:ltr;font-size:1.55rem}.software-info p{margin-top:10px;color:#bdd7e9;font-size:.87rem}.flagship-phone{position:relative;z-index:2;width:220px;height:465px;justify-self:center;padding:8px;border:3px solid #081927;border-radius:38px;background:#091825;box-shadow:0 32px 48px rgba(2,18,35,.36)}.flagship-phone::before{content:"";position:absolute;z-index:4;top:8px;left:50%;width:76px;height:22px;border-radius:0 0 15px 15px;background:#091825;transform:translateX(-50%)}.flagship-phone img{width:100%;height:100%;border-radius:28px;object-fit:cover;object-position:top}.phone-camera{position:absolute;z-index:5;top:14px;left:50%;width:7px;height:7px;border:2px solid #263c4d;border-radius:50%;background:#02070b;transform:translateX(-50%)}.phone-speaker{position:absolute;z-index:5;top:16px;left:calc(50% - 24px);width:18px;height:3px;border-radius:4px;background:#344b5c}.phone-button{position:absolute;right:-6px;top:105px;width:3px;height:70px;border-radius:3px;background:#203645}.software-tag{position:absolute;z-index:4;left:22px;bottom:22px;padding:8px 13px;border-radius:12px;color:#fff;background:linear-gradient(110deg,var(--blue),var(--blue-2));box-shadow:0 11px 22px rgba(1,22,44,.25);font-size:.76rem;font-weight:700}.contact-actions{display:flex;gap:11px;flex-wrap:wrap}.contact-channel{min-height:62px;display:flex;align-items:center;gap:11px;padding:9px 13px;border:1px solid rgba(255,255,255,.22);border-radius:17px;background:rgba(255,255,255,.1);transition:.3s}.contact-channel:hover{transform:translateY(-4px);background:rgba(255,255,255,.17)}.contact-channel>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:var(--navy);background:#fff;font-size:1.2rem}.contact-channel small{display:block;color:#b9dcf3}.contact-channel bdi{direction:ltr;font-size:.78rem;font-weight:700}.site-footer{padding:0;color:#c4dced;background:linear-gradient(120deg,#061f3c,#0a3b6b);text-align:initial;font-size:.88rem}.footer-main{min-height:250px;display:grid;grid-template-columns:1.25fr .8fr .65fr .9fr;align-items:center;gap:35px;padding-block:42px}.footer-identity{display:flex;align-items:center;gap:17px}.footer-identity>a{width:88px;height:86px;flex:0 0 auto;padding:6px;border-radius:20px;background:#fff}.footer-identity img{width:100%;height:100%;object-fit:contain}.footer-identity strong{direction:ltr;display:block;color:#fff;font-size:1.15rem}.footer-identity p{margin-top:5px;color:#91b2ca}.experience-badge{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.06)}.experience-badge b{color:#68c7ff;font-size:2.8rem;line-height:1}.experience-badge span{color:#d5e8f5;font-size:.8rem}.footer-nav,.footer-contact{display:grid;gap:7px}.footer-nav strong,.footer-contact strong{margin-bottom:5px;color:#fff}.footer-nav a,.footer-contact a{color:#9ebbd0;transition:.25s}.footer-nav a:hover,.footer-contact a:hover{color:#fff;transform:translateX(-3px)}.footer-contact a{direction:ltr;text-align:right}.footer-bottom{padding:17px 0;border-top:1px solid rgba(255,255,255,.08);color:#7699b5;text-align:center}

.site-entry {
  display: none;
  position: fixed;
  z-index: 5000;
  inset: 0;
  place-items: center;
  overflow: hidden;
  color: var(--navy);
  background: radial-gradient(circle at 50% 44%, #fff 0, #e8f6ff 42%, #b9ddf7 100%);
}
.show-entry .site-entry { display: grid; }
.site-entry::before,
.site-entry::after { content: ""; position: absolute; border: 1px solid rgba(31,125,198,.16); border-radius: 50%; animation: entryRing 1.7s ease-out both; }
.site-entry::before { width: 380px; height: 380px; }
.site-entry::after { width: 540px; height: 540px; animation-delay: .16s; }
.site-entry img { position: relative; z-index: 2; width: 155px; max-height: 195px; object-fit: contain; animation: entryLogo 1.35s cubic-bezier(.2,.8,.2,1) both; }
.site-entry span { position: absolute; z-index: 2; top: calc(50% + 118px); direction: ltr; font-weight: 800; letter-spacing: 5px; animation: entryText 1s .35s ease both; }
.entry-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(44,154,226,.22); filter: blur(50px); animation: entryGlow 1.8s ease both; }
.site-entry.leaving { animation: entryLeave .7s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes entryLogo { from { opacity: 0; transform: translateY(18px) scale(.72); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes entryText { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes entryRing { from { opacity: 0; transform: scale(.45); } 55% { opacity: 1; } to { opacity: 0; transform: scale(1.15); } }
@keyframes entryGlow { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes entryLeave { to { opacity: 0; visibility: hidden; transform: scale(1.035); } }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; } .delay-2 { transition-delay: .16s; } .delay-3 { transition-delay: .24s; }

@media (max-width: 980px) {
  .menu-toggle { display: flex; }
  .nav-list {
    position: fixed;
    top: 100px;
    right: 20px;
    left: 20px;
    display: grid;
    gap: 4px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 22px;
    background: rgba(244,250,255,.97);
    box-shadow: 0 25px 60px rgba(8,57,103,.18);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(.98);
    transition: .28s ease;
  }
  .nav-list.open { opacity: 1; visibility: visible; transform: none; }
  .nav-link { text-align: center; padding: 11px; }
  .hero { min-height: 760px; align-items: end; padding-bottom: 100px; }
  .hero::before { background-position: 33% center; }
  .hero::after { background: linear-gradient(0deg, rgba(246,251,255,.99) 0%, rgba(241,249,255,.9) 38%, rgba(10,52,93,.03) 75%); }
  .hero-content { margin-top: 0; }
  .hero-copy { width: min(600px, 100%); margin: 0 auto; text-align: center; }
  .hero-kicker { justify-content: center; }
  .hero-text { margin-inline: auto; }
  .hero-actions { justify-content: center; }
      .product-grid { grid-template-columns: repeat(2, 1fr); }
      .apps-inner, .about-grid { gap: 40px; }
      .software-grid { grid-template-columns: 1fr; }
      .software-card { width: min(720px,100%); margin-inline:auto; grid-template-columns:1fr 1fr; }
      .footer-main { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 680px) {
  .container, .hero-content { width: min(100% - 28px, 1180px); }
  .site-header { padding: 9px 0; }
  .nav-shell { min-height: 64px; padding: 7px 9px 7px 12px; border-radius: 18px; }
    .brand { width: 76px; height: 54px; }
  .nav-list { top: 86px; right: 14px; left: 14px; }
  .hero { min-height: 720px; padding-bottom: 88px; }
  .hero::before { background-position: 26% center; }
      .hero h1 { font-size: clamp(2.25rem, 10.4vw, 3rem); letter-spacing: -2px; }
  .hero h1 span { font-size: .42em; margin-top: 14px; }
  .hero-text { font-size: .93rem; }
  .hero-actions { flex-direction: column; width: min(310px,100%); margin-inline: auto; }
  .btn { width: 100%; }
  .scroll-cue { display: none; }
  .section { padding: 76px 0; }
  .section-head { margin-bottom: 30px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 300px; }
    .apps-inner { grid-template-columns: 1fr; gap: 35px; }
  .version-list { grid-template-columns: 1fr; }
    .about-points { grid-template-columns: 1fr; }
    .about-point { justify-content: center; }
  .contact-section { padding-bottom: 70px; }
      .contact-box { flex-direction: column; padding: 32px 23px; text-align: center; }
      .contact-box .btn { width: min(280px, 100%); }
      .contact-actions { width:100%; flex-direction:column; }
      .contact-channel { width:100%; text-align:right; }
      .software-card { min-height:auto;grid-template-columns:1fr;padding:26px 18px 35px;text-align:center; }
      .software-info>img { margin-inline:auto; }
      .software-info p { max-width:340px;margin-inline:auto; }
      .flagship-phone { width:205px;height:435px; }
      .software-tag { left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap; }
      .footer-main { display:flex;flex-direction:column;text-align:center; }
      .footer-identity { flex-direction:column; }
      .footer-contact a { text-align:center; }
      .experience-badge { width:min(300px,100%);justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
.flagship-phone::before{top:1px;width:42px;height:6px;border-radius:0 0 7px 7px}.phone-camera{top:1px;width:4px;height:4px;border-width:1px}.phone-speaker{display:none}
.software-info{text-align:center}.software-info>img{margin-inline:auto}.software-info p{margin-inline:auto}
.app-slider{cursor:grab;touch-action:pan-y;user-select:none;outline:none}.app-slider:active{cursor:grabbing}.app-slider:focus-visible{box-shadow:0 0 0 4px rgba(79,184,245,.45),0 32px 48px rgba(2,18,35,.36)}.app-slider-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:28px;background:#edf7fc}.app-slider-screen>img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;object-position:top;will-change:transform,opacity;transition:transform .38s cubic-bezier(.22,.75,.18,1),opacity .3s ease}.app-slider-screen>.slide-incoming{z-index:2;transform:translateX(calc(var(--slide-direction,1) * 100%));box-shadow:0 0 24px rgba(3,27,53,.18)}.app-slider-screen.is-sliding>img:first-child{transform:translateX(calc(var(--slide-direction,1) * -22%)) scale(.985);opacity:.72}.app-slider-screen.is-sliding>.slide-incoming{transform:translateX(0)}.phone-pagination{position:absolute;z-index:8;right:50%;bottom:-30px;display:flex;gap:8px;transform:translateX(50%)}.phone-pagination button{width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.38);transition:.25s}.phone-pagination button.active{width:28px;border-radius:7px;background:#5bc3ff;box-shadow:0 0 12px rgba(91,195,255,.55)}.phone-pagination button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.software-card[data-href]{cursor:pointer;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}.software-card[data-href]:hover{transform:translateY(-7px);border-color:rgba(89,193,248,.35);box-shadow:0 30px 65px rgba(2,20,40,.28)}.software-card[data-href]:focus-visible{outline:3px solid #64c8fb;outline-offset:5px}
@media(max-width:980px){.nav-shell{position:relative}.menu-toggle{position:absolute;left:9px;top:50%;margin:0;transform:translateY(-50%)}}
.experience-badge strong{color:#68c7ff;font-size:.95rem;line-height:1.5;white-space:nowrap}
section[id]{scroll-margin-top:110px}