/* ===================================================================
   Aqwa Soft — landing styles
   Ported from the approved design reference (docs/DESIGN_REFERENCE.html).
   Fonts are loaded via Google Fonts (Tajawal) in the layout head.
   =================================================================== */
:root{
  --brand:#11A980; --brand-600:#0E8F6B; --brand-700:#0A7B5F; --brand-800:#096F57;
  --forest:#062A21; --forest-2:#04201A; --ink:#071813;
  --mint:#8FE3C4; --mint-2:#C9F2E1;
  --paper:#F4F7F5; --paper-2:#EAEFEB; --white:#fff;
  --line:#DFE6E1; --line-dk:rgba(143,227,196,.16);
  --tx:#0D2921; --tx-2:#476059; --tx-3:#7B928B;
  --indigo:#4F46E5; --indigo-dk:#312E81;
  --teal:#0E715D; --teal-lt:#238773;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --f:'Tajawal',system-ui,sans-serif;
  --rail:56px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--paper);color:var(--tx);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
svg{display:block}
img{max-width:100%;display:block}
::selection{background:var(--mint);color:var(--forest)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

.wrap{max-width:1220px;margin:0 auto;padding:0 26px}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
[dir=rtl] .mono{letter-spacing:.06em}

.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--brand-700);font-weight:700}
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:currentColor;opacity:.45}
.on-dark .eyebrow{color:var(--mint)}

/* ============ SECTION INDEX RAIL ============ */
.rail{position:fixed;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;
  gap:2px;align-items:center}
[dir=rtl] .rail{right:16px} [dir=ltr] .rail{left:16px}
.rail a{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;font-family:var(--mono);
  font-size:10px;font-weight:600;color:var(--tx-3);transition:.2s;position:relative}
.rail a:hover{color:var(--brand-700);background:#fff;box-shadow:0 4px 14px -8px rgba(6,42,33,.4)}
.rail a.on{color:#fff;background:var(--forest)}
@media(max-width:1200px){.rail{display:none}}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:60;background:rgba(244,247,245,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:.25s}
.nav.stuck{border-color:var(--line);background:rgba(244,247,245,.94)}
.nav-in{display:flex;align-items:center;gap:14px;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mk{width:42px;height:42px;border-radius:12px;flex:none;overflow:hidden}
.brand .nm{line-height:1.15}
.brand .nm b{display:block;font-weight:900;font-size:17px;letter-spacing:-.2px}
.brand .nm span{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--tx-3);font-weight:600}
.nlinks{display:flex;gap:4px;margin-inline-start:auto}
.nlinks a{padding:9px 15px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--tx-2);transition:.18s}
.nlinks a:hover{background:var(--white);color:var(--forest)}
.nav-act{display:flex;align-items:center;gap:9px;margin-inline-start:14px}
.lang{display:flex;align-items:center;gap:7px;height:42px;padding:0 14px;border:1px solid var(--line);
  border-radius:11px;background:var(--white);font-weight:800;font-size:13px;transition:.18s}
.lang:hover{border-color:var(--brand);color:var(--brand-700)}
.lang svg{width:16px;height:16px;stroke-width:2}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;
  border-radius:12px;font-weight:800;font-size:14.5px;transition:.2s;white-space:nowrap}
.btn svg{width:17px;height:17px;stroke-width:2.2}
.btn-p{background:var(--forest);color:var(--white)}
.btn-p:hover{background:var(--brand-800);transform:translateY(-1px);box-shadow:0 14px 26px -14px rgba(6,42,33,.8)}
.btn-o{border:1px solid var(--line);background:var(--white);color:var(--tx)}
.btn-o:hover{border-color:var(--forest);transform:translateY(-1px)}
.on-dark .btn-o{border-color:rgba(255,255,255,.22);background:transparent;color:#fff}
.on-dark .btn-o:hover{background:rgba(255,255,255,.08);border-color:var(--mint)}
.btn-m{background:var(--mint);color:var(--forest)}
.btn-m:hover{background:#fff;transform:translateY(-1px)}
.burger{display:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:#fff;
  place-items:center}
.burger svg{width:20px;height:20px;stroke-width:2}
@media(max-width:940px){.nlinks{display:none}.burger{display:grid}.nav-act .btn-p{display:none}}
.mobmenu{position:fixed;inset:76px 0 auto;background:var(--white);border-bottom:1px solid var(--line);
  padding:14px 26px 22px;z-index:55;display:none;flex-direction:column;gap:2px;box-shadow:0 20px 40px -24px rgba(6,42,33,.4)}
.mobmenu.open{display:flex}
.mobmenu a{padding:13px 12px;border-radius:10px;font-weight:700;font-size:15.5px}
.mobmenu a:hover{background:var(--paper)}

/* ============ HERO ============ */
.hero{position:relative;background:
  radial-gradient(900px 420px at 82% -8%,rgba(17,169,128,.16),transparent 62%),
  linear-gradient(178deg,var(--forest) 0%,var(--forest-2) 100%);
  color:#fff;overflow:hidden;padding:78px 0 92px}
.hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line-dk) 1px,transparent 1px),linear-gradient(90deg,var(--line-dk) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse 82% 68% at 50% 32%,#000 35%,transparent 100%);opacity:.55}
.hero-in{position:relative;display:grid;grid-template-columns:1.03fr .97fr;gap:56px;align-items:center}
.h-copy h1{font-size:clamp(34px,4.4vw,58px);line-height:1.14;font-weight:900;letter-spacing:-1.4px;margin:20px 0 0}
[dir=rtl] .h-copy h1{letter-spacing:-.6px}
.h-copy h1 .em{color:var(--mint);position:relative;white-space:nowrap}
.h-copy h1 .em::after{content:"";position:absolute;inset-inline:0;bottom:.06em;height:.10em;background:rgba(143,227,196,.28);border-radius:2px}
.h-copy p.lead{margin-top:20px;font-size:17.5px;color:#B9CFC7;max-width:52ch;font-weight:500}
.h-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.h-meta{display:flex;gap:0;margin-top:44px;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;flex-wrap:wrap}
.h-meta div{padding-inline-end:34px;margin-inline-end:34px;border-inline-end:1px solid rgba(255,255,255,.12)}
.h-meta div:last-child{border:none;margin:0;padding:0}
.h-meta b{display:block;font-size:24px;font-weight:900;color:#fff;letter-spacing:-.5px}
.h-meta span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:#7FA398;text-transform:uppercase}
[dir=rtl] .h-meta span{letter-spacing:.04em}

/* ---- SIGNATURE: sync console ---- */
.console{background:rgba(255,255,255,.035);border:1px solid rgba(143,227,196,.20);border-radius:20px;
  backdrop-filter:blur(6px);overflow:hidden;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.c-bar{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid rgba(143,227,196,.14);
  background:rgba(0,0,0,.18)}
.c-dots{display:flex;gap:6px}.c-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.c-bar .t{font-family:var(--mono);font-size:11px;color:#87A79C;margin-inline-start:auto;letter-spacing:.1em}
.c-body{padding:20px 18px 16px}
.c-cols{display:grid;grid-template-columns:1fr 46px 1fr;gap:0;align-items:stretch}
.col h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#7FA398;margin-bottom:12px;text-transform:uppercase}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);margin-bottom:8px;
  font-family:var(--mono);font-size:12.5px;color:#D2E4DD;transition:.35s}
.row .v{font-weight:600;letter-spacing:.02em}
.row.mt{border-color:rgba(143,227,196,.45);background:rgba(17,169,128,.14);color:#fff}
.row.mt .v{color:var(--mint)}
.link{display:grid;place-items:center;position:relative}
.link .ln{width:1px;flex:1;background:rgba(143,227,196,.18)}
.link .pulse{width:30px;height:30px;border-radius:50%;border:1px solid rgba(143,227,196,.35);display:grid;place-items:center;
  background:var(--forest)}
.link .pulse::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);
  animation:beat 1.9s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(.75);opacity:.5}50%{transform:scale(1.25);opacity:1}}
.c-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;
  border-top:1px dashed rgba(143,227,196,.20);font-family:var(--mono);font-size:11.5px;color:#87A79C}
.c-foot .ok{color:var(--mint);display:inline-flex;align-items:center;gap:6px;font-weight:600}
.c-foot .ok svg{width:14px;height:14px;stroke-width:2.6}
.c-foot .bal{margin-inline-start:auto;color:#fff;font-weight:600}
@media(max-width:960px){.hero-in{grid-template-columns:1fr;gap:44px}.hero{padding:56px 0 70px}}

/* ============ MARQUEE / capability strip ============ */
.strip{background:var(--forest-2);color:#7FA398;border-top:1px solid rgba(143,227,196,.1);overflow:hidden;padding:15px 0}
.strip-in{display:flex;gap:52px;white-space:nowrap;animation:slide 34s linear infinite;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;width:max-content}
[dir=rtl] .strip-in{animation-direction:reverse}
.strip-in span{display:inline-flex;align-items:center;gap:52px}
.strip-in span::after{content:"—";color:var(--brand);font-size:8px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ SECTION SHELL ============ */
.sec{padding:104px 0;position:relative}
.sec-h{max-width:660px;margin-bottom:52px}
.sec-h h2{font-size:clamp(27px,3.1vw,40px);font-weight:900;letter-spacing:-.9px;line-height:1.2;margin-top:16px}
[dir=rtl] .sec-h h2{letter-spacing:-.3px}
.sec-h p{margin-top:14px;color:var(--tx-2);font-size:16.5px}

/* ============ PROJECTS — app windows ============ */
#projects{background:var(--white);border-block:1px solid var(--line)}
.projects{display:flex;flex-direction:column;gap:34px}
.proj{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper);
  display:grid;grid-template-columns:1.02fr .98fr;transition:.3s}
.proj:hover{box-shadow:0 34px 70px -44px rgba(6,42,33,.5);transform:translateY(-3px)}
.p-info{padding:44px 42px}
.p-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.p-logo{width:60px;height:60px;border-radius:16px;flex:none;overflow:hidden;box-shadow:0 12px 24px -14px rgba(0,0,0,.5)}
.p-tt b{display:block;font-size:23px;font-weight:900;letter-spacing:-.4px;line-height:1.2}
.p-tt .kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3)}
[dir=rtl] .p-tt .kind{letter-spacing:.05em}
.p-info p.d{color:var(--tx-2);font-size:15.8px;max-width:50ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px;background:var(--white);
  border:1px solid var(--line);color:var(--tx-2)}
.p-feats{margin-top:26px;display:grid;gap:11px}
.p-feats li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--tx-2);font-weight:500}
.p-feats svg{width:19px;height:19px;flex:none;margin-top:2px;stroke-width:2.4}
.p-cta{display:flex;align-items:center;gap:14px;margin-top:32px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--tx-3)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(17,169,128,.18)}
.status.soon i{background:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,.16)}
.p-view{position:relative;padding:40px;display:grid;place-items:center;overflow:hidden}
.p-view::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(6,42,33,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(6,42,33,.05) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(circle at 50% 45%,#000 20%,transparent 78%)}
.win{position:relative;width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 60px -34px rgba(6,42,33,.45);overflow:hidden}
.w-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:1px solid var(--line);background:#FBFDFC}
.w-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.w-url{font-family:var(--mono);font-size:10px;color:var(--tx-3);margin-inline-start:auto}
.w-body{padding:16px}
.mini-stat{display:flex;gap:10px}
.ms{flex:1;border:1px solid var(--line);border-radius:11px;padding:11px}
.ms .lb{font-size:10.5px;color:var(--tx-3);font-weight:600}
.ms .vl{font-size:17px;font-weight:900;letter-spacing:-.4px;margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:7px;height:78px;margin-top:14px;padding:0 2px}
.bars i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--indigo),#8B84F0);opacity:.9;
  animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{height:6%}}
.w-rows{margin-top:14px;display:grid;gap:7px}
.w-row{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--tx-2);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px}
.w-row .av{width:22px;height:22px;border-radius:7px;flex:none}
.w-row .pr{margin-inline-start:auto;font-family:var(--mono);font-weight:600;color:var(--tx)}
.led{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.led .side{border:1px solid var(--line);border-radius:11px;padding:11px}
.led h6{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--tx-3);text-transform:uppercase;margin-bottom:9px}
.led .ln{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--tx-2);
  padding:6px 0;border-bottom:1px dashed var(--line)}
.led .ln:last-child{border:none}
.eq{margin-top:13px;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px;border-radius:11px;
  background:rgba(14,113,93,.07);border:1px solid rgba(14,113,93,.18);color:var(--teal);font-weight:800;font-size:12.5px}
.eq svg{width:16px;height:16px;stroke-width:2.6}
@media(max-width:900px){.proj{grid-template-columns:1fr}.p-info{padding:34px 26px}.p-view{padding:30px 26px 40px}}

/* ============ SERVICES ============ */
#services{background:var(--paper)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--white);transition:.25s;position:relative;overflow:hidden}
.svc::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;height:3px;width:0;background:var(--brand);transition:.35s}
.svc:hover{transform:translateY(-3px);box-shadow:0 26px 50px -36px rgba(6,42,33,.5)}
.svc:hover::after{width:100%}
.svc .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--forest);color:var(--mint);margin-bottom:18px}
.svc .ic svg{width:22px;height:22px;stroke-width:2}
.svc h4{font-size:18px;font-weight:800;margin-bottom:8px;letter-spacing:-.2px}
.svc p{color:var(--tx-2);font-size:14.6px}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr}}

/* ============ PROCESS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;background:var(--white)}
.step{padding:34px 28px;border-inline-end:1px solid var(--line);position:relative;transition:.25s}
.step:last-child{border:none}
.step:hover{background:var(--paper)}
.step .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--brand);letter-spacing:.1em}
.step h4{font-size:17.5px;font-weight:800;margin:14px 0 9px;letter-spacing:-.2px}
.step p{font-size:14px;color:var(--tx-2)}
.step::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;height:2px;width:0;background:var(--brand);transition:.35s}
.step:hover::after{width:100%}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-inline-end:none}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}.step:nth-child(3){border-inline-end:1px solid var(--line)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}.step{border-inline-end:none!important;border-bottom:1px solid var(--line)}}

/* ============ ABOUT / VALUES ============ */
#about{background:var(--white);border-block:1px solid var(--line)}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.val{padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--paper);transition:.25s}
.val:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 26px 50px -36px rgba(6,42,33,.55)}
.val .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--forest);color:var(--mint);margin-bottom:18px}
.val .ic svg{width:22px;height:22px;stroke-width:2}
.val h4{font-size:18px;font-weight:800;margin-bottom:8px;letter-spacing:-.2px}
.val p{color:var(--tx-2);font-size:14.6px}
@media(max-width:860px){.vals{grid-template-columns:1fr}}

/* ============ CONTACT ============ */
#contact{background:linear-gradient(178deg,var(--forest),var(--forest-2));color:#fff;position:relative;overflow:hidden}
#contact::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line-dk) 1px,transparent 1px),linear-gradient(90deg,var(--line-dk) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent);opacity:.5}
.ct-in{position:relative;display:grid;grid-template-columns:1fr .86fr;gap:60px;align-items:center}
.ct-in h2{font-size:clamp(28px,3.2vw,42px);font-weight:900;letter-spacing:-.9px;line-height:1.18;margin-top:16px}
[dir=rtl] .ct-in h2{letter-spacing:-.3px}
.ct-in p{color:#B9CFC7;margin-top:14px;font-size:16.5px;max-width:46ch}
.ct-list{display:grid;gap:12px;margin-top:32px}
.ct-list a{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(255,255,255,.12);
  border-radius:14px;background:rgba(255,255,255,.03);transition:.22s}
.ct-list a:hover{border-color:var(--mint);background:rgba(255,255,255,.07)}
.ct-list .ci{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(143,227,196,.12);color:var(--mint);flex:none}
.ct-list .ci svg{width:19px;height:19px;stroke-width:2}
.ct-list .cd b{display:block;font-size:14.5px;font-weight:700}
.ct-list .cd span{font-family:var(--mono);font-size:11.5px;color:#87A79C}
.ct-list .ar{margin-inline-start:auto;color:#87A79C}
.ct-list .ar svg{width:18px;height:18px;stroke-width:2}
[dir=rtl] .ct-list .ar svg{transform:scaleX(-1)}
.form{background:rgba(255,255,255,.04);border:1px solid rgba(143,227,196,.18);border-radius:20px;padding:30px;
  backdrop-filter:blur(6px)}
.form .fg{margin-bottom:15px}
.form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#87A79C;margin-bottom:8px}
.form input,.form textarea,.form select{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.11);
  border-radius:11px;padding:13px 15px;color:#fff;font-family:inherit;font-size:14.5px;transition:.18s}
.form textarea{resize:vertical;min-height:104px}
.form input::placeholder,.form textarea::placeholder{color:#5E7A71}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--mint);background:rgba(0,0,0,.32)}
.form option{background:var(--forest);color:#fff}
.form .btn{width:100%;margin-top:6px}
.note{font-family:var(--mono);font-size:10.5px;color:#5E7A71;margin-top:14px;text-align:center;letter-spacing:.06em}
.form .err{color:#FCA5A5;font-size:12px;font-weight:600;margin-top:6px;font-family:var(--f);letter-spacing:0;text-transform:none}
.flash{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;margin-bottom:18px;
  background:rgba(17,169,128,.16);border:1px solid rgba(143,227,196,.4);color:#fff;font-weight:700;font-size:14px}
.flash svg{width:18px;height:18px;stroke-width:2.6;color:var(--mint);flex:none}
@media(max-width:920px){.ct-in{grid-template-columns:1fr;gap:44px}}

/* ============ FOOTER ============ */
.foot{background:var(--forest-2);color:#87A79C;padding:56px 0 26px;border-top:1px solid rgba(143,227,196,.1)}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.f-top .brand .nm b{color:#fff}
.f-about{margin-top:18px;font-size:14.2px;max-width:38ch;color:#7FA398}
.socials{display:flex;gap:9px;margin-top:22px}
.socials a{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;
  color:#87A79C;transition:.2s}
.socials a:hover{background:var(--mint);color:var(--forest);border-color:var(--mint)}
.socials svg{width:18px;height:18px}
.f-col h5{color:#fff;font-size:13px;font-weight:800;margin-bottom:16px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
[dir=rtl] .f-col h5{letter-spacing:.04em}
.f-col a{display:block;padding:6px 0;font-size:14.2px;transition:.18s}
.f-col a:hover{color:var(--mint)}
.f-bot{display:flex;justify-content:space-between;gap:14px;padding-top:24px;flex-wrap:wrap;font-size:13px}
.f-bot .mono{color:#5E7A71}
@media(max-width:860px){.f-top{grid-template-columns:1fr 1fr}.f-top .f-brand{grid-column:1/-1}}

/* ============ WHATSAPP FAB ============ */
.wa{position:fixed;bottom:26px;z-index:70;display:flex;align-items:center;gap:0}
[dir=rtl] .wa{right:26px} [dir=ltr] .wa{left:26px}
.wa-btn{width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.55);transition:.25s;position:relative}
.wa-btn svg{width:29px;height:29px;fill:#fff}
.wa-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.55);opacity:0}}
.wa-lbl{background:var(--forest);color:#fff;font-size:13.5px;font-weight:700;padding:11px 16px;border-radius:12px;
  white-space:nowrap;box-shadow:0 12px 26px -14px rgba(0,0,0,.7);max-width:0;overflow:hidden;opacity:0;
  transition:.3s;margin-inline-start:0}
.wa:hover .wa-lbl{max-width:220px;opacity:1;margin-inline-start:10px}
.wa:hover .wa-btn{transform:scale(1.06)}
@media(max-width:560px){.wa{bottom:18px}[dir=rtl] .wa{right:18px}[dir=ltr] .wa{left:18px}}

.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

/* ============ SUCCESS MODAL ============ */
.aq-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(6,42,33,.55);backdrop-filter:blur(6px);animation:aqFade .25s ease both}
.aq-modal.aq-hide{animation:aqFade .25s ease reverse forwards}
.aq-modal-card{width:100%;max-width:400px;background:var(--white);border-radius:22px;padding:38px 32px 30px;
  text-align:center;box-shadow:0 40px 90px -40px rgba(6,42,33,.7);animation:aqPop .35s cubic-bezier(.2,.8,.2,1) both}
.aq-modal.aq-hide .aq-modal-card{animation:aqPop .25s ease reverse forwards}
.aq-modal-ic{width:70px;height:70px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;
  background:var(--mint);color:var(--forest);position:relative}
.aq-modal-ic::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--mint);
  opacity:.5;animation:aqRing 1.8s ease-out infinite}
.aq-modal-ic svg{width:34px;height:34px;stroke-width:3}
.aq-modal-card h3{font-size:22px;font-weight:900;color:var(--forest);letter-spacing:-.3px}
.aq-modal-card p{margin-top:10px;font-size:15.5px;color:var(--tx-2);font-weight:500}
.aq-modal-timer{margin:20px 0 18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--tx-3)}
.aq-modal-timer #aqCount{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;
  background:var(--paper-2);color:var(--brand-700);font-weight:700;vertical-align:middle}
.aq-modal-card .btn{width:100%}
@keyframes aqFade{from{opacity:0}to{opacity:1}}
@keyframes aqPop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes aqRing{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.25);opacity:0}}