/* Shared base for Parnian Web portfolio demo pages — each demo overrides the
   variables below (and adds a couple of page-specific rules) to get its own identity. */
:root{
  --accent:#0F6E56; --accent-deep:#04342C; --accent-light:#9FE1CB; --accent-pale:#E1F5EE;
  --bg:#F6F8F6; --surface:#FFFFFF; --surface-2:#EDF4F0;
  --ink:#0B2620; --ink-soft:#4A5C56; --border:rgba(11,38,32,.12);
  --display:'Vazirmatn', sans-serif; --body:'Vazirmatn', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body); background:var(--bg); color:var(--ink); line-height:1.85;}
a{color:inherit; text-decoration:none;} ul{list-style:none;} img{max-width:100%; display:block;}
button, input, textarea, select{font-family:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 26px;}
section{padding:80px 0;}
@media(max-width:700px){ section{padding:52px 0;} }
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.3px;}

/* demo badge — clarifies these are showcase pages */
.demo-flag{position:fixed; bottom:16px; inset-inline-start:16px; z-index:60; background:var(--ink); color:#fff; font-size:11px; padding:8px 14px; border-radius:999px; opacity:.88; display:flex; align-items:center; gap:6px;}
.demo-flag b{color:var(--accent-light);}

header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; font-family:var(--display);}
.brand-mark{width:32px; height:32px; border-radius:8px; background:var(--accent); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.brand-mark svg{width:18px; height:18px; stroke:#fff;}
.nav-links{display:flex; gap:28px; font-size:14px; color:var(--ink-soft);}
.nav-links a:hover{color:var(--accent);}
@media(max-width:760px){ .nav-links{display:none;} }
.nav-cta{background:var(--accent); color:#fff; padding:9px 20px; border-radius:999px; font-size:13px; font-weight:600;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; font-size:14px; font-weight:600; border:none; cursor:pointer; transition:transform .15s, opacity .15s;}
.btn-primary{background:var(--accent); color:#fff;} .btn-primary:hover{opacity:.9; transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--border); color:var(--ink);} .btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-invert{background:#fff; color:var(--accent-deep);}

.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--accent-deep); background:var(--accent-pale); padding:6px 14px; border-radius:999px; margin-bottom:18px;}

.section-head{margin-bottom:44px; max-width:600px;}
.section-head span{font-size:12.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.6px;}
.section-head h2{font-size:clamp(24px,3.2vw,34px); margin-top:8px;}
.section-head p{color:var(--ink-soft); font-size:15px; margin-top:10px;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;}
@media(max-width:820px){ .grid-3{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} }
@media(max-width:560px){ .grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr;} }

.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px;}
.icon-box{width:44px; height:44px; border-radius:12px; background:var(--accent-pale); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.icon-box svg{width:22px; height:22px; stroke:var(--accent-deep);}

.hero{padding:80px 0 60px;}
.hero-inner{max-width:680px;}
.hero h1{font-size:clamp(32px,4.6vw,50px); line-height:1.25; margin-bottom:18px;}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero p.lede{font-size:17px; color:var(--ink-soft); max-width:520px; margin-bottom:28px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.hero-media{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/10; background:linear-gradient(155deg,var(--accent),var(--accent-deep));}

.stat-row{display:flex; gap:36px; margin-top:40px; flex-wrap:wrap;}
.stat-row b{display:block; font-size:24px; font-weight:800; color:var(--accent-deep);}
.stat-row span{font-size:12.5px; color:var(--ink-soft);}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.gallery div{aspect-ratio:4/3; border-radius:14px; background:linear-gradient(155deg,var(--accent-light),var(--accent));}
@media(max-width:700px){ .gallery{grid-template-columns:repeat(2,1fr);} }

.cta-box{background:var(--accent-deep); color:#fff; border-radius:22px; padding:52px 40px; text-align:center;}
.cta-box h2{font-size:clamp(22px,3vw,30px); margin-bottom:12px;}
.cta-box p{color:var(--accent-light); margin-bottom:24px; max-width:480px; margin-inline:auto;}

.tag-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.tag-row span{font-size:12.5px; background:var(--surface-2); color:var(--ink-soft); padding:6px 12px; border-radius:999px;}

footer{border-top:1px solid var(--border); padding:36px 0; text-align:center; font-size:13px; color:var(--ink-soft);}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease;}
.reveal.in{opacity:1; transform:translateY(0);}