/* ===================== VARIABLES ===================== */
:root{
  --bg:#08080d;
  --bg-elev:#0d0d16;
  --surface: rgba(255,255,255,.045);
  --surface-solid:#12121d;
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --text:#f6f6fa;
  --text-dim:#a6a6b8;
  --text-faint:#6c6c80;
  --accent:#8b7bff;
  --accent-2:#22d3ee;
  --accent-3:#e8c468;
  --grad: linear-gradient(120deg, var(--accent), var(--accent-2));
  --grad-text: linear-gradient(120deg, #ada2ff, #6ee7f5);
  --on-accent:#0a0714;
  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 1px rgba(139,123,255,.25), 0 20px 60px -18px rgba(139,123,255,.35);
  --radius: 22px;
  --radius-sm: 14px;
  --font-ar:'Almarai','Tajawal',sans-serif;
  --font-en:'Plus Jakarta Sans','Almarai',sans-serif;
  --font: var(--font-ar);
  --ease: cubic-bezier(.19,1,.22,1);
}

:root[data-theme="light"]{
  --bg:#f6f6fb;
  --bg-elev:#eeeef7;
  --surface: rgba(10,10,25,.035);
  --surface-solid:#ffffff;
  --border: rgba(10,10,30,.09);
  --border-strong: rgba(10,10,30,.16);
  --text:#0d0d17;
  --text-dim:#54546b;
  --text-faint:#8a8a9e;
  --on-accent:#ffffff;
  --shadow-soft: 0 20px 50px -22px rgba(20,20,50,.25);
  --shadow-glow: 0 0 0 1px rgba(124,108,255,.18), 0 20px 50px -18px rgba(124,108,255,.28);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html[lang="en"]{ --font: var(--font-en); }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.75;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}

.container{width:100%; max-width:1180px; margin-inline:auto; padding-inline:24px;}
::selection{background:var(--accent); color:var(--on-accent);}

.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; width:480px; height:480px; border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(circle, rgba(139,123,255,.12), transparent 70%);
  transform:translate(-50%,-50%); left:50%; top:30%; transition:left .35s ease-out, top .35s ease-out;
  display:none;
}
@media(min-width:1000px){.cursor-glow{display:block;}}

.progress-bar{position:fixed; top:0; inset-inline:0; height:2px; z-index:10001; background:var(--grad); width:0%;}

/* ===================== UTILITIES ===================== */
.highlight{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;}

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px;
  border-radius:999px; font-weight:700; font-size:.95rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  white-space:nowrap; border:1px solid transparent;
}
.btn-lg{padding:17px 34px; font-size:1.02rem;}
.btn-sm{padding:10px 18px; font-size:.82rem;}
.btn-primary{background:var(--grad); color:var(--on-accent); box-shadow:0 14px 34px -12px rgba(139,123,255,.55);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 44px -12px rgba(139,123,255,.7);}
.btn-ghost{background:var(--surface); border-color:var(--border); color:var(--text); backdrop-filter:blur(12px);}
.btn-ghost:hover{border-color:var(--accent); transform:translateY(-3px);}

.section-kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:18px;
  padding:6px 14px 6px 6px; border:1px solid var(--border); border-radius:999px; background:var(--surface);
}
.section-kicker::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--grad);}
.section-title{font-size:clamp(1.5rem, 2.5vw, 2.5rem); font-weight:800; line-height:1.35; margin-bottom:18px; white-space:nowrap;}
@media(max-width:900px){.section-title{white-space:normal; font-size:clamp(1.5rem,4.4vw,2.2rem);}}
.section-desc{color:var(--text-dim); max-width:760px; font-size:1.05rem;}
.section-head{margin-bottom:60px; max-width:820px; position:relative;}

section{position:relative; padding:130px 0;}

/* ===================== REVEAL ===================== */
.reveal-up{opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease);}
.reveal-up.in-view{opacity:1; transform:translateY(0);}
.reveal-up[data-delay="1"]{transition-delay:.08s;}
.reveal-up[data-delay="2"]{transition-delay:.16s;}
.reveal-up[data-delay="3"]{transition-delay:.24s;}
.reveal-up[data-delay="4"]{transition-delay:.32s;}
.reveal-up[data-delay="5"]{transition-delay:.4s;}

/* ===================== DECOR: ORBITS & GLOWS ===================== */
.deco{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.orbit{
  position:absolute; border-radius:50%; border:1px solid var(--border);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.orbit-1{width:640px; height:640px; animation:spin 90s linear infinite;}
.orbit-2{width:880px; height:880px; border-style:dashed; opacity:.5; animation:spin 130s linear infinite reverse;}
.orbit-3{width:420px; height:420px; opacity:.7; animation:spin 60s linear infinite;}
.orbit-dot{position:absolute; width:8px; height:8px; border-radius:50%; background:var(--grad); box-shadow:0 0 16px 2px rgba(139,123,255,.6);}
.orbit-1 .orbit-dot{top:-4px; left:50%; margin-inline-start:-4px;}
.orbit-3 .orbit-dot{bottom:-4px; left:20%;}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}

.glow-orb{position:absolute; border-radius:50%; filter:blur(80px); opacity:.4;}
.glow-1{width:460px; height:460px; background:radial-gradient(circle, var(--accent), transparent 70%); top:-140px; inset-inline-end:-100px;}
.glow-2{width:380px; height:380px; background:radial-gradient(circle, var(--accent-2), transparent 70%); bottom:-140px; inset-inline-start:-100px; opacity:.3;}

.grain-dots{
  position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(circle, var(--border) 1px, transparent 1.4px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 40%, black, transparent 75%);
}

/* ===================== HEADER ===================== */
.site-header{position:fixed; top:0; inset-inline:0; z-index:1000; padding:20px 0; transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s;}
.site-header.scrolled{padding:12px 0; background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--border);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px;}

.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.28rem;}
.brand picture{display:flex;}
.brand-mark{width:38px; height:38px; object-fit:contain; display:block;}
.site-footer .brand-mark{width:46px; height:46px;}
.brand-text em{color:var(--accent-2); font-style:normal;}

.main-nav{display:flex; align-items:center; gap:32px;}
.nav-link{position:relative; font-weight:600; font-size:.92rem; color:var(--text-dim); transition:color .25s;}
.nav-link::after{content:''; position:absolute; bottom:-6px; inset-inline:0; height:2px; background:var(--grad); transform:scaleX(0); transition:transform .3s var(--ease);}
.nav-link:hover{color:var(--text);}
.nav-link:hover::after{transform:scaleX(1);}

.header-tools{display:flex; align-items:center; gap:10px;}
.tool-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-weight:800; font-size:.72rem; transition:all .3s var(--ease);}
.tool-btn:hover{color:var(--accent-2); border-color:var(--accent-2); transform:translateY(-2px);}

.nav-toggle{display:none; flex-direction:column; gap:5px; width:32px;}
.nav-toggle span{height:2px; background:var(--text); border-radius:2px; transition:.3s;}

/* ===================== HERO ===================== */
.hero{min-height:100vh; display:flex; align-items:center; position:relative; padding-top:140px; padding-bottom:70px; overflow:hidden;}
.hero-inner{position:relative; z-index:2;}
.hero-top{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--border); padding:8px 18px; border-radius:999px; font-size:.85rem; font-weight:700; color:var(--text-dim); background:var(--surface); backdrop-filter:blur(10px);}
.dot-pulse{width:8px; height:8px; border-radius:50%; background:var(--accent-2); position:relative;}
.dot-pulse::after{content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--accent-2); animation:pulse 1.8s ease-out infinite;}
@keyframes pulse{0%{transform:scale(.6); opacity:1;} 100%{transform:scale(1.9); opacity:0;}}
.hero-index{font-size:.8rem; font-weight:700; color:var(--text-faint); letter-spacing:.06em;}

.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;}

.hero-title{font-size:clamp(2.3rem, 5.2vw, 4.1rem); font-weight:800; line-height:1.28; margin-bottom:24px;}
.typed-line{
  display:flex; align-items:center; gap:2px; color:var(--accent-2);
  white-space:nowrap; overflow:hidden; min-height:1.28em; margin-top:4px;
}
.typed-cursor{animation:blink 1s step-end infinite; color:var(--accent-2); font-weight:300;}
@keyframes blink{50%{opacity:0;}}

.hero-sub{font-size:1.1rem; color:var(--text-dim); max-width:560px; margin-bottom:40px;}
.hero-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}

/* premium mockup card */
.hero-visual{position:relative; display:flex; align-items:center; justify-content:center; padding:34px 0;}
.mock-glow{position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, var(--accent), transparent 70%); filter:blur(70px); opacity:.45; z-index:0;}
.mock-card{
  position:relative; z-index:2; width:92%; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border-strong); background:var(--surface-solid);
  box-shadow:var(--shadow-glow);
  transition:transform .6s var(--ease);
}
.hero-visual:hover .mock-card{transform:translateY(-4px);}
.mock-bar{display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface);}
.mock-bar span{width:9px; height:9px; border-radius:50%; background:var(--border-strong);}
.mock-card img{width:100%; height:auto; display:block;}
.chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:12px;
  background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:16px;
  padding:14px 20px; box-shadow:var(--shadow-soft); backdrop-filter:blur(14px);
  font-size:.86rem; font-weight:700; white-space:nowrap;
}
.chip-1{top:-7%; inset-inline-start:-7%;}
.chip-2{bottom:-5%; inset-inline-end:-5%;}
.chip-dot{width:10px; height:10px; border-radius:50%; background:var(--grad); flex:none;}
.chip-sub{display:block; color:var(--text-faint); font-weight:600; font-size:.74rem; margin-top:2px;}

/* ===================== ABOUT ===================== */
.about{overflow:hidden;}
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:start; position:relative; z-index:2;}
.about-text p{color:var(--text-dim); margin-bottom:18px;}
.about-text .lead{color:var(--text); font-size:1.18rem; font-weight:600; margin-bottom:20px;}
.about-text strong{color:var(--accent-2);}
.about-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.badge{font-size:.82rem; font-weight:700; padding:8px 16px; border-radius:999px; border:1px solid var(--border); color:var(--text-dim); background:var(--surface); backdrop-filter:blur(10px); transition:all .3s var(--ease);}
.badge:hover{border-color:var(--accent-2); color:var(--text); transform:translateY(-2px);}

.tilt-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px; position:relative; overflow:hidden; backdrop-filter:blur(16px); box-shadow:var(--shadow-soft); transform-style:preserve-3d; transition:transform .15s ease-out, box-shadow .3s; will-change:transform;}
.tilt-card:hover{box-shadow:var(--shadow-glow);}
.tilt-card-glow{position:absolute; inset:-2px; border-radius:inherit; opacity:0; transition:opacity .3s; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(139,123,255,.15), transparent 60%); pointer-events:none;}
.tilt-card:hover .tilt-card-glow{opacity:1;}
.tilt-card h3{font-size:1.2rem; font-weight:800; margin-bottom:22px;}
.mini-timeline li{display:flex; gap:14px; align-items:flex-start; color:var(--text-dim); font-size:.94rem; padding-bottom:18px; margin-bottom:18px; border-bottom:1px dashed var(--border);}
.mini-timeline li:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.mini-timeline .num{flex:none; width:28px; height:28px; border-radius:9px; background:var(--grad); color:var(--on-accent); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.85rem;}

/* ===================== WORK ===================== */
.work{overflow:hidden;}
.work-features{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:70px; position:relative; z-index:2;}
.wf-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:26px; backdrop-filter:blur(14px); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;}
.wf-item:hover{transform:translateY(-6px); border-color:var(--border-strong); box-shadow:var(--shadow-soft);}
.wf-icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--accent-2); background:linear-gradient(135deg, rgba(139,123,255,.16), rgba(34,211,238,.16));}
.wf-icon svg{width:22px; height:22px;}
.wf-item h4{font-size:1.05rem; font-weight:800; margin-bottom:8px;}
.wf-item p{color:var(--text-dim); font-size:.92rem;}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; z-index:2;}
.gallery-item{position:relative; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/11; text-align:start; transition:transform .4s var(--ease), border-color .4s;}
.gallery-item.wide{grid-column:span 2;}
.gallery-item img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s var(--ease);}
.gallery-item::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(4,4,10,.82), transparent 55%); transition:opacity .35s;}
.gallery-item:hover{transform:translateY(-6px); border-color:var(--accent);}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-caption{position:absolute; bottom:16px; inset-inline-start:18px; z-index:2; font-weight:800; color:#fff; font-size:1rem;}
.gallery-caption::after{content:'⤢'; margin-inline-start:8px; opacity:.7; font-size:.85em;}

/* ===================== WHY ===================== */
.why{background:var(--bg-elev);}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.why-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:28px 24px; backdrop-filter:blur(14px); transition:transform .35s var(--ease), box-shadow .35s;}
.why-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-glow);}
.why-num{font-size:1.6rem; font-weight:800; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:14px;}
.why-card h4{font-size:1.02rem; font-weight:800; margin-bottom:10px;}
.why-card p{color:var(--text-dim); font-size:.9rem;}

/* ===================== SERVICES ===================== */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.service-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; backdrop-filter:blur(14px); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; position:relative;}
.service-card:hover{transform:translateY(-6px); border-color:transparent; box-shadow:var(--shadow-glow);}
.service-icon{width:54px; height:54px; border-radius:15px; background:linear-gradient(135deg, rgba(139,123,255,.18), rgba(34,211,238,.18)); display:flex; align-items:center; justify-content:center; color:var(--accent-2); margin-bottom:18px;}
.service-icon svg{width:26px; height:26px;}
.service-card h3{font-size:1.08rem; font-weight:800; margin-bottom:10px;}
.service-card p{color:var(--text-dim); font-size:.92rem;}

/* ===================== PROCESS ===================== */
.timeline{position:relative; padding-inline-start:6px;}
.timeline-line{position:absolute; inset-inline-start:19px; top:6px; bottom:6px; width:2px; background:var(--border);}
.timeline-progress{position:absolute; top:0; inset-inline-start:0; width:100%; height:0%; background:var(--grad); transition:height .1s linear;}
.timeline-step{display:flex; gap:26px; padding-bottom:46px; position:relative;}
.timeline-step:last-child{padding-bottom:0;}
.ts-dot{flex:none; width:40px; height:40px; border-radius:50%; background:var(--surface-solid); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--text-dim); z-index:1; transition:all .4s var(--ease);}
.timeline-step.in-view .ts-dot{border-color:transparent; color:var(--on-accent); background:var(--grad);}
.ts-content{padding-top:6px;}
.ts-content h4{font-size:1.1rem; font-weight:800; margin-bottom:8px;}
.ts-content p{color:var(--text-dim); font-size:.94rem; max-width:520px;}

/* ===================== CONTACT ===================== */
.contact{overflow:hidden; text-align:center;}
.contact-inner{position:relative; z-index:2; max-width:720px; margin-inline:auto;}
.contact-title{font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:800; line-height:1.5; margin:20px 0 16px;}
.contact-sub{color:var(--text-dim); font-size:1.05rem; margin-bottom:44px;}

.phone-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:42px; display:inline-flex; flex-direction:column; align-items:center; gap:20px; backdrop-filter:blur(18px); box-shadow:var(--shadow-glow); max-width:100%;}
.phone-label{font-size:.85rem; font-weight:700; color:var(--text-faint);}
.phone-number-row{display:flex; align-items:center; gap:14px;}
.phone-number{font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:.03em; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;}
.copy-btn{position:relative; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:all .3s var(--ease);}
.copy-btn:hover{color:var(--accent-2); border-color:var(--accent-2);}
.copy-tooltip{position:absolute; top:-38px; left:50%; transform:translateX(-50%) translateY(6px); background:var(--accent-2); color:var(--on-accent); font-size:.75rem; font-weight:800; padding:5px 12px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:all .25s var(--ease);}
.copy-btn.copied .copy-tooltip{opacity:1; transform:translateX(-50%) translateY(0);}
.contact-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

/* ===================== FOOTER ===================== */
.site-footer{padding:60px 0 34px; border-top:1px solid var(--border); text-align:center;}
.footer-inner{display:flex; flex-direction:column; align-items:center; gap:14px;}
.footer-tagline{color:var(--text-dim); font-size:.92rem; max-width:420px;}
.footer-phone{font-weight:800; color:var(--accent-2); font-size:1.05rem;}
.footer-copy{color:var(--text-faint); font-size:.8rem; margin-top:10px;}

/* ===================== LIGHTBOX ===================== */
.lightbox{position:fixed; inset:0; z-index:10000; background:rgba(4,4,10,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); padding:40px 20px; backdrop-filter:blur(8px);}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:min(900px,92vw); max-height:78vh; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.94); transition:transform .35s var(--ease);}
.lightbox.open img{transform:scale(1);}
.lightbox-caption{color:#fff; font-weight:700; font-size:1rem;}
.lightbox-close{position:absolute; top:24px; inset-inline-end:24px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:all .3s;}
.lightbox-close:hover{background:var(--grad); color:var(--on-accent); transform:rotate(90deg);}

/* ===================== RESPONSIVE ===================== */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{max-width:420px; margin-inline:auto; padding:44px 0;}
  .chip{display:none;}
  .about-grid{grid-template-columns:1fr;}
  .work-features{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .gallery-item.wide{grid-column:span 2;}
  .orbit-2{width:640px; height:640px;}
  .orbit-1{width:460px; height:460px;}
}
@media(max-width:760px){
  .main-nav{position:fixed; top:76px; inset-inline:16px; flex-direction:column; align-items:stretch; gap:0; background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; opacity:0; pointer-events:none; transform:translateY(-10px); transition:all .3s var(--ease); box-shadow:0 20px 50px rgba(0,0,0,.3);}
  .main-nav.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-link{padding:14px 12px; border-bottom:1px solid var(--border);}
  .nav-link:last-child{border-bottom:none;}
  .nav-toggle{display:flex;}
  .header-cta{display:none;}
  section{padding:84px 0;}
  .hero{padding-top:120px;}
  .hero-stats{gap:30px;}
  .work-features{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr;}
  .gallery-item.wide{grid-column:span 1;}
  .phone-card{padding:28px 22px;}
}