/* فونت پیدا */
@font-face{ font-family:'Peyda'; src:url('../fonts/PeydaWeb-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Peyda'; src:url('../fonts/PeydaWeb-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Peyda'; src:url('../fonts/PeydaWeb-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Peyda'; src:url('../fonts/PeydaWeb-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Peyda'; src:url('../fonts/PeydaWeb-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Peyda'; src:url('../fonts/PeydaWeb-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

/* =========================================================
   SarvSmart — Design tokens
   پالت: سبز سرو (نماد نام برند) + طلایی گرم به‌عنوان تاکید
   ========================================================= */
:root{
	--ink:#10201A;
	--ink-soft:#1B2E25;
	--paper:#F6F3EC;
	--paper-dim:#EDE8DC;
	--cypress:#2E6E52;
	--cypress-dark:#1F4E3A;
	--ember:#C89B4A;
	--slate:#26302B;
	--slate-70:rgba(38,48,43,.7);
	--line:rgba(16,32,26,.12);
	--white:#ffffff;
	--radius-s:3px;
	--radius-m:6px;
	--container:1180px;
	--font:'Peyda', Tahoma, sans-serif;
	--ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family:var(--font);
	background:var(--paper);
	color:var(--slate);
	line-height:1.75;
	font-size:16px;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-weight:900; line-height:1.28; margin:0 0 .5em; color:var(--ink); }
h1{ font-size:clamp(2rem, 4vw, 3.2rem); }
h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
h3{ font-size:1.15rem; font-weight:700; }
p{ margin:0 0 1em; color:var(--slate-70); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

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

.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }

/* buttons */
.btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:14px 28px; border-radius:var(--radius-s);
	font-weight:700; font-size:.95rem; border:1px solid transparent;
	transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn--primary{ background:var(--cypress); color:var(--white); }
.btn--primary:hover{ background:var(--cypress-dark); transform:translateY(-2px); }
.btn--ghost{ border-color:rgba(255,255,255,.5); color:var(--white); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn--block{ width:100%; justify-content:center; }

.section-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.section-heading h2{ margin:0; }
.link-arrow{ font-weight:700; color:var(--cypress-dark); border-bottom:1px solid currentColor; padding-bottom:2px; }

/* =========================================================
   Header
   ========================================================= */
.site-header{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.site-header__logo{ display:flex; align-items:center; gap:10px; color:var(--ink); }
.logo-mark{ color:var(--cypress); display:inline-flex; }
.logo-text{ font-weight:900; font-size:1.15rem; letter-spacing:-.01em; }
.nav-menu{ display:flex; gap:32px; }
.nav-menu a{ font-weight:600; color:var(--slate); padding:8px 0; position:relative; }
.nav-menu a:hover{ color:var(--cypress-dark); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); display:block; }
.mobile-menu{ display:none; }

/* =========================================================
   Hero slider
   ========================================================= */
.hero-slider{ position:relative; height:min(86vh, 720px); min-height:460px; overflow:hidden; background:var(--ink); }
.hero-slider__track{ display:flex; height:100%; transition:transform .7s var(--ease); }
.hero-slide{
	flex:0 0 100%; height:100%; display:flex; align-items:center;
	background-size:cover; background-position:center;
	background-color:var(--cypress-dark);
}
.hero-slide--sample{ background-image:linear-gradient(135deg, var(--cypress-dark), var(--ink)); }
.hero-slide__content{ max-width:640px; }
.hero-slide__content h1{ color:var(--white); }
.hero-slide__content p{ color:rgba(246,243,236,.86); font-size:1.1rem; }
.hero-slider__arrow{
	position:absolute; top:50%; translate:0 -50%;
	width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
	background:rgba(16,32,26,.35); color:var(--white); font-size:1.4rem; line-height:1;
	display:flex; align-items:center; justify-content:center;
	transition:background .2s var(--ease);
}
.hero-slider__arrow:hover{ background:rgba(16,32,26,.65); }
.hero-slider__arrow--prev{ right:24px; }
.hero-slider__arrow--next{ left:24px; }
.hero-slider__dots{ position:absolute; bottom:22px; inset-inline:0; display:flex; justify-content:center; gap:8px; }
.hero-slider__dots button{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.4); padding:0; }
.hero-slider__dots button.is-active{ background:var(--ember); width:22px; border-radius:5px; transition:width .3s var(--ease); }
.hero-slider__notice{ position:absolute; top:12px; inset-inline:0; text-align:center; font-size:.8rem; color:rgba(255,255,255,.7); margin:0; }

/* =========================================================
   Intro
   ========================================================= */
.intro{ padding:96px 0; }
.intro__grid{ display:grid; grid-template-columns:.9fr 1.4fr; gap:64px; align-items:start; }
.intro__lead p{ font-size:1.05rem; }
.intro__points{ display:flex; flex-direction:column; gap:28px; }
.intro__point{ padding-inline-start:20px; border-inline-start:2px solid var(--line); }
.intro__point h3{ color:var(--cypress-dark); margin-bottom:.35em; }

/* =========================================================
   Projects grid (asymmetric)
   ========================================================= */
.projects-showcase{ padding:0 0 96px; }
.projects-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.project-card{
	display:block; border-radius:var(--radius-m); overflow:hidden; background:var(--white);
	border:1px solid var(--line); transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.project-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -20px rgba(16,32,26,.35); }
.project-card--wide{ grid-column:span 2; }
.project-card--wide .project-card__media{ aspect-ratio:16/8; }
.project-card__media{ aspect-ratio:4/3; background:var(--paper-dim); overflow:hidden; }
.project-card__media img{ width:100%; height:100%; object-fit:cover; }
.project-card__body{ padding:18px 20px 22px; }
.project-card__tag{ display:inline-block; font-size:.75rem; font-weight:700; color:var(--cypress-dark); background:rgba(46,110,82,.1); padding:4px 10px; border-radius:20px; margin-bottom:10px; }
.project-card__body h3{ margin-bottom:.3em; }
.project-card__meta{ margin:0; font-size:.85rem; color:var(--slate-70); }
.empty-state{ grid-column:1/-1; padding:48px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius-m); color:var(--slate-70); }

/* =========================================================
   CTA banner
   ========================================================= */
.cta-banner{ background:var(--ink); padding:80px 0; }
.cta-banner__inner{ text-align:center; max-width:560px; margin-inline:auto; }
.cta-banner__inner h2{ color:var(--white); }
.cta-banner__inner p{ color:rgba(246,243,236,.75); }

/* =========================================================
   Project single page
   ========================================================= */
.breadcrumb{ font-size:.85rem; color:rgba(246,243,236,.7); margin-bottom:18px; }
.breadcrumb a{ color:rgba(246,243,236,.7); }
.breadcrumb span{ color:var(--white); }
.project-hero{ background-size:cover; background-position:center; background-color:var(--cypress-dark); padding:120px 0 56px; }
.project-hero h1{ color:var(--white); margin-bottom:10px; }
.project-hero__tag{ display:inline-block; background:var(--ember); color:var(--ink); font-weight:700; font-size:.8rem; padding:5px 12px; border-radius:20px; }
.project-layout{ display:grid; grid-template-columns:1fr 300px; gap:56px; padding:64px 0; align-items:start; }
.project-content :is(h2,h3){ margin-top:1.4em; }
.project-gallery{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:32px; }
.project-gallery__item{ display:block; border-radius:var(--radius-m); overflow:hidden; aspect-ratio:4/3; }
.project-gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease); }
.project-gallery__item:hover img{ transform:scale(1.05); }
.project-sidebar__card{ position:sticky; top:96px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:26px; }
.project-sidebar__card h2{ font-size:1.05rem; margin-bottom:16px; }
.project-sidebar__card ul{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.project-sidebar__card li{ display:flex; justify-content:space-between; font-size:.9rem; border-bottom:1px dashed var(--line); padding-bottom:10px; }
.project-sidebar__card li span{ color:var(--slate-70); }
.related-projects{ padding-bottom:80px; }

/* =========================================================
   Archive
   ========================================================= */
.archive-header{ padding:64px 0 40px; text-align:center; }
.filter-pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.filter-pill{ padding:9px 18px; border-radius:20px; border:1px solid var(--line); background:var(--white); font-weight:600; font-size:.88rem; transition:all .2s var(--ease); }
.filter-pill.is-active, .filter-pill:hover{ background:var(--cypress); color:var(--white); border-color:var(--cypress); }
.project-card-wrap{ display:contents; }
.project-card-wrap.is-hidden{ display:none; }

/* =========================================================
   Generic pages / blog
   ========================================================= */
.page-header{ padding:72px 0 28px; }
.page-content{ padding-bottom:80px; max-width:820px; }
.page-content__thumb{ border-radius:var(--radius-m); overflow:hidden; margin-bottom:32px; aspect-ratio:16/8; }
.page-content__thumb img{ width:100%; height:100%; object-fit:cover; }
.post-meta{ color:var(--slate-70); font-size:.9rem; }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-bottom:24px; }
.blog-card{ display:block; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; background:var(--white); }
.blog-card__media{ aspect-ratio:4/3; overflow:hidden; }
.blog-card__media img{ width:100%; height:100%; object-fit:cover; }
.blog-card__body{ padding:18px 20px; }

.error-404{ text-align:center; padding:120px 0; }
.error-404 h1{ font-size:5rem; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--ink); color:rgba(246,243,236,.75); padding:72px 0 0; margin-top:40px; }
.site-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer .logo-mark{ color:var(--ember); }
.site-footer .logo-text{ color:var(--white); }
.site-footer__about p{ color:rgba(246,243,236,.6); margin-top:14px; }
.site-footer h3{ color:var(--white); font-size:1rem; margin-bottom:16px; }
.footer-menu{ display:flex; flex-direction:column; gap:10px; }
.footer-menu a:hover{ color:var(--white); }
.site-footer__bottom{ padding:22px 0; font-size:.85rem; text-align:center; color:rgba(246,243,236,.5); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px){
	.intro__grid{ grid-template-columns:1fr; gap:36px; }
	.projects-grid, .blog-grid{ grid-template-columns:repeat(2,1fr); }
	.project-card--wide{ grid-column:span 2; }
	.project-layout{ grid-template-columns:1fr; }
	.project-sidebar__card{ position:static; }
	.site-footer__grid{ grid-template-columns:1fr; }
}

@media (max-width: 680px){
	.nav-menu{ display:none; }
	.nav-toggle{ display:flex; }
	.mobile-menu.is-open{ display:block; padding:16px 24px 24px; border-top:1px solid var(--line); }
	.mobile-menu__list{ display:flex; flex-direction:column; gap:14px; }
	.projects-grid, .blog-grid{ grid-template-columns:1fr; }
	.project-card--wide{ grid-column:span 1; }
	.hero-slider__arrow{ width:38px; height:38px; font-size:1.1rem; }
	.hero-slider{ height:78vh; }
}

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


/* ===== Placeholders (until real photos are added) ===== */
.ph-media{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--cypress),var(--ink)); color:rgba(255,255,255,.4); }
.project-card:nth-child(2n) .ph-media{ background:linear-gradient(135deg,var(--ember),var(--cypress-dark)); }
.project-card:nth-child(3n) .ph-media{ background:linear-gradient(135deg,var(--ink-soft),var(--cypress)); }

/* ===== Hero phone ===== */
.hero-phone{ background:radial-gradient(900px 500px at 25% 30%, #1F4E3A 0%, var(--ink) 70%); overflow:hidden; }
.hero-phone__intro{ min-height:calc(100vh - 76px); min-height:calc(100svh - 76px); display:flex; align-items:center; text-align:center; }
.hero-phone__text{ padding-block:48px; }
.hero-phone__scroll{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:36px; color:var(--ember); font-size:.9rem; font-weight:700; }
.hero-phone__scroll span{ animation:scrollNudge 1.8s infinite; }
@keyframes scrollNudge{ 50%{ transform:translateY(6px); } }
@media (prefers-reduced-motion:reduce){ .hero-phone__scroll span{ animation:none; } }
.hero-scene{ padding:24px 0 64px; }
.hero-scene__grid{ display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:center; }
.hero-phone h1{ color:var(--white); }
.hero-phone p{ color:rgba(246,243,236,.82); font-size:1.08rem; max-width:620px; margin-inline:auto; }
.hero-phone .hero-phone__hint{ font-size:.85rem; color:var(--ember); margin:12px auto 0; text-align:center; max-width:none; }
.hero-phone__stage{ display:flex; justify-content:center; }
.phone{ position:relative; width:220px; height:480px; border-radius:36px; background:#0B1511; border:6px solid #2B3A33; box-shadow:0 30px 60px -20px rgba(0,0,0,.65); will-change:transform,opacity; }
.phone__notch{ position:absolute; top:8px; left:50%; translate:-50% 0; width:70px; height:18px; border-radius:12px; background:#2B3A33; }
.phone__screen{ padding:40px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.phone__head small{ display:block; color:rgba(246,243,236,.55); font-size:.75rem; }
.phone__head b{ color:var(--white); font-size:1rem; }
.phone__scenes{ display:flex; gap:6px; }
.scene{ flex:1; border:0; border-radius:10px; padding:7px 2px; font-size:.7rem; font-weight:700; font-family:inherit; background:#16251F; color:var(--paper); cursor:pointer; }
.scene[aria-pressed="true"]{ background:var(--ember); color:var(--ink); }
.ctl{ display:flex; justify-content:space-between; align-items:center; padding:9px 12px; font-size:.82rem; font-family:inherit; border-radius:14px; border:0; background:#16251F; color:var(--paper); font-weight:700; cursor:pointer; }
.ctl i{ width:38px; height:22px; border-radius:12px; background:#3A4A42; position:relative; transition:background .3s; flex:none; }
.ctl i::after{ content:""; position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .3s var(--ease); }
.ctl.is-on i{ background:var(--cypress); }
.ctl.is-on i::after{ transform:translateX(-16px); }

/* ===== Cutaway house + hotspots ===== */
.cutaway{ position:relative; max-width:900px; margin:0 auto; }
.house{ display:block; width:100%; height:auto; }
.house .win{ fill:#2A3A32; transition:fill .4s, filter .4s; }
.house .cur{ fill:#C89B4A; opacity:.9; transform-box:fill-box; transform-origin:top; transform:scaleY(.15); transition:transform .5s var(--ease); }
.house .shield{ fill:#4A5650; transition:fill .4s; }
.house .tint{ opacity:0; transition:opacity .5s; }
.house .tree,.house .panel,.house .tv{ transition:fill .4s; }
.is-lights .house .win{ fill:#F4C56A; filter:drop-shadow(0 0 10px rgba(244,197,106,.7)); }
.is-curtain .house .cur{ transform:scaleY(1); }
.is-secure .house .shield{ fill:var(--cypress); }
.is-climate .house .tint{ opacity:.14; }
.is-garden .house .tree{ fill:#4FB57E; }
.is-energy .house .panel{ fill:#F4C56A; }
.is-media .house .tv{ fill:#6FA8FF; }
.hs{ position:absolute; translate:-50% -50%; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; padding:8px; color:var(--paper); cursor:pointer; font-family:inherit; }
.hs i{ width:14px; height:14px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 0 rgba(200,155,74,.6); animation:hsPulse 2.4s infinite; transition:background .3s; }
.hs span{ white-space:nowrap; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:10px; background:rgba(16,32,26,.85); border:1px solid rgba(246,243,236,.15); }
.hs.on i{ background:#6FD39A; }
@keyframes hsPulse{ 70%{ box-shadow:0 0 0 10px rgba(200,155,74,0); } 100%{ box-shadow:0 0 0 0 rgba(200,155,74,0); } }
@media (prefers-reduced-motion:reduce){ .hs i{ animation:none; } }

/* ===== What is a smart home ===== */
.whatis{ padding:88px 0 56px; background:var(--paper); }
.whatis__lead{ max-width:760px; margin:0 auto 56px; text-align:center; }
.whatis__lead p{ font-size:1.15rem; }
.whatis__h{ font-size:1.2rem; margin:0 0 20px; }
.steps,.benefits,.day{ display:grid; gap:20px; margin-bottom:56px; }
.steps{ grid-template-columns:repeat(3,1fr); }
.benefits{ grid-template-columns:repeat(4,1fr); }
.step{ background:var(--white); border-radius:var(--radius-m); padding:26px 22px; }
.step b{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--cypress); color:var(--white); margin-bottom:12px; }
.step h4,.benefit h4,.day h4{ margin:0 0 .3em; }
.step p,.benefit p,.day p{ margin:0; font-size:.95rem; }
.benefit{ border-top:3px solid var(--ember); padding-top:14px; }
.day{ grid-template-columns:repeat(3,1fr); background:var(--ink); color:var(--paper); border-radius:var(--radius-m); padding:28px; }
.day h4{ color:var(--ember); }
.day p{ color:rgba(246,243,236,.8); }
.faq{ margin-bottom:40px; }
.faq details{ border-bottom:1px solid var(--line); padding:16px 0; }
.faq summary{ cursor:pointer; font-weight:700; }
.faq details p{ margin:10px 0 0; }
.whatis__cta{ text-align:center; }

/* ===== Team ===== */
.team{ padding:0 0 96px; }
.team .section-heading p{ margin:.4em 0 0; }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.team-card{ text-align:center; }
.team-card__photo{ aspect-ratio:4/5; border-radius:var(--radius-m); overflow:hidden; background:var(--paper-dim); margin-bottom:14px; }
.team-card__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.team-card:hover .team-card__photo img{ transform:scale(1.04); }
.team-card h3{ margin:0 0 .15em; }
.team-card p{ margin:0; font-size:.9rem; }

/* ===== Footer brands ===== */
.brands{ padding-top:28px; margin-top:28px; border-top:1px solid rgba(246,243,236,.12); }
.brands h3{ font-size:.85rem; font-weight:500; color:rgba(246,243,236,.6); margin:0 0 16px; }
.brands__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 36px; align-items:center; }
.brands img{ height:26px; width:auto; filter:grayscale(1) brightness(0) invert(1); opacity:.55; transition:opacity .2s; }
.brands img:hover{ opacity:1; }
.brand-word{ display:inline-block; direction:ltr; font-weight:900; font-size:1.05rem; letter-spacing:.04em; color:rgba(246,243,236,.55); }

/* ===== Responsive ===== */
@media (max-width:960px){
	.team-grid{ grid-template-columns:repeat(2,1fr); }
	.steps,.day{ grid-template-columns:1fr; }
	.benefits{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
	.hs span{ display:none; position:absolute; top:100%; z-index:2; }
	.hs:hover span,.hs:focus span{ display:block; }
	.benefits{ grid-template-columns:1fr; }
}


/* ===== Network / mesh WiFi ===== */
.network{ padding:72px 0 64px; background:var(--paper-dim); }
.network__lead{ max-width:760px; margin:0 auto 40px; text-align:center; }
.network__lead p{ font-size:1.1rem; }
.network__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.net-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px; }
.net-card__icon{ display:block; width:120px; height:80px; color:var(--cypress); margin-bottom:14px; }
.net-card h3{ margin-bottom:.3em; }
.net-card ul{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.net-card li{ position:relative; padding-inline-start:22px; font-size:.95rem; color:var(--slate); }
.net-card li::before{ content:""; position:absolute; inset-inline-start:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--ember); }
.net-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:40px 0; }
.net-step{ border-top:3px solid var(--cypress); padding-top:14px; }
.net-step h4{ margin:.2em 0 .3em; }
.net-step p{ margin:0; font-size:.92rem; }
@media (max-width:960px){ .network__grid{ grid-template-columns:1fr; } .net-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .net-steps{ grid-template-columns:1fr; } }


/* ===== Vector decoration ===== */
.ico{ display:inline-grid; place-items:center; width:52px; height:52px; border-radius:14px; background:rgba(46,110,82,.12); color:var(--cypress); margin-bottom:14px; }
.ico svg{ width:26px; height:26px; }
.wave{ position:absolute; left:0; width:100%; height:56px; display:block; pointer-events:none; }
.wave--paper path{ fill:var(--paper); }
.wave--dim path{ fill:var(--paper-dim); }
.hero-phone .wave,.net-demo .wave{ bottom:-1px; }
.wave--top{ top:-1px; bottom:auto !important; transform:rotate(180deg); }
.hero-phone,.net-demo,.cta-banner{ position:relative; }
.hero-scene,.net-scene{ position:relative; z-index:1; }
.hero-scene{ padding-bottom:88px; }
.net-scene{ padding-bottom:40px; }
.net-demo{ padding-top:96px; padding-bottom:88px; }

/* hero intro: network backdrop + floating icons */
.hero-phone__intro{ position:relative; overflow:hidden; }
.hero-phone__text{ position:relative; z-index:1; }
.hero-deco{ position:absolute; inset:0; pointer-events:none; }
.hero-deco__net{ position:absolute; inset:0; width:100%; height:100%; }
.hero-deco__net line{ stroke:rgba(246,243,236,.08); stroke-width:1.2; }
.hero-deco__net circle{ fill:rgba(200,155,74,.4); }
.hero-deco__net circle.pulse{ fill:rgba(111,211,154,.75); animation:decoPulse 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes decoPulse{ 50%{ transform:scale(1.9); opacity:.35; } }
.hf{ position:absolute; translate:-50% -50%; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:var(--ember); background:rgba(255,255,255,.05); border:1px solid rgba(246,243,236,.14); box-shadow:0 10px 30px -12px rgba(0,0,0,.5); animation:hfFloat 6s ease-in-out infinite alternate; }
.hf .ico{ background:none; width:auto; height:auto; margin:0; color:inherit; }
.hf .ico svg{ width:26px; height:26px; }
.hf:nth-child(odd){ color:#6FD39A; }
@keyframes hfFloat{ from{ transform:translateY(-8px); } to{ transform:translateY(8px); } }
@media (max-width:680px){
	.hf{ width:46px; height:46px; opacity:.8; }
	.hf--1{ left:12% !important; top:7% !important; } .hf--2{ left:84% !important; top:9% !important; }
	.hf--3{ left:14% !important; top:90% !important; } .hf--4{ left:86% !important; top:88% !important; }
	.hf--5,.hf--6{ display:none; }
}

/* what-is */
.whatis{ background-image:radial-gradient(rgba(16,32,26,.07) 1.3px, transparent 1.3px); background-size:24px 24px; padding-top:104px; }
.whatis__lead h2::after,.network__lead h2::after,.net-demo__head h2::after{ content:""; display:block; width:56px; height:4px; border-radius:2px; background:var(--ember); margin:14px auto 0; }
.section-heading h2::after{ content:""; display:block; width:56px; height:4px; border-radius:2px; background:var(--ember); margin-top:12px; }
.step{ position:relative; box-shadow:0 18px 36px -28px rgba(16,32,26,.5); }
.step b{ position:absolute; top:18px; inset-inline-end:18px; width:28px; height:28px; margin:0; font-size:.8rem; background:var(--ink); }
.step:not(:last-child)::after{ content:""; position:absolute; top:44px; inset-inline-end:-20px; width:20px; border-top:2px dashed var(--ember); }
.benefit{ background:var(--white); border:1px solid var(--line); border-top:3px solid var(--ember); border-radius:var(--radius-m); padding:22px 20px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.benefit:hover{ transform:translateY(-4px); box-shadow:0 18px 32px -24px rgba(16,32,26,.45); }
.day{ background:linear-gradient(135deg, var(--ink), #1B2E25); position:relative; overflow:hidden; }
.day::before{ content:""; position:absolute; inset-inline:28px; top:46px; border-top:2px dashed rgba(200,155,74,.35); }
.day > div{ position:relative; }
.day .ico{ background:var(--ink); color:var(--ember); border:1px solid rgba(200,155,74,.5); }
.faq summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(46,110,82,.12); color:var(--cypress-dark); font-size:1.2rem; line-height:1; transition:transform .25s var(--ease), background .25s; }
.faq details[open] summary::after{ transform:rotate(45deg); background:var(--ember); color:var(--ink); }

/* network */
.network{ background-image:radial-gradient(rgba(16,32,26,.06) 1.3px, transparent 1.3px); background-size:24px 24px; }
.net-card{ position:relative; overflow:hidden; }
.net-card::before{ content:""; position:absolute; inset-inline-end:-40px; top:-40px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle, rgba(200,155,74,.2), transparent 70%); }
.net-step__mark{ position:relative; display:block; width:76px; height:76px; margin:14px 0 18px; }
.net-step__box{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; border:1.5px solid var(--cypress); border-radius:18px; background:var(--paper); box-shadow:4px 4px 0 rgba(46,110,82,.14); }
.net-step__box .ico{ width:auto; height:auto; margin:0; background:none; color:var(--cypress-dark); }
.net-step__box .ico svg{ width:32px; height:32px; }
.net-step__n{ position:absolute; z-index:1; top:-14px; inset-inline-end:-14px; width:46px; height:46px; box-sizing:border-box; display:flex; align-items:flex-start; justify-content:flex-end; padding:5px 7px 0; border:1.5px solid var(--cypress); border-radius:14px; background:var(--cypress); color:#fff; font-size:.95rem; line-height:1; font-weight:800; font-variant-numeric:lining-nums; }

/* team + CTA */
.team-card__photo{ position:relative; }
.team-card__photo::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.28); border-radius:4px; pointer-events:none; }
.cta-banner{ overflow:hidden; }
.cta-deco{ position:absolute; width:220px; height:176px; color:rgba(246,243,236,.1); top:50%; translate:0 -50%; pointer-events:none; }
.cta-deco--house{ inset-inline-start:6%; }
.cta-deco--net{ inset-inline-end:6%; }
.cta-banner__inner{ position:relative; z-index:1; }
@media (max-width:960px){ .cta-deco{ display:none; } .step:not(:last-child)::after,.day::before{ display:none; } }

/* footer fixes */
.cta-banner + .site-footer{ margin-top:0; }
.site-footer p{ color:rgba(246,243,236,.65); }


/* ===== Lodging-complex network demo ===== */
.net-demo{ background:radial-gradient(900px 500px at 75% 30%, #1F4E3A 0%, var(--ink) 70%); padding:104px 0 96px; overflow:hidden; position:relative; }
.net-demo__head{ max-width:760px; text-align:center; margin-bottom:24px; }
.net-demo h2{ color:var(--white); }
.net-demo h2::after{ content:""; display:block; width:56px; height:4px; border-radius:2px; background:var(--ember); margin:14px auto 0; }
.net-demo p{ color:rgba(246,243,236,.82); }
.net-demo .net-demo__hint{ font-size:.85rem; color:var(--ember); margin:12px auto 0; text-align:center; }
.net-demo .net-demo__note{ font-size:.8rem; color:rgba(246,243,236,.55); margin:4px auto 0; text-align:center; }
.net-demo__modes{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.mode{ padding:9px 18px; border-radius:20px; border:1px solid rgba(246,243,236,.22); background:rgba(255,255,255,.04); color:var(--paper); font-weight:700; font-size:.9rem; font-family:inherit; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.mode:hover{ border-color:var(--ember); }
.mode[aria-pressed="true"]{ background:var(--ember); border-color:var(--ember); color:var(--ink); }
.net-status{ max-width:760px; margin:18px auto 0; background:#0B1511; border:1px solid rgba(246,243,236,.14); border-radius:10px; padding:14px 18px; display:flex; gap:14px; align-items:flex-start; }
.net-status__dot{ flex:none; width:12px; height:12px; margin-top:8px; border-radius:50%; background:#6FD39A; color:#6FD39A; box-shadow:0 0 12px currentColor; transition:background .3s, color .3s; }
.net-status b{ display:block; color:#6FD39A; font-size:1.05rem; transition:color .3s; }
.net-demo .net-status__text{ margin:2px 0 0; font-size:.92rem; color:rgba(246,243,236,.8); }
.net-demo[data-mode="work"] .net-status__dot{ background:#6FA8FF; color:#6FA8FF; } .net-demo[data-mode="work"] .net-status b{ color:#6FA8FF; }
.net-demo[data-mode="limit"] .net-status__dot,.net-demo[data-mode="isolate"] .net-status__dot{ background:#E5604D; color:#E5604D; }
.net-demo[data-mode="limit"] .net-status b,.net-demo[data-mode="isolate"] .net-status b{ color:#E5604D; }
.net-demo[data-mode="staff"] .net-status__dot{ background:#6FA8FF; color:#6FA8FF; } .net-demo[data-mode="staff"] .net-status b{ color:#6FA8FF; }
.net-demo[data-mode="camera"] .net-status__dot{ background:#F4C56A; color:#F4C56A; } .net-demo[data-mode="camera"] .net-status b{ color:#F4C56A; }

/* speed / volume meters */
.net-meters{ max-width:760px; margin:14px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.meter__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:.8rem; color:rgba(246,243,236,.85); margin-bottom:6px; font-weight:700; }
.meter__row em{ font-style:normal; font-size:.7rem; color:var(--ember); }
.meter__track{ position:relative; height:10px; border-radius:6px; background:rgba(255,255,255,.1); overflow:visible; }
.meter__fill{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:6px; width:var(--w,20%); background:#6FD39A; transition:width .7s var(--ease), background .4s; }
.meter__cap{ position:absolute; top:-4px; bottom:-4px; inset-inline-start:45%; border-inline-start:2px dashed var(--ember); }
.meter--gquota .meter__fill{ background:var(--ember); }
.meter--staff .meter__fill{ background:#6FA8FF; --w:72% !important; }
.net-demo{ --gs:18%; --gq:22%; }
.net-demo[data-mode="guest"]{ --gs:38%; --gq:36%; }
.net-demo[data-mode="limit"]{ --gs:6%; --gq:100%; }
.net-demo[data-mode="staff"]{ --gs:45%; --gq:64%; }
.net-demo[data-mode="camera"]{ --gs:18%; --gq:30%; }
.net-demo[data-mode="isolate"]{ --gs:24%; --gq:34%; }
.meter--gspeed .meter__fill{ --w:var(--gs); } .meter--gquota .meter__fill{ --w:var(--gq); }
.net-demo[data-mode="limit"] .meter--gquota .meter__fill{ background:#E5604D; }

.net-demo__stage{ margin-top:12px; }
.net-demo .cutaway{ max-width:1100px; }
span.hs{ cursor:default; }
.hs span{ font-size:.7rem; }

/* building drawing */
.bldg{ display:block; width:100%; height:auto; }
.bldg text{ font-family:inherit; }
.bldg .pc,.bldg .tab,.bldg .gd{ fill:#2A3A32; transition:fill .4s, filter .4s; }
.bldg .ap{ fill:var(--paper); stroke:var(--cypress); stroke-width:2; }
.bldg .ring{ opacity:0; transition:opacity .5s; }
.bldg .ring circle{ fill:none; stroke-width:2; }
.bldg .ring-staff circle{ stroke:#6FA8FF; } .bldg .ring-guest circle{ stroke:#6FD39A; }
.bldg .cone{ fill:#F4C56A; opacity:0; transition:opacity .5s; }
.bldg .fw{ fill:#4A5650; transition:fill .4s; } .bldg .fwcheck{ opacity:0; transition:opacity .4s; }
.bldg .led{ fill:#6FD39A; } .bldg .qos{ fill:#3A4A42; transition:fill .4s; } .bldg .nvr{ fill:#2A3A32; } .bldg .rec{ fill:#3A4A42; transition:fill .3s; }
.bldg .cable{ fill:none; stroke:#3A4A42; stroke-width:2; transition:stroke .4s; }
.bldg .cable.internet{ stroke:var(--ember); }
.bldg .pr-b{ fill:#CFCABB; } .bldg .pr-led{ fill:#3A4A42; transition:fill .3s; }
.bldg .tk{ opacity:0; transform-box:fill-box; transform-origin:top; }
.bldg .pk{ opacity:0; transition:opacity .3s; }
.bldg .pk-ord,.bldg .pk-s{ fill:#6FA8FF; } .bldg .pk-g,.bldg .pk-gh{ fill:#6FD39A; } .bldg .pk-c{ fill:#F4C56A; } .bldg .pk-x{ fill:#E5604D; }
.bldg .lockb,.bldg .xmark,.bldg .quota-b{ opacity:0; transition:opacity .3s; }
.bldg .fw{ fill:var(--cypress); } .bldg .fwcheck{ opacity:1; }

/* per-mode scene states */
.net-demo[data-mode="work"] .tab{ fill:#6FA8FF; filter:drop-shadow(0 0 6px rgba(111,168,255,.7)); }
.net-demo[data-mode="work"] .pk-ord{ opacity:1; }
.net-demo[data-mode="work"] .pr-led{ fill:#6FD39A; }
.net-demo[data-mode="work"] .tk{ animation:ticketOut 2.4s ease-out infinite; }
.net-demo[data-mode="work"] .tk-b{ animation-delay:.6s; } .net-demo[data-mode="work"] .tk-r{ animation-delay:1.1s; }
@keyframes ticketOut{ 0%,35%{ transform:scaleY(0); opacity:0; } 50%{ transform:scaleY(.2); opacity:1; } 80%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }

.net-demo[data-mode="guest"] .ring-guest,.net-demo[data-mode="staff"] .ring-guest,.net-demo[data-mode="isolate"] .ring-guest{ opacity:.6; }
.net-demo[data-mode="guest"] .gd,.net-demo[data-mode="staff"] .gd,.net-demo[data-mode="isolate"] .gd,.net-demo[data-mode="limit"] .gd{ fill:#6FD39A; filter:drop-shadow(0 0 5px rgba(111,211,154,.7)); }
.net-demo[data-mode="guest"] .pk-g{ opacity:1; }

.net-demo[data-mode="limit"] .ring-guest{ opacity:.6; } .net-demo[data-mode="limit"] .ring-guest circle{ stroke:#E5604D; }
.net-demo[data-mode="limit"] .gd{ fill:#E5604D; filter:drop-shadow(0 0 5px rgba(229,96,77,.7)); }
.net-demo[data-mode="limit"] .quota-b{ opacity:1; } .net-demo[data-mode="limit"] .qos{ fill:#E5604D; }

.net-demo[data-mode="staff"] .ring-staff{ opacity:.6; } .net-demo[data-mode="staff"] .pc{ fill:#6FA8FF; filter:drop-shadow(0 0 6px rgba(111,168,255,.6)); }
.net-demo[data-mode="staff"] .pk-s,.net-demo[data-mode="staff"] .pk-g,.net-demo[data-mode="staff"] .pk-gh{ opacity:1; }
.net-demo[data-mode="staff"] .qos{ fill:#6FA8FF; }

.net-demo[data-mode="camera"] .cone{ opacity:.22; } .net-demo[data-mode="camera"] .pk-c{ opacity:1; }
.net-demo[data-mode="camera"] .cable.cam{ stroke:#F4C56A; stroke-dasharray:6 5; animation:cableFlow 1s linear infinite; }
.net-demo[data-mode="camera"] .lockb{ opacity:1; } .net-demo[data-mode="camera"] .rec{ fill:#E5604D; animation:ledBlink 1s steps(2) infinite; }
.net-demo[data-mode="camera"] .nvr{ fill:#3A4A42; }
@keyframes cableFlow{ to{ stroke-dashoffset:-11; } }
@keyframes ledBlink{ 50%{ opacity:.35; } }

.net-demo[data-mode="isolate"] .ring-staff{ opacity:.6; }
.net-demo[data-mode="isolate"] .pk-x,.net-demo[data-mode="isolate"] .xmark{ opacity:1; }
.net-demo[data-mode="isolate"] .pr-led{ fill:#6FD39A; }
@media (prefers-reduced-motion:reduce){ .bldg .pk{ display:none; } .net-demo .tk,.net-demo .cable.cam,.net-demo .rec{ animation:none !important; } .net-demo[data-mode="work"] .tk{ opacity:1; } }
.wave--paper.wave--top path{ fill:var(--paper); }
@media (max-width:680px){
	.net-meters{ grid-template-columns:1fr; gap:10px; }
	.net-demo__stage{ overflow:hidden; }
	.net-demo .cutaway{ max-width:none; width:150%; margin-inline:-25%; }
	.net-demo__modes{ gap:8px; } .mode{ padding:8px 14px; font-size:.82rem; }
}

/* hotspot anchoring: the dot sits exactly on the given point; label goes below (default) or above (--up) */
.net-demo .hs{ translate:-50% -15px; }
.net-demo .hs--up{ flex-direction:column-reverse; translate:-50% calc(-100% + 15px); }


/* ===== Hero: 4 scenes (incl. trip with presence simulation) ===== */
.phone{ height:auto; min-height:520px; } .phone__screen{ padding-bottom:26px; }
.phone__scenes{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.hero-phone .hero-scene__note{ min-height:3.2em; max-width:560px; margin:14px auto 0; text-align:center; font-size:.92rem; color:var(--paper); }
.is-presence .house .win{ animation:presence 8s ease-in-out infinite; }
.is-presence .house .w2{ animation-delay:-2s; } .is-presence .house .w3{ animation-delay:-4s; } .is-presence .house .w4{ animation-delay:-6s; }
@keyframes presence{ 0%,30%{ fill:#2A3A32; filter:none; } 40%,60%{ fill:#F4C56A; filter:drop-shadow(0 0 10px rgba(244,197,106,.7)); } 70%,100%{ fill:#2A3A32; filter:none; } }
@media (prefers-reduced-motion:reduce){ .is-presence .house .win{ animation:none; } }
@media (max-width:680px){ .phone{ height:auto; min-height:0; } .hero-phone .hero-scene__note{ font-size:.85rem; } }

/* =========================================================
   اسلایدر بالای صفحه (خانه هوشمند + شبکه): متن و تصویر جدا وارد می‌شوند
   ========================================================= */
.duo{ position:relative; overflow:hidden; background:radial-gradient(900px 520px at 78% 35%, #1F4E3A 0%, var(--ink) 72%); --acc:var(--ember); }
.duo .hero-deco{ z-index:0; opacity:.55; } .duo .hero-deco .hf{ display:none; }
.duo__stage{ position:relative; z-index:1; display:grid; }
.duo__slide{ grid-area:1/1; display:flex; align-items:center; min-height:min(calc(100svh - 76px), 760px); padding:56px 0 112px; visibility:hidden; pointer-events:none; transition:visibility 0s .3s; }
.duo__slide.is-active{ visibility:visible; pointer-events:auto; transition-delay:0s; }
.duo__slide--network{ --acc:#8DBBFF; }
.duo__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; width:100%; }
.duo__text > *{ opacity:0; transform:translateX(56px); transition:opacity .28s ease, transform .3s ease-in; }
.duo__slide.is-active .duo__text > *{ opacity:1; transform:none; transition:opacity .7s ease calc(.35s + var(--i,0) * .09s), transform .8s var(--ease) calc(.35s + var(--i,0) * .09s); }
.duo__art{ opacity:0; transform:translateX(-70px) scale(.92); transition:opacity .28s ease, transform .3s ease-in; }
.duo__slide.is-active .duo__art{ opacity:1; transform:none; transition:opacity .8s ease .5s, transform 1s var(--ease) .5s; }
.duo__eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 12px; border:1px solid color-mix(in srgb, var(--acc) 55%, transparent); border-radius:999px; background:color-mix(in srgb, var(--acc) 12%, transparent); color:var(--acc); font-size:.88rem; font-weight:700; }
.duo__eyebrow .ico{ width:auto; height:auto; margin:0; background:none; color:inherit; } .duo__eyebrow .ico svg{ width:18px; height:18px; }
.duo h1,.duo h2{ color:var(--white); margin:.5em 0 .4em; font-size:clamp(1.9rem, 4.2vw, 3.2rem); line-height:1.35; }
.duo p{ color:rgba(246,243,236,.84); font-size:1.08rem; max-width:560px; margin:0 0 18px; }
.duo__feats{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; }
.duo__feats li{ position:relative; padding:5px 12px 5px 12px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:var(--paper); font-size:.88rem; }
.duo__feats li::before{ content:""; display:inline-block; width:7px; height:7px; margin-inline-end:8px; border-radius:50%; background:var(--acc); }
.duo__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.duo__slide--network .btn--primary{ background:#8DBBFF; border-color:#8DBBFF; color:var(--ink); }

/* تصویر */
.art{ position:relative; width:100%; max-width:540px; margin-inline:auto; aspect-ratio:520/440; }
.art > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.art__ring{ transform-origin:center; transform-box:fill-box; animation:artSpin 60s linear infinite; }
@keyframes artSpin{ to{ transform:rotate(360deg); } }
.art__win{ animation:artWin 4s ease-in-out infinite; } .art__win--2{ animation-delay:1.7s; }
@keyframes artWin{ 0%,100%{ opacity:1; } 50%{ opacity:.65; } }
.art__sig path{ animation:artSig 2.4s ease-in-out infinite; } .art__sig path:nth-child(2){ animation-delay:.25s; } .art__sig--2 path{ animation-delay:.6s; }
@keyframes artSig{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.art__phone{ animation:artBob 5s ease-in-out infinite; transform-box:fill-box; }
@keyframes artBob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }
.art__tg{ animation:artTg 3.2s ease-in-out infinite; } .art__tg--2{ animation-delay:1.1s; }
@keyframes artTg{ 0%,40%{ transform:translateX(0); } 55%,95%{ transform:translateX(-16px); } 100%{ transform:translateX(0); } }
.art__wave{ transform-origin:center; transform-box:fill-box; animation:artWave 4.2s ease-out infinite; }
@keyframes artWave{ 0%{ opacity:.9; transform:scale(.7); } 100%{ opacity:0; transform:scale(1.18); } }

.chip{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px; width:0; height:0; }
.chip__in{ position:absolute; left:-25px; top:-25px; width:50px; height:50px; display:grid; place-items:center; border-radius:15px; background:rgba(16,32,26,.78); border:1.5px solid color-mix(in srgb, var(--c) 70%, transparent); color:var(--c); backdrop-filter:blur(3px); box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 0 5px color-mix(in srgb, var(--c) 10%, transparent); opacity:0; }
.chip--ember{ --c:#E7B65C; } .chip--green{ --c:#6FD39A; } .chip--blue{ --c:#8DBBFF; } .chip--gold{ --c:#E7B65C; }
.chip .ico{ width:auto; height:auto; margin:0; background:none; color:inherit; } .chip .ico svg{ width:24px; height:24px; }
.duo__slide.is-active .chip__in{ animation:chipIn .6s var(--ease) both, chipFloat 5s ease-in-out infinite; animation-delay:calc(.8s + var(--d,0) * .08s), calc(1.5s + var(--d,0) * .3s); }
@keyframes chipIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
@keyframes chipFloat{ 0%,100%{ opacity:1; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-8px); } }
.chip em{ position:absolute; top:32px; left:50%; transform:translateX(-50%); white-space:nowrap; font-style:normal; font-size:.74rem; color:rgba(246,243,236,.8); }
.chip--core .chip__in{ left:-38px; top:-38px; width:76px; height:76px; border-radius:22px; background:linear-gradient(145deg,#2D5FA8,#17356A); border-color:#8DBBFF; color:#fff; box-shadow:0 0 0 8px rgba(141,187,255,.14), 0 12px 34px rgba(30,80,160,.55); }
.chip--core .ico svg{ width:36px; height:36px; }

/* ناوبری: فقط نقطه (نقطهٔ فعال کشیده و نوار پیشرفت دارد) */
.duo__nav{ position:absolute; z-index:3; inset-inline:0; bottom:26px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.duo__tabs{ display:flex; align-items:center; gap:8px; }
.duo__tab{ position:relative; width:10px; height:10px; min-width:0; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.32); cursor:pointer; overflow:hidden; transition:width .35s var(--ease), background .25s; }
.duo__tab:hover{ background:rgba(255,255,255,.55); }
.duo__tab.is-active{ width:38px; background:rgba(255,255,255,.28); }
.duo__tab i{ position:absolute; inset:0; background:var(--ember); transform:scaleX(0); transform-origin:right; }
[dir="ltr"] .duo__tab i{ transform-origin:left; }
.duo__tab.is-active i{ animation:duoProg var(--dur,7s) linear forwards; }
.duo.is-paused .duo__tab.is-active i{ animation-play-state:paused; }
.duo.is-static .duo__tab.is-active i{ animation:none; transform:scaleX(1); }
.duo__arrows{ display:flex; gap:8px; }
.duo__arrow{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(16,32,26,.55); color:var(--white); font-size:1.5rem; line-height:1; cursor:pointer; transition:background .25s; }
.duo__arrow:hover{ background:var(--cypress); }
@keyframes duoProg{ to{ transform:scaleX(1); } }

/* بخش سرتیتر کنترل خانه (زیر اسلایدر) */
.hero-phone__lead{ text-align:center; padding-top:64px; }
.hero-phone__lead h2{ color:var(--white); margin:0 0 .4em; }
.hero-phone__lead p{ margin-inline:auto; }
.hero-phone{ background:linear-gradient(180deg, var(--ink) 0, #143327 40%, var(--ink) 100%); }

@media (max-width:960px){
	.duo__slide{ padding:36px 0 130px; align-items:flex-start; }
	.duo__grid{ grid-template-columns:1fr; gap:10px; }
	.duo__art{ max-width:400px; order:-1; }
	.duo__text{ text-align:center; } .duo p{ margin-inline:auto; } .duo__feats,.duo__btns{ justify-content:center; }
	.duo__text > *{ transform:translateY(24px); } .duo__art{ transform:translateY(-24px) scale(.94); }
}
@media (max-width:560px){
	.duo__art{ max-width:320px; } .duo h1,.duo h2{ font-size:1.65rem; } .duo p{ font-size:1rem; }
	.duo__arrows{ display:none; } .duo__nav{ bottom:18px; } .duo__tabs{ width:100%; justify-content:center; }
	.chip__in{ transform-origin:center; } .chip em{ font-size:.66rem; }
}
@media (prefers-reduced-motion:reduce){
	.duo *{ animation:none !important; } .duo__text > *,.duo__art{ transition:opacity .2s !important; transform:none !important; }
	.duo__slide.is-active .chip__in{ opacity:1; } .duo__tab.is-active i{ transform:scaleX(1); }
}

/* گوشی درست کنار خانه (دسکتاپ و تبلت)؛ زیر ۷۴۰ پیکسل زیر هم می‌آید */
.hero-scene__grid{ grid-template-columns:220px minmax(0,780px); justify-content:center; gap:24px; align-items:center; }
.hero-scene__house{ min-width:0; }
@media (max-width:740px){
}

/* نسخه PC و تبلت: گوشی درست کنار خانه؛ زیر ۷۴۰ پیکسل زیر هم می‌آید */
.hero-scene__grid{ grid-template-columns:220px minmax(0,780px); justify-content:center; gap:24px; align-items:center; }
.hero-scene__house{ min-width:0; }
@media (max-width:740px){
	.hero-scene__grid{ grid-template-columns:1fr; gap:20px; }
	.hero-scene{ padding-top:8px; }
}

/* موبایل: گوشی کوچک‌تر و کنار هم در یک صفحه با خانه دیده شوند */
@media (max-width:740px){
	.phone{ width:200px; }
	.phone__screen{ gap:5px; padding:34px 10px 18px; }
	.phone__head small{ font-size:.66rem; } .phone__head b{ font-size:.86rem; }
	.phone__scenes{ gap:4px; }
	.scene{ padding:5px 2px; font-size:.64rem; border-radius:8px; }
	.ctl{ padding:5px 10px; font-size:.74rem; border-radius:10px; }
	.ctl i{ width:28px; height:16px; border-radius:9px; }
	.ctl i::after{ top:2px; right:2px; width:12px; height:12px; }
	.ctl.is-on i::after{ transform:translateX(-12px); }
	.hero-scene__grid{ gap:10px; }
	.hero-scene{ padding-top:6px; padding-bottom:72px; }
	.hero-scene__note{ min-height:2.6em; margin-top:6px; }
}

/* موبایل: متن، تصویر و دکمه‌ها در یک صفحه، با فاصله‌های راحت */
@media (max-width:740px){
	.duo__slide{ min-height:0; padding:20px 0 58px; }
	.duo__grid{ gap:14px; }
	.duo__art{ max-width:290px; width:100%; margin-inline:auto; justify-self:center; }
	.duo__feats{ display:none; }
	.duo__eyebrow{ font-size:.82rem; padding:5px 12px 5px 10px; }
	.duo h1,.duo h2{ font-size:1.6rem; line-height:1.45; margin:.55em 0 .4em; }
	.duo p{ font-size:.95rem; line-height:1.9; margin-bottom:20px; }
	.duo__btns{ gap:10px; }
	.duo__nav{ bottom:20px; }
	.chip__in{ left:-20px; top:-20px; width:40px; height:40px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.35), 0 0 0 3px color-mix(in srgb, var(--c) 10%, transparent); }
	.chip .ico svg{ width:20px; height:20px; }
	.chip--core .chip__in{ left:-30px; top:-30px; width:60px; height:60px; border-radius:18px; }
	.chip--core .ico svg{ width:28px; height:28px; }
	.chip em{ top:26px; font-size:.62rem; }
	.hero-phone__lead{ padding-top:48px; }
}
@media (max-width:740px) and (max-height:700px){
	.duo__art{ max-width:240px; } .duo__slide{ padding-top:12px; } .duo__grid{ gap:8px; }
	.duo p{ font-size:.9rem; line-height:1.8; margin-bottom:14px; } .duo h1,.duo h2{ font-size:1.45rem; }
}

.duo__art{ min-width:0; width:100%; margin-inline:auto; justify-self:center; }

/* قفل رمزنگاری داخل کادر دوربین */
.chip--lock .chip__in{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.chip--lock .chip__in > .ico svg{ width:20px; height:20px; }
.chip__lock{ display:grid; place-items:center; line-height:0; color:#E7B65C; }
.chip__lock .ico{ width:auto; height:auto; margin:0; background:none; color:inherit; } .chip__lock .ico svg{ width:12px; height:12px; }
@media (max-width:740px){ .chip--lock .chip__in{ gap:2px; } .chip--lock .chip__in > .ico svg{ width:17px; height:17px; } .chip__lock .ico svg{ width:11px; height:11px; } }

.duo h1,.duo h2,.hero-phone__lead h2{ text-wrap:balance; }