:root{
  --cream:#fff8f0;
  --ink:#20384a;
  --ink-soft:#3f5a6c;
  box-sizing:border-box;
}
html{scroll-behavior:smooth;}
*,*::before,*::after{box-sizing:inherit;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --cream:#0f2230; --ink:#f3f7fa; --ink-soft:#c9d8e0; }
}

/* Seasonal palettes */
html[data-season="spring"]{ --sky-top:#aee3f4; --sky-bottom:#6cc3e8; --house:#f6b8d0; --roof:#ef5b7a; --accent:#ff9fb0; --particle:#f7a8c8; }
html[data-season="summer"]{ --sky-top:#7fd8f0; --sky-bottom:#2fa8e0; --house:#ffd28a; --roof:#ff5d4a; --accent:#ffa62b; --particle:#ffd36b; }
html[data-season="autumn"]{ --sky-top:#f3c98a; --sky-bottom:#dd8f4d; --house:#e0906a; --roof:#a8362b; --accent:#d97a3f; --particle:#c9722f; }
html[data-season="winter"]{ --sky-top:#dbeef6; --sky-bottom:#a6cbe0; --house:#cdd9e8; --roof:#6c3a4a; --accent:#7fb0cf; --particle:#ffffff; }

body{ margin:0; font-family:'Vazirmatn', sans-serif; color:var(--ink); background:var(--cream); overflow-x:hidden; }
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode:overlay; opacity:.5; pointer-events:none;
}

#particles{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.p{ position:absolute; top:-5%; border-radius:40% 60% 55% 45%/50% 45% 55% 50%; opacity:.85; animation-name:fall; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes fall{ 0%{ transform:translateY(-8vh) translateX(0) rotate(0deg); } 100%{ transform:translateY(108vh) translateX(var(--drift,20px)) rotate(220deg); } }
.sparkle{ position:fixed; pointer-events:none; z-index:60; border-radius:50%; }
@keyframes pop{ 0%{ transform:scale(0) translate(0,0); opacity:1;} 100%{ transform:scale(1) translate(var(--tx),var(--ty)); opacity:0;} }

/* NAV */
nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px clamp(20px,5vw,64px); position:sticky; top:0; z-index:50; background:linear-gradient(var(--cream), var(--cream) 80%, transparent); flex-wrap:wrap; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; color:var(--ink);}
.logo-mark{width:28px;height:28px;border-radius:40% 60% 55% 45%/50% 45% 55% 50%; background:var(--roof); flex:none; transition:background .6s ease;}
.nav-links{ display:flex; gap:24px; font-weight:500; color:var(--ink-soft); font-size:.93rem;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.current{color:var(--roof); font-weight:700;}
@media (max-width:780px){ .nav-links{display:none;} }
.season-switch{ display:flex; gap:6px; background:rgba(63,90,108,.08); padding:5px; border-radius:999px; }
.season-switch button{ border:none; background:transparent; width:34px; height:34px; border-radius:50%; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .2s ease; }
.season-switch button:hover{ transform:translateY(-2px); }
.season-switch button.active{ background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.12); }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border-radius:999px; font-weight:600; font-size:.95rem; border:none; cursor:pointer; transition:background .6s ease, transform .2s ease;}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--roof); color:#fff; box-shadow:0 8px 20px -8px rgba(0,0,0,.35);}
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid rgba(63,90,108,.3); }

/* HERO (home) */
.hero{ position:relative; background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom) 70%); padding:44px clamp(20px,6vw,64px) 0; overflow:hidden; border-radius:0 0 60px 60px; transition:background .6s ease; }
.hero-inner{ max-width:1080px; margin:0 auto; text-align:center; padding-bottom:30px; position:relative; z-index:3; }
.reveal{ opacity:0; transform:translateY(16px); animation:introUp .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes introUp{ to{ opacity:1; transform:translateY(0);} }
.eyebrow{ display:inline-block; background:rgba(255,255,255,.55); color:#0f3348; padding:7px 18px; border-radius:999px; font-size:.85rem; font-weight:600; margin-bottom:20px; animation-delay:.05s;}
h1{ font-size:clamp(2rem,5vw,3.2rem); font-weight:800; line-height:1.28; margin:0 0 16px; color:#0f3348; animation-delay:.15s;}
.hero p.lead{ max-width:540px; margin:0 auto 26px; font-size:1.06rem; line-height:1.9; color:#1a4258; animation-delay:.28s;}
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:6px; animation-delay:.4s;}

.scene{ position:relative; height:clamp(260px,40vw,400px); margin-top:6px; z-index:2; }
.cloud{ position:absolute; filter:drop-shadow(0 14px 18px rgba(15,51,72,.18)); cursor:pointer; }
.cloud svg{display:block;}
.cloud-main{ width:clamp(210px,30vw,320px); right:8%; top:4%; animation:float 7s ease-in-out infinite, introScale .8s cubic-bezier(.2,.8,.2,1) .3s backwards; transition:transform .2s ease; }
.cloud-main:hover{ transform:scale(1.04) rotate(-2deg); }
.cloud-sm1{ width:100px; left:6%; top:20%; opacity:.9; animation:float 9s ease-in-out infinite 1s, introScale .8s cubic-bezier(.2,.8,.2,1) .15s backwards; }
.cloud-sm2{ width:74px; left:22%; top:56%; opacity:.85; animation:float 6.5s ease-in-out infinite .5s, introScale .8s cubic-bezier(.2,.8,.2,1) .05s backwards; }
@keyframes float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes introScale{ from{opacity:0; transform:scale(.7) translateY(10px);} to{opacity:1; transform:scale(1) translateY(0);} }

.house-wrap{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(540px,86%); animation:introUp .8s cubic-bezier(.2,.8,.2,1) .45s backwards; }
.house-wrap svg{display:block; width:100%; filter:drop-shadow(0 22px 24px rgba(15,51,72,.22));}
.house-roof{ fill:var(--roof); transition:fill .6s ease; }
.house-body{ fill:var(--house); transition:fill .6s ease; }
.house-door{ fill:color-mix(in srgb, var(--roof) 60%, #000 15%); transition:fill .6s ease; }
.house-accent{ fill:var(--accent); transition:fill .6s ease; }

/* Internal page header (banner) */
.page-header{ position:relative; background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom) 85%); padding:50px clamp(20px,6vw,64px) 60px; border-radius:0 0 50px 50px; text-align:center; transition:background .6s ease; }
.page-header .eyebrow{ margin-bottom:16px; }
.page-header h1{ font-size:clamp(1.8rem,4.4vw,2.7rem); margin:0 0 14px; }
.page-header p{ max-width:560px; margin:0 auto; color:#1a4258; line-height:1.85; font-size:1.02rem; }

section{ padding:60px clamp(20px,6vw,64px); max-width:1100px; margin:0 auto; position:relative; z-index:2; }
.section-head{ text-align:center; max-width:560px; margin:0 auto 40px; }
.section-head .kicker{ color:var(--roof); font-weight:700; font-size:.95rem; margin-bottom:8px; display:block; transition:color .6s ease;}
h2{ font-size:clamp(1.45rem,3.2vw,2rem); font-weight:800; margin:0 0 12px; }
.section-head p{ color:var(--ink-soft); line-height:1.85; margin:0; }

.services{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:720px){ .services{grid-template-columns:1fr;} }
.service-card{ position:relative; overflow:hidden; border-radius:30px; padding:34px 28px; color:#fff; min-height:270px; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .3s ease, box-shadow .3s ease, background .6s ease; }
.service-card:hover{ transform:translateY(-6px); box-shadow:0 18px 30px -14px rgba(0,0,0,.35); }
.service-card.c1{ background:linear-gradient(160deg,var(--house),var(--roof) 130%); }
.service-card.c2{ background:linear-gradient(160deg,var(--sky-top),var(--sky-bottom) 130%); }
.service-card .icon{ position:absolute; top:24px; left:24px; width:50px; height:50px; background:rgba(255,255,255,.22); border-radius:16px; display:flex; align-items:center; justify-content:center;}
.service-card h3{ font-size:1.3rem; margin:0 0 10px; font-weight:800; }
.service-card p{ margin:0 0 16px; line-height:1.85; opacity:.95; font-size:.96rem; }
.service-card .tag{ display:inline-block; align-self:flex-start; font-size:.84rem; font-weight:600; background:rgba(255,255,255,.24); padding:7px 16px; border-radius:999px; }
.service-card ul{ margin:0 0 16px; padding-inline-start:20px; line-height:1.9; font-size:.93rem; opacity:.95; }

.process-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:760px){ .process-list{grid-template-columns:1fr;} }
.step{ background:color-mix(in srgb, var(--house) 55%, #fff 45%); border-radius:24px; padding:28px 24px; transition:background .6s ease, transform .3s ease; }
.step:hover{ transform:translateY(-4px); }
.step .num{ width:36px;height:36px;border-radius:50%; background:#fff; color:var(--roof); font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1rem; transition:color .6s ease;}
.step h4{ margin:0 0 8px; font-size:1.05rem; font-weight:700; }
.step p{ margin:0; color:var(--ink-soft); line-height:1.8; font-size:.93rem;}

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:760px){ .grid3{grid-template-columns:1fr;} }
.port-card{ border-radius:22px; overflow:hidden; background:#fff; border:1px solid rgba(32,56,74,.08); transition:transform .3s ease; }
.port-card:hover{ transform:translateY(-4px); }
@media (prefers-color-scheme:dark){ .port-card{background:#16293a; border-color:rgba(255,255,255,.08);} }
.port-thumb{ height:140px; transition:background .6s ease; position:relative; }
.port-card .body{ padding:18px; text-align:right; }
.port-card h5{ margin:0 0 6px; font-size:.98rem; }
.port-card span{ color:var(--ink-soft); font-size:.85rem; }
.port-card.port-video{ display:block; width:100%; text-align:inherit; appearance:none; -webkit-appearance:none; border:1px solid rgba(32,56,74,.08); font:inherit; color:inherit; cursor:pointer; padding:0; }
@media (prefers-color-scheme:dark){ .port-card.port-video{ border-color:rgba(255,255,255,.08); } }
.play-badge{ position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%; background:rgba(20,32,44,.55); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(1px); transition:transform .25s ease, background .25s ease; }
.port-video:hover .play-badge{ background:var(--accent,#e06b53); transform:scale(1.08); }
.play-badge svg{ margin-inline-start:2px; }

/* --- پنجره‌ی ویدیوی نمونه‌کار --- */
.video-modal-bg{ position:fixed; inset:0; background:rgba(12,18,26,.78); z-index:300; display:flex; align-items:center; justify-content:center; padding:16px; }
.video-modal{ width:100%; max-width:900px; }
.video-modal-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.video-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal-close{ display:block; margin:12px auto 0; background:#fff; color:var(--ink); border:0; border-radius:999px; width:38px; height:38px; font-size:1.1rem; line-height:1; cursor:pointer; }
.video-modal-title{ color:#fff; text-align:center; margin:0 0 10px; font-size:.95rem; opacity:.9; }

/* Pricing */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .pricing{grid-template-columns:1fr;} }
.price-card{ background:#fff; border:1px solid rgba(32,56,74,.1); border-radius:28px; padding:32px 26px; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease; }
.price-card:hover{ transform:translateY(-6px); box-shadow:0 18px 30px -16px rgba(0,0,0,.2); }
@media (prefers-color-scheme:dark){ .price-card{background:#16293a; border-color:rgba(255,255,255,.1);} }
.price-card.featured{ border:2px solid var(--roof); position:relative; }
.price-card .badge{ position:absolute; top:-14px; right:24px; background:var(--roof); color:#fff; font-size:.78rem; font-weight:700; padding:5px 14px; border-radius:999px; }
.price-card h3{ margin:0 0 6px; font-size:1.15rem; }
.price-card .price{ font-size:1.8rem; font-weight:800; margin:6px 0 18px; }
.price-card .price small{ font-size:.9rem; font-weight:500; color:var(--ink-soft); }
.price-card ul{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.92rem; color:var(--ink-soft);}
.price-card ul li::before{ content:"✓ "; color:var(--roof); font-weight:700; }
.price-card .btn{ margin-top:auto; align-self:flex-start; }

/* About */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:760px){ .team{grid-template-columns:1fr;} }
.team-card{ text-align:center; }
.avatar{ width:96px; height:96px; border-radius:44% 56% 60% 40%/50% 44% 56% 50%; margin:0 auto 16px; }
.team-card h4{ margin:0 0 4px; font-size:1.02rem; }
.team-card span{ color:var(--ink-soft); font-size:.88rem; }
.values{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:640px){ .values{grid-template-columns:1fr;} }
.value-item{ background:color-mix(in srgb, var(--house) 40%, #fff 60%); border-radius:20px; padding:22px; }
.value-item h4{ margin:0 0 6px; font-size:1rem; }
.value-item p{ margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.8;}

/* Contact */
.contact-wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:start; }
@media (max-width:800px){ .contact-wrap{grid-template-columns:1fr;} }
.form-card{ background:#fff; border-radius:28px; padding:32px; border:1px solid rgba(32,56,74,.08); }
@media (prefers-color-scheme:dark){ .form-card{background:#16293a; border-color:rgba(255,255,255,.1);} }
.form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size:.9rem; font-weight:600; }
.form-row input, .form-row textarea{
  border:1.5px solid rgba(63,90,108,.25); border-radius:14px; padding:12px 14px; font-family:inherit; font-size:.95rem;
  background:transparent; color:var(--ink); resize:vertical;
}
.form-row input:focus, .form-row textarea:focus{ outline:2px solid var(--roof); outline-offset:1px; }
.contact-info{ display:flex; flex-direction:column; gap:16px; }
.info-card{ background:color-mix(in srgb, var(--house) 45%, #fff 55%); border-radius:22px; padding:22px; display:flex; align-items:center; gap:14px; }
.info-card .ic{ width:42px;height:42px;border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.info-card h5{ margin:0 0 3px; font-size:.95rem;}
.info-card span{ font-size:.87rem; color:var(--ink-soft);}

.cta-block{ background:linear-gradient(150deg,var(--accent),var(--roof) 140%); border-radius:34px; padding:52px clamp(24px,6vw,56px); text-align:center; color:#fff; margin:0 auto 20px; transition:background .6s ease;}
.cta-block h2{ color:#fff; }
.cta-block p{ color:rgba(255,255,255,.92); max-width:460px; margin:0 auto 24px; line-height:1.85; }
.cta-block .btn-primary{ background:#20384a; box-shadow:none; }

footer{ padding:36px clamp(20px,6vw,64px) 36px; text-align:center; color:var(--ink-soft); font-size:.87rem; position:relative; z-index:2;}