.how-page{
  --bg:#090f1d;
  --bg2:#0d1628;
  --panel:#101c30;
  --panel-2:#12223a;
  --line:rgba(227,236,255,.12);
  --line-strong:rgba(232,185,86,.24);
  --text:#f6f7fb;
  --muted:#a5b4ce;
  --gold:#e8b956;
  --gold2:#f2cf7c;
  --radius:22px;
}
.how-page, .how-page *{box-sizing:border-box}
html{scroll-behavior:smooth}
body[data-page="how-work"]{margin:0;background:var(--bg);color:var(--text);font-family:Cairo,Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
.how-page a{color:inherit;text-decoration:none}
.how-page button,.how-page a{-webkit-tap-highlight-color:transparent}
.how-page :focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.how-page h1,.how-page h2,.how-page h3,.how-page p{margin:0}
.how-page{overflow:hidden}
.how-page .container{width:min(1180px,calc(100% - 64px));margin-inline:auto}

.how-page .hero{
  position:relative;
  padding:108px 0 112px;
  background:
    radial-gradient(ellipse 700px 500px at 12% 44%,rgba(20,44,82,.30),transparent 74%),
    linear-gradient(125deg,#091220 0%,#090f1d 62%);
}
.how-page .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(470px,.95fr);gap:clamp(40px,6vw,100px);align-items:center}
.how-page .eyebrow,.how-page .section-id{font-weight:800;color:var(--gold);font-size:13px;letter-spacing:.2px}
.how-page .eyebrow{display:flex;gap:12px;align-items:center}
.how-page .eyebrow-line{width:30px;height:2px;background:var(--gold)}
.how-page .hero h1{font-size:clamp(52px,5.8vw,92px);line-height:1.18;font-weight:900;letter-spacing:-2.4px;margin:22px 0 20px}
.how-page .hero h1 span,.how-page .section-heading h2 span,.how-page .closing h2 span{color:var(--gold)}
.how-page .hero-copy>p{color:var(--muted);font-size:clamp(15px,1.2vw,18px);line-height:2;max-width:540px}
.how-page .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.how-page .button{display:inline-flex;justify-content:center;align-items:center;gap:24px;min-height:52px;padding:12px 25px;border-radius:12px;font-size:14px;font-weight:800;transition:transform .2s,background .2s,border-color .2s}
.how-page .button:hover{transform:translateY(-3px)}
.how-page .button-gold{background:var(--gold);color:#172033}
.how-page .button-gold:hover{background:var(--gold2)}
.how-page .button-ghost{border:1px solid var(--line);color:#f6f7fb;background:rgba(255,255,255,.01)}
.how-page .button-ghost:hover{border-color:var(--gold)}
.how-page .hero-bottom-line{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line)}

.how-page .hero-showcase{width:100%;max-width:540px;justify-self:start}
.how-page .showcase-panel{
  position:relative;
  min-height:490px;
  border-radius:28px;
  padding:24px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),
    linear-gradient(150deg,#15243a 0%,#0f1a2c 100%);
  border:1px solid rgba(232,185,86,.18);
  box-shadow:0 30px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.how-page .showcase-panel::before{
  content:"";
  position:absolute;
  inset:auto auto 18px 18px;
  width:165px;
  height:165px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,185,86,.16),transparent 68%);
  filter:blur(12px);
  pointer-events:none;
}
.how-page .showcase-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(125deg,transparent 0 58%,rgba(255,255,255,.03) 100%);
  pointer-events:none;
}
.how-page .showcase-top,.how-page .showcase-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}
.how-page .showcase-kicker,.how-page .showcase-count{font-family:Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:2px;color:#9eb0c9}
.how-page .showcase-core{
  position:relative;
  z-index:2;
  min-height:380px;
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.how-page .showcase-rings{
  position:absolute;
  width:278px;
  height:278px;
  border-radius:50%;
  border:1px solid rgba(232,185,86,.34);
  box-shadow:0 0 0 45px rgba(255,255,255,.02), 0 0 0 92px rgba(255,255,255,.015);
}
.how-page .showcase-orbit{
  position:absolute;
  border:1px dashed rgba(205,222,242,.10);
  border-radius:999px;
}
.how-page .orbit-a{width:370px;height:240px;transform:rotate(-10deg)}
.how-page .orbit-b{width:260px;height:330px;transform:rotate(18deg)}
.how-page .showcase-pill{
  position:absolute;
  min-width:132px;
  padding:16px 16px 15px;
  border-radius:20px;
  background:rgba(8,14,25,.58);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(6px);
  box-shadow:0 18px 32px rgba(0,0,0,.18);
}
.how-page .showcase-pill strong{display:block;font-size:25px;font-weight:900;line-height:1.2}
.how-page .showcase-pill small{display:block;color:#9fb0ca;font-size:13px;margin-top:4px}
.how-page .pill-no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:999px;background:rgba(232,185,86,.14);border:1px solid rgba(232,185,86,.3);color:var(--gold);font:800 12px/1 Arial,sans-serif;letter-spacing:1px;margin-bottom:12px}
.how-page .pill-1{top:50px;right:36px}
.how-page .pill-2{left:42px;top:145px}
.how-page .pill-3{right:84px;bottom:42px}
.how-page .showcase-result{
  position:relative;
  z-index:3;
  width:220px;
  height:220px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 45%, rgba(232,185,86,.16), rgba(232,185,86,.04) 58%, transparent 72%);
  border:1px solid rgba(232,185,86,.24);
  text-align:center;
}
.how-page .result-tag{font-size:12px;font-weight:800;color:#d6e0ef;background:rgba(8,14,25,.48);border:1px solid rgba(255,255,255,.06);padding:7px 12px;border-radius:999px;margin-bottom:12px}
.how-page .showcase-result h2{font-size:66px;line-height:1.05;font-weight:900;color:var(--gold);letter-spacing:-2px}
.how-page .showcase-bottom{gap:14px;font-size:12px;font-weight:700;color:#8fa3be;padding-top:10px}
.how-page .bottom-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(232,185,86,.45),transparent)}

.how-page .section{padding:104px 0}
.how-page .section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:44px}
.how-page .section-heading h2{font-size:clamp(35px,4vw,62px);line-height:1.28;letter-spacing:-1px;margin-top:14px;font-weight:900}
.how-page .section-heading>p{font-size:15px;max-width:300px;color:var(--muted);line-height:2;margin-bottom:7px}
.how-page .steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.how-page .step{position:relative;grid-column:span 2;min-height:245px;padding:29px 27px;background:#101b2e;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .25s,transform .25s,background .25s}
.how-page .step:hover{border-color:rgba(232,185,86,.48);transform:translateY(-5px);background:#142139}
.how-page .step-featured{background:linear-gradient(145deg,#1b2940,#121d30);border-color:rgba(232,185,86,.33)}
.how-page .step:nth-child(4),.how-page .step:nth-child(5){grid-column:span 3;min-height:220px}
.how-page .step-no{font-size:14px;font-weight:900;color:var(--gold);letter-spacing:1px}
.how-page .step h3{font-size:clamp(21px,2vw,27px);font-weight:900;line-height:1.5}
.how-page .step p{font-size:13px;line-height:1.9;color:var(--muted);margin-top:8px}
.how-page .step-label{color:var(--gold);font-size:11px;font-weight:800;display:block;margin-bottom:6px}
.how-page .step-icon{position:absolute;left:24px;top:23px;color:#7f91b2;font-size:25px;font-family:Arial,sans-serif}
.how-page .process-note{color:#8190ab;font-size:12px;line-height:1.9;display:flex;align-items:center;gap:12px;margin-top:24px}
.how-page .note-dash{width:28px;height:1px;background:var(--gold);flex-shrink:0}

.how-page .closing{padding-top:5px;padding-bottom:110px}
.how-page .closing-panel{background:linear-gradient(115deg,#17253c,#0d1729);border:1px solid rgba(232,185,86,.22);border-radius:24px;padding:52px 57px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.how-page .closing h2{font-size:clamp(28px,3vw,45px);font-weight:900;margin:13px 0 7px}
.how-page .closing p{color:var(--muted);font-size:14px}
.how-page .closing .button{flex-shrink:0}

@media(max-width:1020px){
  .how-page .hero-grid{grid-template-columns:1fr 1fr;gap:34px}
  .how-page .hero-showcase{max-width:none}
  .how-page .showcase-panel{min-height:440px}
  .how-page .showcase-rings{width:230px;height:230px}
  .how-page .showcase-result{width:188px;height:188px}
  .how-page .showcase-result h2{font-size:55px}
  .how-page .showcase-pill{min-width:118px;padding:14px}
  .how-page .showcase-pill strong{font-size:22px}
  .how-page .steps{grid-template-columns:repeat(2,1fr)}
  .how-page .step,.how-page .step:nth-child(4),.how-page .step:nth-child(5){grid-column:span 1}
  .how-page .step-featured{grid-column:span 2}
  .how-page .closing-panel{padding:37px}
}

@media(max-width:760px){
  .how-page .container{width:min(100% - 36px,520px)}
  .how-page .hero{padding:62px 0 78px}
  .how-page .hero-grid{grid-template-columns:1fr;gap:34px}
  .how-page .hero h1{font-size:clamp(47px,11vw,66px);letter-spacing:-1.5px;margin:18px 0}
  .how-page .hero-copy>p{font-size:14px}
  .how-page .hero-actions{margin-top:26px}
  .how-page .button{min-height:48px;font-size:13px;padding:12px 17px;gap:15px}
  .how-page .hero-showcase{justify-self:stretch}
  .how-page .showcase-panel{min-height:390px;padding:18px}
  .how-page .showcase-core{min-height:300px}
  .how-page .showcase-rings{width:176px;height:176px;box-shadow:0 0 0 28px rgba(255,255,255,.018),0 0 0 58px rgba(255,255,255,.012)}
  .how-page .showcase-result{width:148px;height:148px}
  .how-page .showcase-result h2{font-size:43px}
  .how-page .showcase-pill{min-width:94px;padding:12px;border-radius:16px}
  .how-page .showcase-pill strong{font-size:18px}
  .how-page .showcase-pill small{font-size:11px}
  .how-page .pill-no{min-width:28px;height:28px;margin-bottom:9px}
  .how-page .pill-1{top:22px;right:12px}
  .how-page .pill-2{left:10px;top:116px}
  .how-page .pill-3{right:38px;bottom:18px}
  .how-page .section{padding:70px 0}
  .how-page .section-heading{display:block;margin-bottom:29px}
  .how-page .section-heading h2{font-size:40px}
  .how-page .section-heading>p{margin-top:17px}
  .how-page .steps{grid-template-columns:1fr;gap:12px}
  .how-page .step,.how-page .step:nth-child(4),.how-page .step:nth-child(5),.how-page .step-featured{grid-column:span 1;min-height:175px;padding:24px}
  .how-page .step h3{font-size:24px}
  .how-page .step p{font-size:13px}
  .how-page .closing{padding-top:0;padding-bottom:75px}
  .how-page .closing-panel{padding:32px 25px;align-items:flex-start;flex-direction:column}
  .how-page .closing h2{font-size:31px}
  .how-page .closing .button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .how-page, .how-page *,.how-page *:before,.how-page *:after{transition:none!important;animation:none!important}
}


/* V12 — intentional architectural illustration, no image or overlapped copy */
.how-page .hero{background:radial-gradient(ellipse at 16% 40%,#111e30 0%,#090f1d 58%);padding:106px 0 120px}
.how-page .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(48px,6vw,100px);align-items:center}
.how-page .hero h1{font-size:clamp(49px,5.8vw,88px);line-height:1.19;margin:22px 0;letter-spacing:-2px}
.how-page .hero-architecture{position:relative;max-width:520px;width:100%;min-height:456px;display:flex;flex-direction:column;justify-content:space-between;justify-self:start;border-top:1px solid rgba(232,185,86,.3);border-bottom:1px solid rgba(232,185,86,.15);padding:17px 0 15px;isolation:isolate}
.how-page .hero-architecture:before{position:absolute;content:"";inset:35px 3% 48px 0;background:radial-gradient(ellipse at 50% 60%,rgba(43,64,96,.32),transparent 70%);z-index:-1;pointer-events:none}
.how-page .architecture-label{color:#c0cbe0;display:flex;gap:11px;align-items:center;font-size:13px;font-weight:800}
.how-page .architecture-mark{height:8px;width:8px;border-radius:50%;background:#e8b956;box-shadow:0 0 0 6px rgba(232,185,86,.10)}
.how-page .architecture-art{width:100%;height:auto;display:block;max-height:355px;overflow:visible}
.how-page .architecture-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#9babc4;font-size:13px;font-weight:700}
.how-page .architecture-rule{flex:1;height:1px;background:linear-gradient(to left,rgba(232,185,86,.38),rgba(232,185,86,.04))}
@media(max-width:900px){.how-page .hero-grid{gap:28px}.how-page .hero h1{font-size:clamp(42px,5.7vw,62px)}.how-page .hero-architecture{min-height:375px}.how-page .architecture-art{max-height:300px}}
@media(max-width:760px){.how-page .hero-grid{grid-template-columns:1fr;gap:34px}.how-page .hero-architecture{max-width:none;min-height:320px}.how-page .architecture-art{max-height:270px}.how-page .hero h1{font-size:clamp(46px,10.5vw,65px)}}

/* V13: clean editorial photographic visual */
.how-page .hero{padding:118px 0 126px;background:radial-gradient(ellipse 780px 520px at 18% 46%,#122037 0%,#090f1d 67%)}
.how-page .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(48px,7vw,110px);align-items:center}
.how-page .hero-photo{width:100%;max-width:555px;justify-self:start}
.how-page .photo-frame{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:1.3;background:#101c2c;border:1px solid rgba(232,185,86,.16);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.how-page .photo-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(9,15,29,.28),transparent 65%)}
.how-page .photo-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.88)}
.how-page .photo-detail{display:flex;align-items:center;gap:13px;margin-top:20px;color:#b8c3d7;font-size:12px;font-weight:700}
.how-page .photo-detail-line{height:1px;width:30px;background:var(--gold)}
.how-page .photo-detail-number{margin-right:auto;color:var(--gold);direction:ltr;font:700 12px Arial,sans-serif;letter-spacing:1px}
@media(max-width:900px){.how-page .hero-grid{gap:28px}.how-page .hero{padding:82px 0}.how-page .photo-frame{aspect-ratio:1.05}}
@media(max-width:760px){.how-page .hero-grid{grid-template-columns:1fr;gap:42px}.how-page .photo-frame{aspect-ratio:1.5}.how-page .hero{padding:64px 0 75px}}

/* V14 minimal hero visual: uncluttered and aligned to dark theme */
.how-page .hero{background:#090f1d;padding-block:115px 120px}
.how-page .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(50px,7vw,120px)}
.how-page .photo-frame{aspect-ratio:1.32;border-radius:20px;border:1px solid rgba(255,255,255,.07);background:#0a1220;box-shadow:none}
.how-page .photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.88)}
.how-page .photo-frame::after{background:linear-gradient(90deg,rgba(9,15,29,.2),transparent 45%)}
.how-page .hero-photo{max-width:510px}
@media(max-width:900px){.how-page .hero-grid{gap:34px}.how-page .photo-frame{aspect-ratio:1.03}}
@media(max-width:760px){.how-page .hero-grid{grid-template-columns:1fr}.how-page .hero{padding:64px 0 78px}.how-page .photo-frame{aspect-ratio:1.45}}
/* V15: gently brighten the approved hero photo without changing its content. */
.how-page .hero .photo-frame img{ filter: brightness(1.18) saturate(.94) contrast(1.02); }


/* V16: lighter hero image + fuller section */
.how-page .hero{background:radial-gradient(ellipse 760px 520px at 16% 42%,rgba(29,48,76,.38),transparent 72%),linear-gradient(120deg,#0b1425 0%,#090f1d 62%);padding-block:115px 122px}
.how-page .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(44px,6vw,92px)}
.how-page .hero-copy>p{max-width:560px}
.how-page .hero-photo{max-width:595px}
.how-page .photo-frame{aspect-ratio:1.22;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:#11192a;box-shadow:0 18px 50px rgba(0,0,0,.14)}
.how-page .photo-frame img{filter:brightness(1.04) saturate(.88) contrast(.98);object-position:28% 48%}
.how-page .photo-frame::after{background:linear-gradient(90deg,rgba(9,15,29,.10),transparent 34%)}
.how-page .photo-meta{display:flex;align-items:center;gap:14px;margin-top:20px;color:#9fb0ca;font-size:12px;font-weight:800}
.how-page .photo-meta-line{flex:1;height:1px;min-width:34px;background:linear-gradient(90deg,rgba(232,185,86,.55),rgba(232,185,86,.10))}
@media(max-width:900px){.how-page .hero-grid{gap:30px}.how-page .hero-photo{max-width:none}.how-page .photo-frame{aspect-ratio:1.08}}
@media(max-width:760px){.how-page .hero{padding:64px 0 78px}.how-page .hero-grid{grid-template-columns:1fr;gap:38px}.how-page .photo-frame{aspect-ratio:1.34}.how-page .photo-meta{margin-top:16px}}

/* Page-specific integration: preserve homepage navbar and footer */
body[data-page="how-work"]{background:#09182b;}
body[data-page="how-work"] .how-page{background:#09182b;overflow:clip}
body[data-page="how-work"] .how-page .hero{padding-top:clamp(74px,7vw,112px)}
body[data-page="how-work"] .how-page .hero-photo .photo-frame img{object-position:28% 48%}
body[data-page="how-work"] .how-page section{scroll-margin-top:130px}
@media(max-width:760px){body[data-page="how-work"] .how-page .hero{padding-top:52px}body[data-page="how-work"] .how-page section{scroll-margin-top:105px}}