:root{--bg:#faf7ef;--ink:#10231a;--muted:#5b675f;--green:#0c3b2a;--green2:#145c3f;--gold:#c9a24b;--gold2:#e7c978;--card:#fff;--line:#e6dfcb;--tint:#eef4ee;--foot:#08261b;--hbg:rgba(250,247,239,.9);--head:#0c3b2a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1812;--ink:#eef0e6;--muted:#a3b0a6;--card:#112219;--line:#24382c;--tint:#0e1f17;--hbg:rgba(11,24,18,.9);--head:#e7c978}}
:root[data-theme="dark"]{--bg:#0b1812;--ink:#eef0e6;--muted:#a3b0a6;--card:#112219;--line:#24382c;--tint:#0e1f17;--hbg:rgba(11,24,18,.9);--head:#e7c978}
*{box-sizing:border-box;margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font:400 16px/1.65 Manrope,system-ui,sans-serif}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;line-height:1.1;color:var(--head)}
a{color:inherit;text-decoration:none}
.w{max-width:1120px;margin:0 auto;padding:0 22px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--hbg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font:700 22px 'Cormorant Garamond',serif;color:var(--head)}
.logo i{width:34px;height:34px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:var(--gold2);font-style:normal;font-size:16px}
nav{display:flex;gap:26px;font-size:14px;font-weight:600}
.btn{display:inline-block;padding:12px 24px;border-radius:99px;font-weight:700;font-size:14px;background:var(--gold);color:#1a1405;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.o{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff}
.hero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(105deg,rgba(5,30,20,.96) 8%,rgba(8,45,30,.8) 50%,rgba(8,45,30,.35)),radial-gradient(circle at 78% 40%,#1f7a52,#0a3324 60%,#051c13)}
.hero:before{content:"";position:absolute;inset:0;opacity:.13;background-image:repeating-conic-gradient(from 0deg at 50% 50%,var(--gold2) 0 2deg,transparent 2deg 15deg);mask:radial-gradient(circle at 78% 45%,#000,transparent 62%);-webkit-mask:radial-gradient(circle at 78% 45%,#000,transparent 62%)}
.hero .w{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;min-height:640px;padding-top:70px;padding-bottom:70px}
.tag{color:var(--gold2);font-weight:700;font-size:13px;letter-spacing:.08em;margin-bottom:18px}
.hero h1{color:#fff;font-size:clamp(44px,6.4vw,82px);font-weight:700}
.hero h1 em{display:block;color:var(--gold2);font-style:italic;font-weight:600}
.hero p.lead{max-width:520px;margin:24px 0 32px;color:#d4e4da;font-size:17px}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.kaaba{justify-self:center;width:min(340px,80%);aspect-ratio:1;border-radius:46px;background:linear-gradient(145deg,#fff,#efe9d6);display:grid;place-items:center;box-shadow:0 40px 80px rgba(0,0,0,.45);transform:rotate(3deg);animation:fl 7s ease-in-out infinite}
@keyframes fl{50%{transform:rotate(3deg) translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.kaaba{animation:none}}
.kaaba svg{width:78%}
.strip{background:var(--card);border-bottom:1px solid var(--line)}
.strip .w{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:22px;padding-bottom:22px}
.strip b{display:block;font-size:14px;color:var(--head)}.strip span{font-size:13px;color:var(--muted)}
section{padding:96px 0}
h2{font-size:clamp(34px,4.4vw,52px);font-weight:700;max-width:640px}
.sub{color:var(--muted);max-width:560px;margin-top:14px}
.eb{color:var(--gold);font-weight:700;font-size:13px;margin-bottom:12px;display:block}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px}
.card.f{background:var(--green);color:#e7f1ea;border-color:var(--green);transform:translateY(-10px)}
.card.f h3{color:#fff}.card.f .k{color:var(--gold2)}
.k{font-size:12px;font-weight:700;color:var(--gold)}
.card h3{font-size:30px;margin:8px 0 6px}
.card p{font-size:14px;color:var(--muted);margin-bottom:16px}.card.f p{color:#bcd3c5}
.card li{list-style:none;font-size:14px;padding:6px 0 6px 24px;position:relative;border-top:1px solid var(--line)}
.card.f li{border-color:rgba(255,255,255,.14)}
.card li:before{content:"✓";position:absolute;left:0;color:var(--gold)}
.card ul{padding:0}
.srv{background:var(--tint)}
.srv .w{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.panel{background:linear-gradient(150deg,var(--green2),var(--green));border-radius:26px;padding:50px 30px;text-align:center;color:#fff;border:1px solid var(--gold)}
.panel h3{color:#fff;font-size:34px;margin-top:20px}
.panel svg{width:130px;background:#fff;border-radius:26px;padding:14px}
.row{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:40px 1fr;gap:6px}
.row i{font-style:normal;color:var(--gold);font-weight:700}
.row b{color:var(--head)}.row span{display:block;font-size:14px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;counter-reset:s}
.st{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;counter-increment:s}
.st:before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;margin-bottom:14px}
.st b{display:block;color:var(--head)}.st span{font-size:14px;color:var(--muted)}
.cta{padding:0 0 96px}
.ctab{background:linear-gradient(120deg,var(--green2),var(--green));color:#fff;border-radius:26px;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.ctab h2{color:#fff}.ctab p{color:#c9dccf;margin-top:10px}
.btn.wa{background:#25d366;color:#05301a;font-size:16px;padding:16px 30px}
footer{background:var(--foot);color:#bcd0c4;padding:64px 0 28px;font-size:14px}
.fg{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:40px}
footer h4{font:700 22px 'Cormorant Garamond',serif;color:var(--gold2);margin-bottom:14px}
footer a{display:block;padding:4px 0}footer a:hover{color:#fff}
.soc{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.soc a{border:1px solid rgba(231,201,120,.4);border-radius:99px;padding:6px 14px;font-size:13px}
.copy{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
@media(max-width:860px){nav{display:none}.hero .w,.srv .w,.fg{grid-template-columns:1fr}.cards,.steps{grid-template-columns:1fr 1fr}.strip .w{grid-template-columns:1fr}.card.f{transform:none}.kaaba{order:-1;width:200px}.hero .w{min-height:0}}
@media(max-width:560px){.cards,.steps{grid-template-columns:1fr}.ctab{padding:34px 24px}section{padding:64px 0}}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;font-size:20px;color:var(--head);cursor:pointer}
@media(max-width:860px){
.menu-btn{display:block}
nav.open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--bg);padding:18px 22px;border-bottom:1px solid var(--line);gap:14px}
.nav .btn{display:none}
}