/* AQARI MEDIA — homepage */
section{padding-block:80px}
.on-dark{background:var(--green);color:var(--cream)}
.sec-head{display:grid;gap:14px;margin-bottom:40px;justify-items:start}
.sec-head .h2{max-width:20ch}

/* Hero */
.hero{
  position:relative;overflow:hidden;padding-block:40px 72px;
  background:
    radial-gradient(60% 50% at 90% 0%,rgba(201,169,110,.14),transparent 70%),
    linear-gradient(165deg,#164538 0%,var(--green) 50%,var(--green-2) 100%);
}
.hero-grid{display:grid;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.2rem,7.6vw,3.9rem);line-height:1.22;font-weight:700;letter-spacing:-.01em;margin-block:16px 18px}
.hero h1 .accent{color:var(--gold)}
.hero .lead{font-size:clamp(1.08rem,2.6vw,1.3rem);max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-actions .btn{flex:1 1 100%}
.hero-wa{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--muted-d);font-size:.95rem;border-bottom:1px solid var(--line-d);padding-bottom:2px}
.hero-wa svg{width:18px;height:18px;color:var(--gold)}
.hero-wa:hover{color:var(--cream);border-color:var(--gold)}
.hero-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--green-2);border:1px solid var(--line-d);box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero-chain{
  position:absolute;inset-inline:12px;bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;
  padding:10px 14px;border-radius:14px;background:rgba(13,44,37,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-d);font-size:.875rem;font-weight:500;color:var(--cream);
}
.hero-chain span:not(:last-child)::after{content:"←";color:var(--gold);margin-inline:8px}
.hero-chain span:last-child{color:var(--gold)}

/* About */
.about-grid{display:grid;gap:24px}
.about-title{font-size:clamp(2.4rem,8vw,4.4rem);margin-top:14px}
.about-body{display:grid;gap:16px;color:var(--muted);font-size:1.1rem}
.about-lead{color:var(--text);font-size:clamp(1.2rem,3vw,1.45rem);font-weight:600;line-height:1.6}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px 34px;margin-block:4px}
.chain li{position:relative;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-weight:600;font-size:1rem;color:var(--green);white-space:nowrap}
.chain li:not(:last-child)::after{content:"←";position:absolute;inset-inline-end:-24px;top:50%;transform:translateY(-50%);color:var(--gold);font-weight:400}
.chain li:last-child{background:var(--green);border-color:var(--green);color:var(--cream)}

/* Problem */
.problem{background:var(--cream-2)}
.problem-grid{display:grid;gap:12px}
.problem-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;display:grid;gap:8px}
.problem-n{font-size:.875rem;font-weight:600;color:var(--gold-deep);letter-spacing:.06em}
.problem-card h3{font-size:1.2rem;line-height:1.5}
.problem-card p{color:var(--muted);font-size:1rem}
.problem-close{margin-top:36px;padding:28px 24px;border-radius:var(--radius-lg);background:var(--green);color:var(--cream);font-size:clamp(1.3rem,3.8vw,1.9rem);font-weight:600;line-height:1.5;text-align:center}
.problem-close span{color:var(--gold)}

/* System */
.system{background:radial-gradient(70% 60% at 10% 100%,rgba(201,169,110,.1),transparent 70%),var(--green)}
.system-steps{display:grid;gap:0;position:relative}
.sys-step{position:relative;padding-inline-start:52px;padding-bottom:34px}
.sys-step::before{content:"";position:absolute;inset-inline-start:15px;top:34px;bottom:0;width:1px;background:linear-gradient(to bottom,var(--gold),rgba(201,169,110,.15))}
.sys-step:last-child{padding-bottom:0}
.sys-step:last-child::before{display:none}
.sys-dot{position:absolute;inset-inline-start:0;top:2px;width:31px;height:31px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;background:var(--green)}
.sys-dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold)}
.sys-step:last-child .sys-dot{background:var(--gold)}
.sys-step:last-child .sys-dot::after{background:var(--green)}
.sys-num{display:block;font-size:.875rem;color:var(--gold);letter-spacing:.08em;font-weight:500}
.sys-title{font-size:1.5rem;line-height:1.35;margin-top:2px}
.sys-sub{display:block;font-size:.9rem;color:var(--muted-d);margin-top:2px}
.sys-step p{color:var(--muted-d);margin-top:10px;font-size:1rem;max-width:36ch}

/* Services */
.service-grid{display:grid;gap:14px}
.service-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 24px;display:grid;gap:12px;align-content:start;transition:border-color .3s,box-shadow .3s}
.service-card:hover{border-color:var(--gold);box-shadow:0 24px 48px -36px rgba(18,59,50,.45)}
.service-top{display:flex;align-items:center;justify-content:space-between}
.service-num{font-size:.875rem;color:var(--taupe);letter-spacing:.08em}
.service-badge{width:42px;height:42px;border-radius:12px;background:var(--green);display:grid;place-items:center;--mark-main:var(--gold)}
.service-badge svg{width:22px;height:22px}
.service-card h3{font-size:1.35rem;line-height:1.45}
.service-card > p{color:var(--muted);font-size:1rem}
.check-list{display:grid;gap:8px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;line-height:1.6}
.check-list svg{width:18px;height:18px;color:var(--gold-deep);flex:none;margin-top:4px}

/* Packages */
.packages{background:var(--cream-2)}
.package-grid{display:grid;gap:16px}
.package-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 24px;display:grid;gap:16px;align-content:start}
.package-card.featured{background:var(--green);border-color:var(--green);color:var(--cream);box-shadow:0 30px 60px -38px rgba(18,59,50,.7)}
.package-name{display:flex;align-items:center;justify-content:space-between;gap:12px}
.package-name strong{font-size:.95rem;letter-spacing:.24em;color:var(--gold-deep);direction:ltr}
.package-card.featured .package-name strong{color:var(--gold)}
.package-tag{font-size:.8125rem;padding:3px 12px;border-radius:999px;border:1px solid rgba(201,169,110,.5);color:var(--gold)}
.package-card h3{font-size:1.5rem}
.package-summary{color:var(--muted);font-size:1rem}
.package-card.featured .package-summary{color:var(--muted-d)}
.package-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-block:14px;border-block:1px solid var(--line)}
.package-card.featured .package-price{border-color:var(--line-d)}
.package-price .num{font-size:clamp(2rem,6vw,2.6rem);font-weight:700;line-height:1.1}
.package-price .per{color:var(--muted);font-size:1rem}
.package-card.featured .package-price .per{color:var(--muted-d)}
.package-card .check-list{border:0;padding:0;margin:0}
.package-card.featured .check-list svg{color:var(--gold)}
.package-card .btn{width:100%;margin-top:8px}
.package-note{margin-top:22px;padding:22px;border-radius:var(--radius);border:1px dashed var(--gold);background:rgba(201,169,110,.08);display:grid;gap:6px}
.package-note-main{font-weight:600;font-size:1.1rem;color:var(--green)}
.package-note-sub{color:var(--muted);font-size:.95rem}
.package-note-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:600;color:var(--green);justify-self:start;border-bottom:1px solid var(--gold)}
.package-note-link svg{width:18px;height:18px}

/* Process */
.process-steps{display:grid;gap:12px;counter-reset:p}
.process-step{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:start;padding:22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line)}
.process-n{grid-row:span 2;font-size:2.2rem;font-weight:300;line-height:1;color:var(--gold-deep);min-width:48px}
.process-step h3{font-size:1.2rem;line-height:1.5}
.process-step p{color:var(--muted);font-size:1rem}

/* Who */
.who{background:var(--cream-2)}
.who-grid{display:grid;gap:12px}
.who-card{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line)}
.who-icon{grid-row:span 2;width:44px;height:44px;border-radius:12px;background:var(--green);display:grid;place-items:center;--mark-main:var(--cream)}
.who-icon svg{width:24px;height:24px}
.who-card h3{font-size:1.15rem;line-height:1.5}
.who-card p{color:var(--muted);font-size:1rem}

/* Journey */
.journey{background:linear-gradient(180deg,var(--green),var(--green-2))}
.journey-steps{display:grid;gap:10px;counter-reset:j}
.journey-step{counter-increment:j;display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:16px 18px;border-radius:16px;border:1px solid var(--line-d);background:rgba(245,240,231,.03)}
.journey-step::before{content:counter(j);grid-row:span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.9rem;font-weight:600;color:var(--green-2);background:var(--gold)}
.journey-step h3{font-size:1.05rem;line-height:1.5}
.journey-step p{color:var(--muted-d);font-size:.95rem;line-height:1.6}
.journey-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.journey-cta .btn{flex:1 1 100%}

/* FAQ */
.faq-grid{display:grid;gap:8px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:22px;font-size:clamp(1.05rem,2.6vw,1.2rem);font-weight:600;line-height:1.6}
.faq-list summary::-webkit-details-marker{display:none}
.faq-plus{position:relative;width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line)}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:1.5px;background:var(--green);transform:translate(-50%,-50%)}
.faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.faq-list details[open] .faq-plus{background:var(--green);border-color:var(--green)}
.faq-list details[open] .faq-plus::before,.faq-list details[open] .faq-plus::after{background:var(--gold)}
.faq-list details[open] .faq-plus::after{transform:translate(-50%,-50%) rotate(0)}
.faq-list .answer{padding-bottom:22px;color:var(--muted);max-width:64ch}

/* Contact */
.contact{text-align:center;background:radial-gradient(60% 70% at 50% 100%,rgba(201,169,110,.15),transparent 70%),var(--green)}
.contact-inner{display:grid;justify-items:center;gap:18px}
.contact-inner .h2{max-width:18ch}
.contact-inner .lead{margin-inline:auto}
.contact-logo{margin-bottom:8px}
.contact-logo .logo-mark{width:52px;height:52px}
.contact-logo .logo-ar{font-size:1.6rem}
.contact-logo .logo-en{font-size:.7rem}
.contact-info{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.contact-info div{padding:12px 20px;border-radius:14px;border:1px solid var(--line-d);min-width:180px}
.contact-info dt{font-size:.875rem;color:var(--muted-d)}
.contact-info dd{font-size:1.15rem;font-weight:600}
.contact-info a:hover{color:var(--gold)}
.contact-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px;width:100%}
.contact-actions .btn{flex:1 1 100%;max-width:360px}

/* Mobile sticky CTA */
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:40;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(13,44,37,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line-d);transform:translateY(110%);transition:transform .4s var(--ease)}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%;min-height:50px}

@media (min-width:640px){
  .hero-actions .btn,.journey-cta .btn{flex:0 0 auto}
  .problem-grid,.who-grid,.journey-steps{grid-template-columns:1fr 1fr}
  .service-grid{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:1fr 1fr}
  .contact-actions .btn{flex:0 1 auto}
}
@media (min-width:760px){
  section{padding-block:110px}
  .sticky-cta{display:none}
  .package-grid{grid-template-columns:1fr 1fr;align-items:stretch}
  .package-card{padding:36px 32px}
}
@media (min-width:1024px){
  section{padding-block:128px}
  .hero{padding-block:88px 120px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:64px}
  .hero-media{aspect-ratio:1/1}
  .about-grid{grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
  .problem-grid{grid-template-columns:repeat(3,1fr)}
  .service-grid{grid-template-columns:repeat(6,1fr);gap:18px}
  .service-card{grid-column:span 2}
  .service-card:nth-child(4),.service-card:nth-child(5){grid-column:span 3}
  .system-steps{grid-template-columns:repeat(5,1fr);gap:28px}
  .sys-step{padding-inline-start:0;padding-top:56px;padding-bottom:0}
  .sys-step::before{top:15px;bottom:auto;inset-inline-start:36px;inset-inline-end:-28px;width:auto;height:1px;background:linear-gradient(to left,var(--gold),rgba(201,169,110,.25))}
  .sys-step:last-child::before{display:none}
  .sys-dot{top:0}
  .process-steps{grid-template-columns:repeat(5,1fr)}
  .process-step{grid-template-columns:1fr;gap:10px;padding:26px 22px}
  .process-n{grid-row:auto}
  .who-grid{grid-template-columns:repeat(3,1fr)}
  .journey-steps{grid-template-columns:repeat(3,1fr);gap:14px}
  .faq-grid{grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
}