/* ============================================================
   Fortimark — single-screen bento landing · silver/chrome on black
   Desktop = no scroll. Mobile = stacks & scrolls.
   ============================================================ */

:root{
  --bg:#0a0c10; --bg-2:#0d1016; --surface:#13161e; --surface-2:#191d27;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.16);
  --text:#ffffff; --soft:#dfe3ea; --muted:#9aa1ad;
  --accent:#eef1f5; --ink:#0a0c10;
  --grad:linear-gradient(135deg,#ffffff,#f1f3f6 55%,#cfd5dd);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.45; -webkit-font-smoothing:antialiased; overflow:hidden;
}
h1{ font-family:'Clash Display',sans-serif; font-weight:700; line-height:1.04; letter-spacing:-.02em; }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
b{ color:var(--text); font-weight:600; }
a{ color:inherit; text-decoration:none; }

/* buttons */
.btn{
  --pad:14px 26px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'General Sans'; font-weight:600; font-size:16px; white-space:nowrap; cursor:pointer;
  border-radius:999px; border:1px solid transparent; padding:var(--pad);
  background:var(--grad); color:var(--ink);
  box-shadow:0 10px 30px -12px rgba(205,214,226,.55), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .18s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(205,214,226,.7); }
.btn svg{ transition:transform .2s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--lg{ --pad:16px 30px; font-size:17px; }
.btn--sm{ --pad:9px 18px; font-size:14px; }

/* WhatsApp — on-palette (silver / dark, not green) */
.btn--wa{ background:transparent; color:var(--text); border:1px solid var(--border-2); box-shadow:none; }
.btn--wa:hover{ background:rgba(255,255,255,.06); box-shadow:none; }
.btn--wa svg{ width:17px; height:17px; fill:currentColor; }
.wa-fab{
  position:fixed; right:clamp(16px,2.5vw,28px); bottom:clamp(16px,2.5vw,28px); z-index:130;
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(22,26,35,.85); border:1px solid var(--border-2); backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7); cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s;
  animation:waPop .5s var(--ease) 1.1s both;
}
.wa-fab:hover{ transform:scale(1.07); border-color:rgba(255,255,255,.32); box-shadow:0 18px 40px -10px rgba(0,0,0,.85); }
.wa-fab svg{ width:27px; height:27px; fill:var(--text); }
.wa-fab::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(205,214,226,.22); animation:waRing 2.8s ease-out infinite; }
@keyframes waPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
@keyframes waRing{ 0%{ opacity:.5; transform:scale(1); } 70%,100%{ opacity:0; transform:scale(1.5); } }

/* intro */
.intro{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:var(--bg); transition:opacity .45s var(--ease), visibility .45s; }
.intro.is-done{ opacity:0; visibility:hidden; }
.intro__logo{ display:flex; flex-direction:column; align-items:center; gap:16px;
  opacity:0; transform:translateY(12px) scale(.96); animation:introIn .8s var(--ease) forwards; }
.intro__logo img{ height:clamp(66px,11vw,96px); filter:drop-shadow(0 10px 34px rgba(0,0,0,.55)); }
.intro__word{ font-family:'Clash Display'; font-weight:700; font-size:clamp(19px,4vw,26px); letter-spacing:.2em; padding-left:.2em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes introIn{ 0%{opacity:0;transform:translateY(12px) scale(.96);} 35%{opacity:1;transform:none;} 100%{opacity:1;} }

/* page shell */
.page{ height:100svh; display:flex; flex-direction:column;
  padding:clamp(16px,2.4vh,26px) clamp(18px,3vw,40px); gap:clamp(14px,2vh,22px);
  background:
    radial-gradient(60% 40% at 78% 0%, rgba(205,214,226,.10), transparent 60%),
    radial-gradient(80% 80% at 50% 50%, #11141b 0%, #0a0c10 70%, #07080b 100%); }

/* header */
.head{ flex:none; display:flex; align-items:center; gap:18px; }
.brand{ display:inline-flex; align-items:center; gap:11px; font-family:'Clash Display'; font-weight:700; font-size:20px; letter-spacing:.04em; }
.brand__mark{ height:30px; width:auto; }
.head__meta{ margin-left:auto; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.head .btn--sm{ margin-left:0; }

/* bento grid */
.bento{ flex:1; min-height:0; display:grid; gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(12,1fr); grid-template-rows:1.25fr 1fr 0.92fr;
  grid-template-areas:
    "hero hero hero hero hero hero hero pay  pay  pay  pay  pay"
    "hero hero hero hero hero hero hero deal deal deal deal deal"
    "ask  ask  ask  ask  how  how  how  how  facts facts facts facts"; }

.cell{ position:relative; background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--border); border-radius:18px; padding:clamp(16px,1.8vw,26px); overflow:hidden;
  display:flex; flex-direction:column; min-height:0; }
.cell__label{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }

/* hero */
.hero{ grid-area:hero; justify-content:center; gap:clamp(11px,1.5vh,18px);
  background:linear-gradient(150deg,#161a24,#0c0e14 70%); border-color:var(--border-2); }
.hero__wm{ position:absolute; right:-40px; bottom:-50px; width:min(34%,300px); opacity:.06; filter:grayscale(1); pointer-events:none; }
.eyebrow{ align-self:flex-start; display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--soft);
  padding:6px 14px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.02); }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(205,214,226,.16); }
.hero__title{ font-size:clamp(36px,4.4vw,60px); max-width:15ch; }
.hero__sub{ color:var(--soft); font-size:clamp(16px,1.4vw,19px); max-width:54ch; }
.hero__cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.hero__micro{ font-size:14px; color:var(--muted); }

/* pay */
.pay{ grid-area:pay; justify-content:center; background:linear-gradient(160deg,#1a1f2b,#0e1118); border-color:var(--border-2); }
.pay__amount{ font-family:'Clash Display'; font-weight:700; letter-spacing:-.02em; line-height:1;
  font-size:clamp(46px,5vw,72px); display:flex; align-items:baseline; gap:6px; }
.pay__per{ -webkit-text-fill-color:var(--muted); color:var(--muted); font-size:21px; font-weight:500; }
.pay__note{ margin-top:14px; color:var(--soft); font-size:clamp(15px,1.2vw,18px); }

/* deal */
.deal{ grid-area:deal; }
.deal__list{ list-style:none; display:flex; flex-direction:column; gap:7px; flex:1; justify-content:center; }
.deal__list li{ display:grid; grid-template-columns:104px 1fr; gap:12px; align-items:baseline;
  padding:7px 12px; border-radius:11px; background:rgba(255,255,255,.02); border:1px solid var(--border); }
.deal__list li.is-key{ border-color:var(--border-2); background:rgba(205,214,226,.06); }
.deal__k{ font-family:'General Sans'; font-weight:600; font-size:13px; color:var(--text); }
.deal__v{ font-size:13px; color:var(--soft); line-height:1.35; }

/* ask */
.ask{ grid-area:ask; }
.tick{ list-style:none; display:flex; flex-direction:column; gap:11px; flex:1; justify-content:center; }
.tick li{ position:relative; padding-left:30px; font-size:clamp(16px,1.5vw,20px); font-weight:500; }
.tick li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; background:var(--grad); }
.tick li::after{ content:""; position:absolute; left:6px; top:50%; width:5px; height:9px;
  border-right:2px solid #0a0c10; border-bottom:2px solid #0a0c10; transform:translateY(-65%) rotate(40deg); }

/* how */
.how{ grid-area:how; }
.steps{ list-style:none; display:flex; flex-direction:column; gap:10px; flex:1; justify-content:center; }
.steps li{ display:flex; align-items:center; gap:14px; font-size:clamp(15px,1.25vw,18px); color:var(--soft); }
.steps b{ font-family:'General Sans'; color:var(--accent); font-size:14px; min-width:24px;
  border:1px solid var(--border-2); border-radius:7px; padding:4px 6px; text-align:center; }

/* facts */
.facts{ grid-area:facts; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; align-content:center; flex:1; }
.chips span{ font-size:14px; color:var(--soft); padding:7px 12px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.02); }

/* ===== mobile: stack + scroll ===== */
@media (max-width:880px){
  body{ overflow:auto; }
  .page{ height:auto; min-height:100svh; }
  .bento{ display:flex; flex-direction:column; gap:12px; }
  .head__meta{ display:none; }
  .wa-txt{ display:none; }
  .btn--wa{ --pad:9px 12px; }
  .hero{ padding:24px 20px; }
  .hero__title{ font-size:clamp(30px,8vw,42px); }
  .deal__list li{ grid-template-columns:1fr; gap:3px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.05s !important; }
}