:root{--ink:#151515;--paper:#f6f3ee;--accent:#c98d64;--line:#ddd7cf;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Tajawal",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7}
a{color:inherit;text-decoration:none}.container{width:min(1160px,calc(100% - 40px));margin:auto}
.site-header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(246,243,238,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;flex-direction:column;line-height:1}.logo span{font-weight:800;letter-spacing:1.4px}.logo small{letter-spacing:5px;font-size:9px;margin-top:6px}
.menu{display:flex;align-items:center;gap:28px;font-weight:600;font-size:14px}.menu a:hover{opacity:.55}.nav-cta{border:1px solid var(--ink);padding:9px 18px;border-radius:99px}.menu-btn{display:none;background:none;border:0;font-size:24px}
.hero{min-height:100vh;padding:145px 0 80px;display:flex;align-items:center}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--accent);margin:0 0 16px}.hero h1{font-size:clamp(46px,6vw,82px);line-height:1.05;margin:0 0 24px;letter-spacing:-2px}.hero h1 span{font-weight:400}.lead{font-size:19px;max-width:590px;color:#555;margin-bottom:30px}
.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;padding:13px 24px;border-radius:99px;font-weight:700;transition:.2s}.btn:hover{transform:translateY(-2px)}.primary{background:var(--ink);color:#fff}.secondary{border:1px solid var(--line)}
.mini-stats{display:flex;gap:40px;margin-top:48px;padding-top:25px;border-top:1px solid var(--line);max-width:520px}.mini-stats div{display:flex;flex-direction:column}.mini-stats strong{font-size:18px}.mini-stats span{font-size:11px;color:#777;letter-spacing:1px}
.visual{position:relative;min-height:520px}.browser{position:absolute;left:0;top:25px;width:92%;height:410px;background:#fff;border-radius:15px;box-shadow:0 30px 70px rgba(0,0,0,.13);overflow:hidden;transform:rotate(-2deg)}
.browser-top{height:35px;background:#eee;display:flex;gap:6px;align-items:center;padding:0 12px}.browser-top i{width:7px;height:7px;border-radius:50%;background:#bbb}
.mock{height:100%;padding:55px;background:#24211f;color:#fff}.mock-label{font-size:9px;letter-spacing:4px}.mock h2{font-size:35px;line-height:1.15;margin:48px 0 25px}.mock-btn{width:90px;height:27px;border:1px solid #fff;border-radius:30px}.mock-cards{display:flex;gap:10px;margin-top:55px}.mock-cards b{height:80px;flex:1;background:#b47d5a;border-radius:4px}.mock-cards b:nth-child(2){opacity:.55}.mock-cards b:nth-child(3){opacity:.3}
.phone{position:absolute;right:0;bottom:0;width:175px;height:345px;border:7px solid #171717;border-radius:28px;background:#fff;box-shadow:0 25px 50px rgba(0,0,0,.22);overflow:hidden}.phone-screen{height:100%;padding:50px 18px;background:#ded5c9}.phone-screen span{font-weight:800;font-size:23px;line-height:1.1}.phone-screen b{display:block;height:70px;background:#24211f;margin-top:35px;border-radius:5px}.phone-screen b:last-child{background:#b47d5a;margin-top:10px}
.section{padding:110px 0}.section-title{font-size:clamp(34px,4vw,54px);line-height:1.15;max-width:760px;margin:0 0 50px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.cards article{padding:30px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.25)}.cards article>span{font-size:11px;color:#999}.cards h3{font-size:21px;margin:40px 0 10px}.cards p{color:#666;font-size:14px}
.dark{background:#171717;color:#fff}.dark .section-title{max-width:850px}.projects{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:16px}.project{min-height:430px;border-radius:12px;padding:30px;display:flex;align-items:flex-end;background:#333;overflow:hidden}.project div{background:rgba(0,0,0,.58);backdrop-filter:blur(8px);padding:20px;border-radius:8px;width:100%}.project small{letter-spacing:2px;color:#ddd}.project h3{font-size:25px;margin:7px 0}.project p{margin:0;color:#ddd}.p1{background:linear-gradient(135deg,#9b735d,#d5c3b8)}.p2{background:linear-gradient(135deg,#4e5b58,#a7aaa2)}.p3{background:linear-gradient(135deg,#806f64,#d7c6a9)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:80px}.about-copy{font-size:20px;color:#555;padding-top:45px}
.contact{padding:70px 0}.contact-box{background:var(--accent);padding:65px;border-radius:18px;display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:50px}.contact h2{font-size:clamp(38px,5vw,65px);line-height:1.05;margin:0}.contact .eyebrow{color:#4d2d1f}.contact-actions{display:flex;flex-direction:column;gap:10px}.light{background:#fff}.outline-light{border:1px solid rgba(255,255,255,.8)}.contact-actions small{margin-top:8px;opacity:.7}
footer{padding:35px 0;border-top:1px solid var(--line)}.footer-inner{display:flex;align-items:center;justify-content:space-between}footer p{font-size:12px;color:#777}
@media(max-width:850px){
  .container{width:min(100% - 28px,1160px)}

  .nav{height:68px}
  .menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    font-size:22px;
    border-radius:50%;
  }
  .menu{
    display:none;
    position:absolute;
    top:68px;
    right:14px;
    left:14px;
    background:var(--paper);
    padding:18px;
    border:1px solid var(--line);
    border-radius:14px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
  }
  .menu.open{display:flex}
  .menu a{padding:10px 6px}
  .nav-cta{text-align:center}

  .hero{
    min-height:auto;
    padding:105px 0 42px;
    align-items:flex-start;
  }
  .hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .hero .eyebrow{
    margin-bottom:12px;
    font-size:11px;
  }
  .hero h1{
    font-size:clamp(39px,11vw,52px);
    line-height:1.06;
    letter-spacing:-1.2px;
    margin-bottom:18px;
  }
  .lead{
    font-size:17px;
    line-height:1.8;
    margin:0 0 24px;
    max-width:100%;
  }
  .actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .actions .btn{
    min-height:48px;
    padding:11px 14px;
    font-size:14px;
  }
  .mini-stats{
    margin-top:28px;
    padding-top:20px;
    max-width:100%;
    justify-content:space-between;
    gap:10px;
  }
  .mini-stats div{min-width:0}
  .mini-stats strong{font-size:16px}
  .mini-stats span{font-size:10px}

  .visual{
    min-height:315px;
    margin-top:2px;
  }
  .browser{
    width:94%;
    height:270px;
    top:0;
    left:0;
    transform:rotate(-1deg);
    border-radius:12px;
  }
  .browser-top{height:28px}
  .mock{
    padding:28px;
  }
  .mock-label{font-size:8px}
  .mock h2{
    font-size:24px;
    margin:30px 0 18px;
  }
  .mock-btn{
    width:78px;
    height:24px;
  }
  .mock-cards{
    margin-top:30px;
    gap:7px;
  }
  .mock-cards b{
    height:55px;
  }
  .phone{
    width:108px;
    height:220px;
    right:0;
    bottom:0;
    border-width:5px;
    border-radius:20px;
  }
  .phone-screen{
    padding:34px 10px 12px;
  }
  .phone-screen span{
    font-size:16px;
  }
  .phone-screen b{
    height:48px;
    margin-top:24px;
  }

  .section{padding:72px 0}
  .section-title{
    font-size:clamp(32px,8vw,44px);
    margin-bottom:34px;
  }
  .cards{grid-template-columns:1fr 1fr}
  .cards article{padding:24px}
  .cards h3{margin-top:28px}

  .projects{grid-template-columns:1fr}
  .project{min-height:290px}

  .about{
    grid-template-columns:1fr;
    gap:12px;
  }
  .about-copy{
    padding-top:0;
    font-size:18px;
  }

  .contact{
    padding:54px 0;
  }
  .contact-box{
    grid-template-columns:1fr;
    gap:26px;
    padding:36px 24px;
    border-radius:16px;
  }
  .contact h2{
    font-size:clamp(36px,10vw,50px);
  }
  .contact-actions .btn{
    min-height:48px;
  }

  .footer-inner{
    gap:20px;
  }
}

@media(max-width:520px){
  .site-header .logo span{font-size:13px}
  .site-header .logo small{font-size:8px;letter-spacing:4px}

  .hero{
    padding-top:94px;
    padding-bottom:34px;
  }
  .hero h1{
    font-size:40px;
  }
  .lead{
    font-size:16px;
  }
  .actions{
    grid-template-columns:1fr;
  }
  .actions .btn{
    width:100%;
  }
  .mini-stats{
    gap:6px;
  }
  .mini-stats strong{
    font-size:15px;
  }

  .visual{
    min-height:285px;
  }
  .browser{
    height:245px;
  }
  .mock{
    padding:24px;
  }
  .mock h2{
    font-size:21px;
    margin-top:24px;
  }
  .mock-cards{
    margin-top:24px;
  }
  .phone{
    width:96px;
    height:195px;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .section{
    padding:62px 0;
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}
/* ===== Pricing + refined design ===== */
body{overflow-x:hidden}
.site-header{transition:box-shadow .25s ease,background .25s ease}
.site-header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.06);background:rgba(246,243,238,.97)}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 82% 18%,rgba(201,141,100,.16),transparent 24%),var(--paper)}
.hero .eyebrow,.section .eyebrow{display:inline-flex;align-items:center;gap:8px}
.hero .eyebrow::before,.section .eyebrow::before{content:"";width:26px;height:1px;background:currentColor}
.cards article,.price-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.cards article:hover,.price-card:hover{transform:translateY(-5px);border-color:#c8b7aa;box-shadow:0 18px 40px rgba(0,0,0,.06)}
.projects .project{transition:transform .25s ease}
.projects .project:hover{transform:translateY(-4px)}
.pricing-section{background:#fff}
.pricing-head{display:grid;grid-template-columns:1fr .55fr;gap:50px;align-items:end;margin-bottom:36px}
.pricing-head .section-title{margin-bottom:0}
.pricing-intro{color:#666;font-size:17px;margin:0 0 10px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.price-card{position:relative;border:1px solid var(--line);border-radius:18px;padding:32px;background:#fbfaf8;display:flex;flex-direction:column}
.price-card.featured{background:#171717;color:#fff;border-color:#171717;transform:translateY(-10px);box-shadow:0 24px 55px rgba(0,0,0,.18)}
.price-card.featured:hover{transform:translateY(-14px)}
.popular{position:absolute;top:16px;left:16px;background:var(--accent);color:#1d120c;font-size:11px;font-weight:800;padding:7px 11px;border-radius:99px}
.price-badge{display:inline-block;color:var(--accent);font-size:12px;font-weight:800;margin-bottom:6px}
.price-card h3{margin:0 0 18px;font-size:20px}
.price{font-size:48px;line-height:1;margin:0 0 14px;font-weight:800;letter-spacing:-1px}
.price small{font-size:20px}
.price-note{color:#6d6d6d;min-height:52px;margin:0}
.featured .price-note{color:#c9c9c9}
.features{list-style:none;padding:0;margin:28px 0;display:grid;gap:12px}
.features li{position:relative;padding-right:23px;font-size:14px}
.features li::before{content:"✓";position:absolute;right:0;color:var(--accent);font-weight:800}
.annual-fee{padding:15px 16px;border:1px solid rgba(201,141,100,.35);background:rgba(201,141,100,.08);border-radius:12px;margin:0 0 20px;display:grid;gap:3px}
.annual-fee strong{font-size:15px}
.annual-fee span{font-size:12px;color:#777}
.featured .annual-fee span{color:#c9c9c9}
.price-card .btn{margin-top:auto;width:100%;border:0;cursor:pointer;font-family:inherit}
.featured .btn{background:var(--accent);color:#171717}
.billing-note{text-align:center;color:#777;font-size:13px;margin:24px auto 0;max-width:760px}
.order-panel{position:fixed;inset:0;background:rgba(10,10,10,.55);backdrop-filter:blur(8px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.order-panel.open{display:flex}
.order-card{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--paper);border-radius:20px;padding:34px;box-shadow:0 35px 90px rgba(0,0,0,.28)}
.order-close{position:absolute;top:14px;left:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:24px;cursor:pointer}
.order-card h2{font-size:34px;margin:0 0 8px}
.selected-plan{display:inline-block;background:#ebe4dc;border-radius:99px;padding:8px 13px;font-size:13px;font-weight:700;margin:0 0 22px}
#order-form{display:grid;gap:15px}
#order-form label{display:grid;gap:7px;font-size:13px;font-weight:700}
#order-form input,#order-form textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px 14px;background:#fff;font:inherit;font-size:16px;outline:none}
#order-form input:focus,#order-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,141,100,.12)}
#order-form textarea{resize:vertical}
#order-form .btn{border:0;font-family:inherit;cursor:pointer;margin-top:4px}
@media(max-width:850px){
  .pricing-head{grid-template-columns:1fr;gap:8px}
  .pricing-grid{grid-template-columns:1fr}
  .price-card.featured{background:#171717;color:#fff;border-color:#171717;transform:translateY(-10px);box-shadow:0 24px 55px rgba(0,0,0,.18)}
  .price-card.featured:hover{transform:translateY(-5px)}
}
@media(max-width:520px){
  .price-card{padding:24px}
  .price{font-size:42px}
  .order-card{padding:28px 20px}
  .order-card h2{font-size:30px}
}


/* ===== Portfolio / My Work ===== */
.portfolio-section{position:relative;overflow:hidden;background:#171717}
.portfolio-section::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(201,141,100,.18),transparent 68%);top:-120px;left:-120px;pointer-events:none}
.portfolio-intro{max-width:720px;margin:-30px 0 44px;color:#c9c9c9;font-size:16px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.project-card{position:relative;display:flex;flex-direction:column;min-height:520px;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:linear-gradient(180deg,#232323,#1d1d1d);overflow:hidden;isolation:isolate;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.project-card:hover{transform:translateY(-9px);border-color:rgba(201,141,100,.55);box-shadow:0 28px 60px rgba(0,0,0,.30)}
.project-visual{height:390px;display:flex;align-items:center;justify-content:center;padding:22px 18px 8px;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.10),transparent 62%);overflow:hidden}
.project-visual img{display:block;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.project-card:hover .project-visual img{transform:translateY(-7px) scale(1.025)}
.project-info{padding:22px 24px 25px;border-top:1px solid rgba(255,255,255,.07);margin-top:auto}
.project-info small{display:block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:1.5px;margin-bottom:7px}
.project-info h3{font-size:20px;line-height:1.35;margin:0 0 15px;color:#fff}
.project-link{display:inline-flex;align-items:center;gap:8px;color:#d5d5d5;font-size:13px;font-weight:700}
.project-link b{font-size:16px;transition:transform .25s ease}
.project-card:hover .project-link b{transform:translate(-3px,-3px)}

/* Scroll reveal animation */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.project-card,.project-visual img{transition:none}}

/* Extra contrast inside the featured store card */
.price-card.featured h3,.price-card.featured .price,.price-card.featured .features li,.price-card.featured .annual-fee strong{color:#fff}
.price-card.featured .price-note,.price-card.featured .annual-fee span{color:#c9c9c9}

@media(max-width:1050px){
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:850px){
  .portfolio-intro{margin-top:-20px;margin-bottom:30px;font-size:15px}
  .project-card{min-height:470px}
  .project-visual{height:350px}
}

@media(max-width:520px){
  /* Smaller titles on phone */
  .hero h1{font-size:34px;line-height:1.08;letter-spacing:-.8px}
  .section-title{font-size:27px;line-height:1.28;margin-bottom:28px}
  .pricing-head .section-title{font-size:26px}
  .about .section-title{font-size:26px}
  .contact h2{font-size:34px;line-height:1.12}
  .price-card h3{font-size:18px}
  .price{font-size:38px}
  .pricing-intro{font-size:15px}

  .portfolio-grid{grid-template-columns:1fr;gap:18px}
  .portfolio-intro{font-size:14px;line-height:1.8;margin-top:-14px;margin-bottom:26px}
  .project-card{min-height:430px;border-radius:18px}
  .project-visual{height:325px;padding:17px 12px 6px}
  .project-info{padding:18px 20px 20px}
  .project-info h3{font-size:17px;margin-bottom:12px}
  .project-info small{font-size:9px}
  .project-link{font-size:12px}
}

/* ===== Hero redesign: real web-development background + animations ===== */
.hero{
  position:relative;
  min-height:92vh;
  padding:150px 0 90px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:#151515;
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-4%;
  z-index:-2;
  background-image:url("assets/hero-web-design.jpg");
  background-size:cover;
  background-position:center 54%;
  filter:saturate(.86) contrast(1.04);
  transform:scale(1.06);
  animation:heroBgMove 14s ease-in-out infinite alternate;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.72) 38%,rgba(10,10,10,.42) 68%,rgba(10,10,10,.34) 100%),
    linear-gradient(180deg,rgba(10,10,10,.18),rgba(10,10,10,.52));
}
.hero-grid{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,760px) 1fr;
  gap:40px;
  align-items:center;
}
.hero-grid>div:first-child{
  max-width:760px;
  padding:34px 36px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  background:rgba(12,12,12,.28);
  backdrop-filter:blur(10px);
  box-shadow:0 30px 70px rgba(0,0,0,.22);
}
.hero .eyebrow{color:#e7b28d;margin-bottom:14px}
.hero .eyebrow::before{background:currentColor;animation:accentPulse 2.5s ease-in-out infinite}
.hero h1{
  font-size:clamp(40px,4.6vw,62px);
  line-height:1.08;
  letter-spacing:-1.4px;
  margin:0 0 20px;
  color:#fff;
}
.hero h1 span{font-weight:400;color:#f0d6c5}
.hero .lead{max-width:650px;color:rgba(255,255,255,.82);font-size:18px;margin-bottom:28px}
.hero .primary{background:var(--accent);color:#171717}
.hero .secondary{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.hero .secondary:hover{background:rgba(255,255,255,.12)}
.hero .mini-stats{
  margin-top:34px;
  padding-top:20px;
  border-top-color:rgba(255,255,255,.18);
  max-width:560px;
}
.hero .mini-stats strong{color:#fff}
.hero .mini-stats span{color:rgba(255,255,255,.64)}
.hero .visual{display:none}

/* staggered entrance */
.hero-grid>div:first-child>*{opacity:0;transform:translateY(18px);animation:heroItemIn .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-grid>div:first-child>.eyebrow{animation-delay:.12s}
.hero-grid>div:first-child>h1{animation-delay:.24s}
.hero-grid>div:first-child>.lead{animation-delay:.38s}
.hero-grid>div:first-child>.actions{animation-delay:.52s}
.hero-grid>div:first-child>.mini-stats{animation-delay:.66s}
.hero .btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.hero .btn:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.20)}

@keyframes heroItemIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroBgMove{
  0%{transform:scale(1.06) translate3d(0,0,0)}
  100%{transform:scale(1.11) translate3d(-1.2%,.8%,0)}
}
@keyframes accentPulse{
  0%,100%{opacity:.65;transform:scaleX(.8)}
  50%{opacity:1;transform:scaleX(1.18)}
}

@media(max-width:850px){
  .hero{min-height:78vh;padding:118px 0 62px}
  .hero::before{background-position:58% center}
  .hero::after{background:linear-gradient(90deg,rgba(9,9,9,.86),rgba(9,9,9,.56)),linear-gradient(180deg,rgba(9,9,9,.16),rgba(9,9,9,.55))}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-grid>div:first-child{max-width:680px;padding:28px 26px;border-radius:22px}
  .hero h1{font-size:clamp(34px,7vw,46px);line-height:1.1;letter-spacing:-.8px}
  .hero .lead{font-size:16px}
}

@media(max-width:520px){
  .hero{min-height:74vh;padding:104px 0 50px}
  .hero::before{background-position:61% center}
  .hero-grid>div:first-child{padding:23px 19px;border-radius:18px;background:rgba(12,12,12,.34)}
  .hero h1{font-size:31px;line-height:1.13;letter-spacing:-.45px;margin-bottom:16px}
  .hero .eyebrow{font-size:10px;letter-spacing:1.2px}
  .hero .lead{font-size:15px;line-height:1.75;margin-bottom:22px}
  .hero .actions{grid-template-columns:1fr 1fr;gap:8px}
  .hero .actions .btn{min-height:45px;padding:10px 12px;font-size:13px}
  .hero .mini-stats{margin-top:24px;padding-top:16px;gap:8px}
  .hero .mini-stats strong{font-size:14px}
  .hero .mini-stats span{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .hero-grid>div:first-child>*{opacity:1;transform:none;animation:none}
  .hero .eyebrow::before{animation:none}
}

/* ===== Hero V4 — dark programming studio ===== */
.site-header{
  background:rgba(12,12,14,.58);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
}
.site-header .nav-cta{border-color:rgba(255,255,255,.48)}
.site-header.scrolled{
  background:rgba(246,243,238,.96);
  color:var(--ink);
  border-bottom-color:rgba(0,0,0,.06);
}
.site-header.scrolled .nav-cta{border-color:var(--ink)}

.hero{
  min-height:92vh;
  padding:132px 0 74px;
  background:#111318;
  color:#fff;
  display:flex;
  align-items:center;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-5%;
  z-index:-3;
  background:url("assets/hero-programming.jpg") center 48%/cover no-repeat;
  filter:saturate(.82) contrast(1.08);
  transform:scale(1.055);
  animation:heroStudioDrift 18s ease-in-out infinite alternate;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 78% 38%,rgba(201,141,100,.14),transparent 31%),
    linear-gradient(90deg,rgba(8,10,14,.94) 0%,rgba(8,10,14,.84) 42%,rgba(8,10,14,.58) 67%,rgba(8,10,14,.30) 100%);
}
.hero-layout{position:relative;width:min(1160px,calc(100% - 40px));min-height:620px;display:flex;align-items:center}
.hero-copy{width:min(650px,58%);padding:26px 0 84px}
.hero .eyebrow{color:#e0a37c;font-size:11px;letter-spacing:1.7px;margin-bottom:15px}
.hero h1{
  margin:0 0 18px;
  max-width:610px;
  font-size:clamp(38px,4.4vw,54px);
  line-height:1.08;
  letter-spacing:-1px;
  color:#fff;
}
.hero h1 span{font-weight:700;color:#e8b08b}
.hero .lead{max-width:600px;margin:0 0 27px;color:rgba(255,255,255,.78);font-size:17px;line-height:1.9}
.hero .actions{display:flex;gap:11px;flex-wrap:wrap}
.hero .btn{min-height:48px;padding:12px 22px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.hero .primary{background:#dfa27c;color:#171717;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.hero .secondary{color:#fff;border:1px solid rgba(255,255,255,.48);background:rgba(255,255,255,.055)}
.hero .btn:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.24)}
.hero .secondary:hover{background:rgba(255,255,255,.12)}

.hero-features{
  margin-top:36px;
  padding-top:21px;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:620px;
}
.hero-features>div{padding:0 15px;border-left:1px solid rgba(255,255,255,.12);display:grid;gap:2px}
.hero-features>div:first-child{padding-right:0}
.hero-features>div:last-child{border-left:0}
.hero-features span{font-size:21px;line-height:1;color:#e2a17a;margin-bottom:5px}
.hero-features strong{font-size:13px;color:#fff}
.hero-features small{font-size:10px;color:rgba(255,255,255,.56)}

.scroll-cue{
  position:absolute;
  bottom:14px;
  right:50%;
  transform:translateX(50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.68);
  font-size:11px;
  letter-spacing:.2px;
}
.scroll-cue span{width:22px;height:34px;border:1px solid rgba(255,255,255,.60);border-radius:99px;position:relative}
.scroll-cue span::after{content:"";position:absolute;top:7px;left:50%;width:3px;height:6px;border-radius:3px;background:#e2a17a;transform:translateX(-50%);animation:scrollDot 1.8s ease-in-out infinite}

.hero .eyebrow,.hero h1,.hero .lead,.hero .actions,.hero-features{opacity:0;transform:translateY(18px);animation:heroReveal .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero .eyebrow{animation-delay:.08s}.hero h1{animation-delay:.18s}.hero .lead{animation-delay:.30s}.hero .actions{animation-delay:.42s}.hero-features{animation-delay:.54s}

@keyframes heroReveal{to{opacity:1;transform:translateY(0)}}
@keyframes heroStudioDrift{0%{transform:scale(1.055) translate3d(0,0,0)}100%{transform:scale(1.095) translate3d(-1.1%,.7%,0)}}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(-50%,13px)}}

@media(max-width:850px){
  .site-header{background:rgba(12,12,14,.72)}
  .site-header .menu{background:#17181c;border-color:rgba(255,255,255,.12);color:#fff}
  .site-header.scrolled .menu{background:var(--paper);color:var(--ink);border-color:var(--line)}
  .hero{min-height:82vh;padding:108px 0 58px}
  .hero::before{background-position:42% center}
  .hero::after{background:linear-gradient(90deg,rgba(8,10,14,.92),rgba(8,10,14,.68) 66%,rgba(8,10,14,.44))}
  .hero-layout{min-height:560px;width:min(100% - 30px,1160px)}
  .hero-copy{width:min(610px,80%);padding-bottom:70px}
  .hero h1{font-size:clamp(32px,6.5vw,43px)}
  .hero .lead{font-size:16px}
  .hero-features{grid-template-columns:repeat(2,1fr);gap:14px 0;max-width:480px}
  .hero-features>div:nth-child(2){border-left:0}
}

@media(max-width:520px){
  .hero{min-height:80vh;padding:96px 0 48px}
  .hero::before{background-position:36% center}
  .hero::after{background:linear-gradient(90deg,rgba(8,10,14,.94),rgba(8,10,14,.77) 70%,rgba(8,10,14,.56))}
  .hero-layout{min-height:540px;width:min(100% - 26px,1160px)}
  .hero-copy{width:100%;padding:12px 0 66px}
  .hero .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:11px}
  .hero h1{font-size:28px;line-height:1.13;letter-spacing:-.3px;margin-bottom:14px;max-width:330px}
  .hero .lead{font-size:14px;line-height:1.8;margin-bottom:20px;max-width:360px}
  .hero .actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}
  .hero .actions .btn{min-height:44px;padding:9px 10px;font-size:12px}
  .hero-features{margin-top:25px;padding-top:16px;grid-template-columns:repeat(2,1fr);gap:15px 0;max-width:100%}
  .hero-features>div{padding:0 11px}
  .hero-features strong{font-size:12px}
  .hero-features small{font-size:9px}
  .hero-features span{font-size:18px}
  .scroll-cue{bottom:3px;font-size:9px;gap:5px}
  .scroll-cue span{width:19px;height:30px}
}

@media(prefers-reduced-motion:reduce){
  .hero::before,.scroll-cue span::after{animation:none}
  .hero .eyebrow,.hero h1,.hero .lead,.hero .actions,.hero-features{opacity:1;transform:none;animation:none}
}

/* ===== Site-wide motion polish ===== */
.motion-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.motion-reveal.motion-left{transform:translateX(34px)}
.motion-reveal.motion-right{transform:translateX(-34px)}
.motion-reveal.motion-scale{transform:scale(.965) translateY(16px)}
.motion-reveal.is-visible{opacity:1;transform:none}

/* staggered service cards */
.cards article{
  overflow:hidden;
  position:relative;
}
.cards article::after{
  content:"";
  position:absolute;
  inset:auto -35% -70% auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,141,100,.18),transparent 70%);
  opacity:0;
  transform:scale(.7);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.cards article:hover::after{opacity:1;transform:scale(1)}
.cards article:hover h3{transform:translateY(-2px)}
.cards article h3{transition:transform .25s ease}

/* project cards: gentle lift + image motion */
.project-card{
  transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s ease,border-color .3s ease;
}
.project-card:hover{transform:translateY(-9px);box-shadow:0 24px 55px rgba(0,0,0,.23)}
.project-card .project-visual{overflow:hidden}
.project-card .project-visual img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.project-card:hover .project-visual img{transform:scale(1.045) translateY(-3px);filter:saturate(1.04)}
.project-link b{display:inline-block;transition:transform .25s ease}
.project-card:hover .project-link b{transform:translate(-4px,-4px)}

/* pricing motion */
.price-card{
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s ease,border-color .32s ease;
}
.price-card:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(0,0,0,.10)}
.price-card.featured:hover{transform:translateY(-15px) scale(1.012)}
.popular{animation:softBadgeGlow 2.8s ease-in-out infinite}
@keyframes softBadgeGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(201,141,100,0)}
  50%{box-shadow:0 0 0 7px rgba(201,141,100,.10)}
}

/* contact box subtle living gradient */
.contact-box{
  background:linear-gradient(120deg,var(--accent),#ddb18f,var(--accent));
  background-size:220% 220%;
  animation:contactGlow 11s ease-in-out infinite;
}
@keyframes contactGlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* buttons feel more interactive */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-35%;
  width:30%;
  height:330%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:rotate(20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover::after{left:120%}

/* logo tiny entrance accent */
.logo span,.logo small{transition:letter-spacing .3s ease,opacity .3s ease}
.logo:hover span{letter-spacing:1.9px}
.logo:hover small{letter-spacing:5.5px;opacity:.75}

/* modal entrance */
.order-panel.open .order-card{animation:orderCardIn .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes orderCardIn{
  from{opacity:0;transform:translateY(18px) scale(.975)}
  to{opacity:1;transform:none}
}

@media(max-width:850px){
  .project-card:hover,.price-card:hover,.price-card.featured:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .motion-reveal,.motion-reveal.motion-left,.motion-reveal.motion-right,.motion-reveal.motion-scale{opacity:1;transform:none;transition:none}
  .popular,.contact-box{animation:none}
  .project-card,.project-card .project-visual img,.price-card,.btn::after{transition:none}
  .order-panel.open .order-card{animation:none}
}

/* ===== Mobile motion ===== */
@media(max-width:850px){
  /* On touch screens there is no real hover, so use scroll + tap motion instead. */
  .motion-reveal{
    transition:none;
  }
  .motion-reveal.is-visible{
    animation:mobileSectionIn .68s cubic-bezier(.2,.75,.25,1) both;
  }
  .reveal{
    transition:none;
  }
  .reveal.visible{
    animation:mobileProjectIn .72s cubic-bezier(.2,.75,.25,1) both;
  }

  .hero .eyebrow,.hero h1,.hero .lead,.hero .actions,.hero-features{
    animation-duration:.72s;
  }
  .hero::before{
    animation:mobileHeroDrift 12s ease-in-out infinite alternate;
  }

  .project-card,.price-card,.cards article,.btn{
    -webkit-tap-highlight-color:transparent;
  }
  .project-card:active,.price-card:active,.cards article:active{
    transform:scale(.985);
  }
  .btn:active{
    transform:scale(.965);
  }

  .project-card .project-visual img{
    animation:mobilePhoneFloat 4.8s ease-in-out infinite;
  }
  .project-card:nth-child(2n) .project-visual img{animation-delay:.55s}
  .project-card:nth-child(3n) .project-visual img{animation-delay:1s}

  .popular{animation:softBadgeGlow 2.8s ease-in-out infinite}
}

@keyframes mobileSectionIn{
  0%{opacity:0;transform:translateY(26px) scale(.985)}
  100%{opacity:1;transform:none}
}
@keyframes mobileProjectIn{
  0%{opacity:0;transform:translateY(34px) scale(.97)}
  65%{opacity:1;transform:translateY(-3px) scale(1.005)}
  100%{opacity:1;transform:none}
}
@keyframes mobilePhoneFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes mobileHeroDrift{
  0%{transform:scale(1.055) translate3d(0,0,0)}
  100%{transform:scale(1.08) translate3d(-.6%,.4%,0)}
}

@media(max-width:520px){
  .project-card .project-visual img{animation-duration:4.4s}
  .scroll-cue{animation:mobileCue 2.2s ease-in-out infinite}
}
@keyframes mobileCue{
  0%,100%{transform:translateY(0);opacity:.72}
  50%{transform:translateY(5px);opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .motion-reveal.is-visible,.reveal.visible,.hero::before,.project-card .project-visual img,.scroll-cue{animation:none!important}
  .project-card:active,.price-card:active,.cards article:active,.btn:active{transform:none}
}