/* ==========================================================================
   LalinERP — Marketing site design system
   Tokens shared across home, module, AI, security, pricing, demo pages.
   ========================================================================== */
:root{
  --ink:#1A1311; --ink-soft:#5A4F4A; --ink-faint:#8C8079;
  --paper:#FBF8F6; --paper-2:#F4EDE8; --paper-3:#EFE6DF;
  --red:#E53935; --red-deep:#B71C1C; --oxblood:#7A1418;
  --hair:#E9E0DA; --hair-strong:#D9CCC3;
  --night:#16110F; --night-2:#211915; --night-line:rgba(255,255,255,.08);
  --tint:#F6D7D5; --tint-2:#FBEAE9;
  --good:#3ECf8E;
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --maxw:1180px; --r:14px; --r-lg:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:0}
p{margin:0}
code{font-family:var(--mono); font-size:.92em; color:var(--red)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:880px; margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--red); display:inline-flex; align-items:center; gap:9px}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor; display:inline-block}
.eyebrow.center{justify-content:center}
.muted{color:var(--ink-soft)}
.center{text-align:center}

/* buttons ------------------------------------------------------------------ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--body); font-weight:600; font-size:15px; line-height:1; padding:14px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s, box-shadow .2s, color .2s, border-color .2s; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.btn-red{background:var(--red); color:#fff; box-shadow:0 8px 24px -10px rgba(229,57,53,.7)}
.btn-red:hover{background:var(--red-deep); box-shadow:0 12px 30px -10px rgba(183,28,28,.8)}
.btn-ink{background:var(--ink); color:var(--paper)} .btn-ink:hover{background:#000}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--hair-strong)} .btn-ghost:hover{border-color:var(--ink); background:#fff}
.btn-light{background:#fff; color:var(--ink); border-color:var(--hair)}
.btn-lg{padding:17px 28px; font-size:16px}
.btn-sm{padding:10px 16px; font-size:14px}

/* nav ---------------------------------------------------------------------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(251,248,246,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair)}
.nav-in{display:flex; align-items:center; gap:26px; height:68px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.02em}
.brand .mark{width:34px; height:34px; border-radius:9px; background:var(--red); color:#fff; display:grid; place-items:center; font-size:21px; font-weight:800; box-shadow:0 6px 16px -6px rgba(229,57,53,.8)}
.brand b{font-weight:400; color:var(--red)}
.nav-links{display:flex; gap:24px; margin-left:10px}
.nav-links a{font-size:15px; color:var(--ink-soft); font-weight:500; transition:color .15s; position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-24px; height:2px; background:var(--red)}
.has-menu{position:relative}
.menu-pop{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid var(--hair); border-radius:16px; box-shadow:0 30px 60px -30px rgba(26,19,17,.4); padding:14px; width:560px; display:grid; grid-template-columns:1fr 1fr; gap:4px; opacity:0; visibility:hidden; transition:.18s}
.has-menu:hover .menu-pop, .has-menu:focus-within .menu-pop{opacity:1; visibility:visible; transform:translateX(-50%)}
.menu-pop a{display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border-radius:11px; transition:background .15s}
.menu-pop a:hover{background:var(--paper)}
.menu-pop .mi{width:30px; height:30px; flex:0 0 30px; border-radius:8px; background:var(--tint-2); color:var(--red); display:grid; place-items:center}
.menu-pop .mi svg{width:17px; height:17px}
.menu-pop .mt{font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3}
.menu-pop .md{font-size:12px; color:var(--ink-soft); line-height:1.35}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:12px}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; color:var(--ink)}
.mob-only{display:none}

/* sections ----------------------------------------------------------------- */
section{padding:92px 0}
.sec-head{max-width:660px; margin-bottom:46px}
.sec-head.center{margin-left:auto; margin-right:auto}
.sec-head h2{font-size:clamp(30px,3.7vw,46px); margin-top:16px}
.sec-head p{color:var(--ink-soft); font-size:18px; margin-top:16px}

/* hero (home) -------------------------------------------------------------- */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(120% 80% at 70% 0,#000,transparent 70%); mask-image:radial-gradient(120% 80% at 70% 0,#000,transparent 70%)}
.hero-in{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; padding:72px 0 84px}
.hero h1{font-size:clamp(40px,5.4vw,68px); font-weight:800}
.hero h1 .accent{color:var(--red)}
.hero h1 .u{background:linear-gradient(transparent 62%, var(--tint) 62%)}
.hero-sub{font-size:19px; color:var(--ink-soft); margin-top:22px; max-width:31em}
.hero-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.hero-note{display:flex; gap:18px; margin-top:22px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft); font-family:var(--mono)}
.hero-note span{display:inline-flex; align-items:center; gap:7px}
.hero-note .dot{width:7px; height:7px; border-radius:50%; background:var(--red)}

/* page hero (sub pages) ---------------------------------------------------- */
.phero{position:relative; padding:54px 0 0; border-bottom:1px solid var(--hair); overflow:hidden}
.phero .crumb{font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); letter-spacing:.04em; margin-bottom:18px}
.phero .crumb a{color:var(--ink-soft)} .phero .crumb a:hover{color:var(--red)}
.phero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding-bottom:56px}
.phero h1{font-size:clamp(34px,4.6vw,56px); font-weight:800; margin-top:14px}
.phero p{font-size:19px; color:var(--ink-soft); margin-top:18px; max-width:30em}
.phero .mod-ic{width:54px; height:54px; border-radius:14px; background:var(--red); color:#fff; display:grid; place-items:center; margin-bottom:18px; box-shadow:0 12px 28px -12px rgba(229,57,53,.8)}
.phero .mod-ic svg{width:28px; height:28px}

/* signature console -------------------------------------------------------- */
.console{background:var(--night); color:#EDE6E2; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 40px 80px -34px rgba(26,19,17,.6), 0 0 0 1px rgba(255,255,255,.04) inset; font-family:var(--mono)}
.console-bar{display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--night-line); background:var(--night-2)}
.console-bar .lights{display:flex; gap:6px}
.console-bar .lights i{width:11px; height:11px; border-radius:50%; display:block; background:#3a302b}
.console-bar .lights i:first-child{background:var(--red)}
.console-bar .title{font-size:12.5px; letter-spacing:.04em; color:#9a8d86; margin-left:6px}
.console-bar .live{margin-left:auto; font-size:11px; letter-spacing:.14em; color:#8f8079; display:flex; align-items:center; gap:7px}
.console-bar .live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 rgba(62,207,142,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(62,207,142,.55)}70%{box-shadow:0 0 0 7px rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
.console-body{padding:22px; min-height:328px}
.c-prompt{display:flex; gap:10px; align-items:baseline; font-size:14.5px}
.c-prompt .at{color:var(--red); font-weight:600}
.c-query{color:#F2ECE8}
.c-caret{display:inline-block; width:8px; height:17px; background:var(--red); vertical-align:middle; margin-left:2px; animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.c-answer{margin-top:18px; opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s}
.c-answer.show{opacity:1; transform:none}
.c-answer .lead{font-family:var(--body); font-size:14px; color:#cdbfb8; margin-bottom:12px; display:flex; gap:8px}
.c-answer .lead .tag{color:#7CCF9E; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em}
.c-card{background:rgba(255,255,255,.035); border:1px solid var(--night-line); border-radius:12px; padding:15px 16px}
.c-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.06)}
.c-row:last-child{border-bottom:0}
.c-row .k{color:#b6a89f} .c-row .v{font-weight:600; color:#fff}
.c-bars{display:flex; align-items:flex-end; gap:9px; height:96px; padding-top:6px}
.c-bars .bar{flex:1; background:linear-gradient(180deg,var(--red),var(--oxblood)); border-radius:6px 6px 2px 2px; min-height:6px; transition:height .6s cubic-bezier(.2,.7,.2,1)}
.c-bars-x{display:flex; gap:9px; margin-top:8px}
.c-bars-x span{flex:1; text-align:center; font-size:10.5px; color:#8f8079}
.c-tools{margin-top:12px; font-family:var(--mono); font-size:11px; color:#73655e; display:flex; gap:6px; flex-wrap:wrap}
.c-tools b{color:#9a8d86; font-weight:500}

/* ledger stat strip -------------------------------------------------------- */
.ledger{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:#fff}
.ledger-in{display:grid; grid-template-columns:repeat(4,1fr)}
.ledger .cell{padding:30px 24px; border-right:1px solid var(--hair)}
.ledger .cell:last-child{border-right:0}
.ledger .num{font-family:var(--display); font-size:38px; font-weight:800; letter-spacing:-.03em}
.ledger .num .red{color:var(--red)}
.ledger .lbl{font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--ink-soft); margin-top:4px; text-transform:uppercase}

/* connected flow ----------------------------------------------------------- */
.flow{background:var(--paper-2)}
.flow-track{display:flex; align-items:stretch; flex-wrap:wrap}
.flow-node{flex:1; min-width:200px; background:#fff; border:1px solid var(--hair); border-radius:var(--r); padding:22px; position:relative}
.flow-node + .flow-node{margin-left:34px}
.flow-node + .flow-node::before{content:"→"; position:absolute; left:-30px; top:50%; transform:translateY(-50%); color:var(--red); font-size:22px; font-weight:700}
.flow-node .step{font-family:var(--mono); font-size:12px; color:var(--red); letter-spacing:.08em}
.flow-node h4{font-size:19px; margin:10px 0 6px}
.flow-node p{font-size:14.5px; color:var(--ink-soft)}
.flow-node .doc{font-family:var(--mono); font-size:12.5px; color:var(--ink); background:var(--tint-2); border:1px solid var(--tint); display:inline-block; padding:3px 9px; border-radius:7px; margin-top:12px}

/* module cards (home) ------------------------------------------------------ */
.mods{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mod{background:#fff; border:1px solid var(--hair); border-radius:var(--r); padding:24px; transition:transform .18s, box-shadow .18s, border-color .18s; display:flex; flex-direction:column}
.mod:hover{transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(26,19,17,.45); border-color:var(--hair-strong)}
.mod .ic{width:44px; height:44px; border-radius:11px; background:var(--tint-2); color:var(--red); display:grid; place-items:center; margin-bottom:16px}
.mod .ic svg{width:23px; height:23px}
.mod h3{font-size:19px; margin-bottom:9px}
.mod p{font-size:14.5px; color:var(--ink-soft); flex:1}
.mod .more{font-family:var(--mono); font-size:12.5px; color:var(--red); margin-top:16px; display:inline-flex; align-items:center; gap:6px; transition:gap .15s}
.mod:hover .more{gap:11px}

/* screenshot frame (image placeholders) ------------------------------------ */
.shot{margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hair-strong); background:#fff; box-shadow:0 30px 70px -44px rgba(26,19,17,.5)}
.shot-chrome{display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--paper-2); border-bottom:1px solid var(--hair)}
.shot-chrome .dots{display:flex; gap:6px}
.shot-chrome .dots i{width:10px; height:10px; border-radius:50%; background:var(--hair-strong); display:block}
.shot-chrome .dots i:first-child{background:var(--red)}
.shot-url{font-family:var(--mono); font-size:12px; color:var(--ink-faint); background:#fff; border:1px solid var(--hair); border-radius:7px; padding:4px 12px; margin-left:8px; flex:1 1 0; min-width:0; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shot-body{position:relative; background:repeating-linear-gradient(45deg,var(--paper) 0 12px,var(--paper-2) 12px 24px)}
.shot-body img{display:block; width:100%; height:auto}
.shot-ph{aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; color:var(--ink-faint); padding:24px}
.shot-ph.r43{aspect-ratio:4/3}
.shot-ph.r11{aspect-ratio:1/1}
.shot-ph.tall{aspect-ratio:3/4}
.shot-ph .pic{width:48px; height:48px; border-radius:12px; background:#fff; border:1px solid var(--hair-strong); display:grid; place-items:center; color:var(--red)}
.shot-ph .pl-name{font-family:var(--mono); font-size:13px; color:var(--ink); background:#fff; border:1px solid var(--hair-strong); border-radius:8px; padding:5px 11px}
.shot-ph .pl-cap{font-size:13.5px; max-width:30em; color:var(--ink-soft)}
.shot-ph .pl-dim{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase}
figcaption.shot-cap{font-size:13.5px; color:var(--ink-soft); padding:13px 16px; border-top:1px solid var(--hair); background:#fff; font-family:var(--mono)}

/* alternating feature rows (module pages) ---------------------------------- */
.frow{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center}
.frow + .frow{margin-top:90px}
.frow > *{min-width:0}
.frow.flip .frow-text{order:2}
.frow-text .eyebrow{margin-bottom:14px}
.frow-text h3{font-size:clamp(24px,2.8vw,34px)}
.frow-text > p{color:var(--ink-soft); margin-top:14px; font-size:16.5px}
.feat-list{list-style:none; padding:0; margin:22px 0 0}
.feat-list li{display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--hair)}
.feat-list li:last-child{border-bottom:0}
.feat-list .ck{flex:0 0 22px; width:22px; height:22px; border-radius:6px; background:var(--red); color:#fff; display:grid; place-items:center; font-size:13px; margin-top:1px}
.feat-list strong{font-weight:600} .feat-list span{color:var(--ink-soft); font-size:14.5px}

/* capability grid (dense feature lists) ------------------------------------ */
.caps{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
/* 3-up variant (security / trust pages). Collapses responsively — replaces
   inline grid-template overrides that previously broke mobile layout. */
.caps.caps-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.caps.caps-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.caps.caps-3{grid-template-columns:1fr}}
.cap{background:#fff; border:1px solid var(--hair); border-radius:var(--r); padding:24px}
.cap h4{font-size:18px; display:flex; align-items:center; gap:10px}
.cap h4 .ci{width:30px; height:30px; flex:0 0 30px; border-radius:8px; background:var(--tint-2); color:var(--red); display:grid; place-items:center}
.cap h4 .ci svg{width:16px; height:16px}
.cap ul{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px}
.cap li{display:flex; gap:10px; font-size:14.5px; color:var(--ink-soft)}
.cap li::before{content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--red); margin-top:9px}
.cap li b{color:var(--ink); font-weight:600}

/* data chips / tags -------------------------------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.chips .chip{font-family:var(--mono); font-size:12px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--hair); padding:5px 11px; border-radius:7px}
.chips.on-dark .chip{background:rgba(255,255,255,.05); border-color:var(--night-line); color:#cdbfb8}

/* panels ------------------------------------------------------------------- */
.panel{background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg); padding:30px; box-shadow:0 30px 60px -40px rgba(26,19,17,.4)}
.panel.dark{background:var(--night); color:#EDE6E2; border-color:var(--night-line)}

/* dark section ------------------------------------------------------------- */
.dark-sec{background:var(--night); color:#EDE6E2; position:relative; overflow:hidden}
.dark-sec::after{content:""; position:absolute; right:-12%; top:-20%; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(229,57,53,.22),transparent 62%); pointer-events:none}
.dark-sec .eyebrow{color:#F3B6B4}
.dark-sec h2,.dark-sec h3{color:#fff}
.dark-sec .sec-head p{color:#bdaca3}
.dark-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; z-index:1}
/* 2-up variant — collapses to single column on phones */
.dark-grid.dg-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.dark-grid.dg-2{grid-template-columns:1fr}}
.dark-card{background:rgba(255,255,255,.04); border:1px solid var(--night-line); border-radius:var(--r); padding:24px}
.dark-card .n{font-family:var(--mono); font-size:13px; color:#F3B6B4; letter-spacing:.05em}
.dark-card h3{color:#fff; font-size:19px; margin:12px 0 8px}
.dark-card h4{color:#fff}
.dark-card p{font-size:14.5px; color:#bdaca3}
.dark-feats{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; position:relative; z-index:1}
.dark-feats span{font-family:var(--mono); font-size:12.5px; color:#d8cbc3; border:1px solid rgba(255,255,255,.14); padding:7px 13px; border-radius:999px}
.dark-feats span b{color:#F3B6B4; font-weight:500}

/* tool list (AI page) ------------------------------------------------------ */
.tool-block{border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:#fff}
.tool-head{display:flex; align-items:center; gap:13px; padding:18px 22px; background:var(--paper); border-bottom:1px solid var(--hair); cursor:pointer}
.tool-head .ti{width:34px; height:34px; border-radius:9px; background:var(--tint-2); color:var(--red); display:grid; place-items:center}
.tool-head .ti svg{width:18px; height:18px}
.tool-head h4{font-size:17px; flex:1}
.tool-head .cnt{font-family:var(--mono); font-size:12px; color:var(--red); background:var(--tint-2); padding:3px 9px; border-radius:999px}
.tool-body{padding:8px 22px 18px}
.tool-body ul{list-style:none; padding:0; margin:0; columns:2; column-gap:30px}
.tool-body li{font-size:14px; color:var(--ink-soft); padding:7px 0; break-inside:avoid; display:flex; gap:9px}
.tool-body li::before{content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--red); margin-top:8px}
.tool-body li b{color:var(--ink); font-weight:600; font-family:var(--mono); font-size:12.5px}

/* localization chips ------------------------------------------------------- */
.langs{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.langs .lc{display:flex; align-items:center; gap:9px; border:1px solid var(--hair); border-radius:10px; padding:10px 14px; font-size:14px; background:var(--paper)}
.langs .lc b{font-family:var(--mono); font-size:12px; color:var(--red)}

/* pricing ------------------------------------------------------------------ */
.pricing{background:var(--paper-2)}
.toggle{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--hair); border-radius:999px; padding:5px; margin-top:24px}
.toggle button{font-family:var(--body); font-weight:600; font-size:14px; border:0; background:transparent; color:var(--ink-soft); padding:9px 20px; border-radius:999px; cursor:pointer; transition:.18s}
.toggle button.on{background:var(--ink); color:var(--paper)}
.save-tag{font-family:var(--mono); font-size:12px; color:var(--red); margin-left:8px}
.price-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; max-width:920px; margin:34px auto 0; align-items:stretch}
.price-card{background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg); padding:34px; display:flex; flex-direction:column}
.price-card.main{border:1.5px solid var(--red); box-shadow:0 30px 70px -40px rgba(229,57,53,.55); position:relative}
.price-card.main .ribbon{position:absolute; top:-13px; left:34px; background:var(--red); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.1em; padding:5px 12px; border-radius:999px; text-transform:uppercase}
.plan-name{font-family:var(--display); font-size:24px; font-weight:700}
.plan-cur{display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap}
.cur-sel{font-family:var(--mono); font-size:12px; border:1px solid var(--hair); border-radius:8px; padding:5px 8px; background:var(--paper); color:var(--ink)}
.price-now{display:flex; align-items:flex-end; gap:8px; margin:20px 0 4px}
.price-now .amt{font-family:var(--display); font-size:52px; font-weight:800; letter-spacing:-.03em; line-height:1}
.price-now .per{font-family:var(--mono); font-size:14px; color:var(--ink-soft); margin-bottom:7px}
.price-sub{font-size:14px; color:var(--ink-soft); min-height:22px}
.price-card .btn{margin-top:22px; width:100%}
.plan-feats{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px}
.plan-feats li{display:flex; gap:11px; font-size:14.5px; color:var(--ink)}
.plan-feats .ck{color:var(--red); font-weight:700}
.price-aside{background:var(--ink); color:var(--paper); border-radius:var(--r-lg); padding:34px; display:flex; flex-direction:column; justify-content:center}
.price-aside h3{color:#fff; font-size:22px}
.price-aside p{color:#bdaca3; font-size:14.5px; margin-top:12px}
.price-aside .mini{font-family:var(--mono); font-size:12px; color:#8f8079; margin-top:20px; letter-spacing:.04em}

/* FAQ ---------------------------------------------------------------------- */
.faq{max-width:820px; margin:0 auto}
.faq details{border-bottom:1px solid var(--hair); padding:20px 0}
.faq summary{font-family:var(--display); font-weight:600; font-size:19px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--red); font-size:24px; font-weight:400; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--ink-soft); font-size:15.5px; margin-top:13px; max-width:64ch}

/* demo form ---------------------------------------------------------------- */
.demo{background:var(--night); color:#EDE6E2}
.demo-grid{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:start}
.demo .eyebrow{color:#F3B6B4}
.demo h2{color:#fff}
.demo .lead{color:#bdaca3; font-size:18px; margin-top:16px; max-width:30em}
.demo-points{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px}
.demo-points li{display:flex; gap:12px; color:#d8cbc3; font-size:15px}
.demo-points .ck{color:#F3B6B4; font-weight:700}
.form-card{background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:30px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{margin-bottom:15px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:7px}
.field input,.field textarea,.field select{width:100%; font-family:var(--body); font-size:15px; padding:12px 14px; border:1px solid var(--hair-strong); border-radius:10px; background:var(--paper); color:var(--ink); transition:.15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--tint-2); background:#fff}
.field textarea{resize:vertical; min-height:84px}
.form-ok{background:var(--tint-2); border:1px solid var(--tint); color:var(--oxblood); border-radius:12px; padding:16px; font-size:14.5px; display:flex; gap:11px; margin-bottom:18px}

/* CTA band + final --------------------------------------------------------- */
.ctaband{background:var(--paper-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.ctaband-in{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding:44px 0}
.ctaband h3{font-size:clamp(24px,3vw,34px)}
.ctaband p{color:var(--ink-soft); margin-top:8px}
.final{background:var(--red); color:#fff; text-align:center}
.final h2{color:#fff; font-size:clamp(32px,4.4vw,52px); max-width:20ch; margin:0 auto}
.final p{color:rgba(255,255,255,.9); font-size:18px; margin:18px auto 0; max-width:42ch}
.final .hero-cta{justify-content:center; margin-top:30px}
.final .btn-light{box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}

/* footer ------------------------------------------------------------------- */
.foot{background:var(--ink); color:#bdaca3; padding:60px 0 36px}
.foot-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr 1fr; gap:28px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot .brand{color:#fff}
.foot .fdesc{font-size:14px; margin-top:14px; max-width:24em}
.foot h5{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#8f8079; margin:0 0 16px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.foot a{font-size:14.5px; color:#cdbfb8} .foot a:hover{color:#fff}
.foot-bot{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; flex-wrap:wrap; gap:12px}

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

/* responsive --------------------------------------------------------------- */
@media (max-width:980px){
  .hero-in,.phero-grid,.frow,.demo-grid,.founder-grid{grid-template-columns:1fr; gap:38px}
  .frow.flip .frow-text{order:0}
  .mods,.dark-grid,.caps{grid-template-columns:repeat(2,1fr)}
  .ledger-in{grid-template-columns:repeat(2,1fr)}
  .ledger .cell:nth-child(2){border-right:0}
  .ledger .cell:nth-child(1),.ledger .cell:nth-child(2){border-bottom:1px solid var(--hair)}
  .price-wrap{grid-template-columns:1fr}
  .flow-node + .flow-node{margin-left:0; margin-top:34px}
  .flow-node + .flow-node::before{left:50%; top:-30px; transform:translateX(-50%) rotate(90deg)}
  .foot-top{grid-template-columns:1fr 1fr 1fr}
  /* --- mobile navigation --- */
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; margin:0; padding:8px 20px 14px; background:#fff;
    border-bottom:1px solid var(--hair); box-shadow:0 24px 44px -28px rgba(26,19,17,.45);
    max-height:calc(100vh - 68px); overflow:auto}
  .nav-links.open{display:flex}
  .nav-links > a, .nav-links .has-menu > a{padding:13px 2px; font-size:16px; border-bottom:1px solid var(--hair)}
  .nav-links a.active::after{display:none}
  .has-menu{position:static}
  .has-menu .menu-pop{display:none !important}
  .mob-only{display:block}
}
@media (max-width:640px){
  body{font-size:16px}
  .mods,.dark-grid,.caps,.form-row,.foot-top{grid-template-columns:1fr}
  .tool-body ul{columns:1}
  section{padding:64px 0}
  .founder-feats{grid-template-columns:1fr}
  .fc-num{font-size:58px}
  .founder-price .amt{font-size:34px}
  .price-card.feature::after{left:50%; transform:translateX(-50%)}
  /* Keep long Turkish headline words inside the viewport on narrow phones */
  .hero h1{font-size:clamp(31px,8.6vw,40px)}
  .phero h1{font-size:clamp(29px,8vw,40px)}
  .hero h1,.phero h1,.founder h2,.final h2,.sec-head h2{overflow-wrap:break-word; word-break:normal; hyphens:auto}
  /* Allow long-label buttons to wrap instead of overflowing on phones */
  .btn{white-space:normal; line-height:1.25; text-align:center; max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto}
  .reveal,.c-answer{opacity:1; transform:none}
}

/* ==========================================================================
   Trust, modules catalogue, checkout, legal — added components
   ========================================================================== */

/* social-proof logo strip */
.logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px}
.logo-slot{height:48px; min-width:140px; display:flex; align-items:center; justify-content:center; padding:0 22px; border:1px solid var(--hair); border-radius:10px; background:#fff; color:var(--ink-faint); font-family:var(--mono); font-size:12px; letter-spacing:.04em; filter:grayscale(1); opacity:.85; transition:.18s}
.logo-slot:hover{filter:none; opacity:1; border-color:var(--hair-strong)}
.logo-slot img{max-height:30px; width:auto}

/* trust badges */
.badges{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.badge-card{display:flex; gap:13px; align-items:flex-start; padding:20px; border:1px solid var(--hair); border-radius:var(--r); background:#fff}
.badge-card .bi{width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:var(--tint-2); color:var(--red); display:grid; place-items:center}
.badge-card .bi svg{width:20px; height:20px}
.badge-card h4{font-size:15px} .badge-card p{font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.45}

/* onboarding steps (a real sequence → numbering is meaningful) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step}
.step-card{position:relative; background:#fff; border:1px solid var(--hair); border-radius:var(--r); padding:28px 24px}
.step-card::before{counter-increment:step; content:counter(step,decimal-leading-zero); font-family:var(--mono); font-size:13px; color:var(--red); letter-spacing:.1em}
.step-card h4{font-size:19px; margin:12px 0 8px}
.step-card p{font-size:14.5px; color:var(--ink-soft)}
.step-card .arrow{position:absolute; right:-22px; top:50%; transform:translateY(-50%); color:var(--hair-strong); z-index:1}
.step-card:last-child .arrow{display:none}

/* testimonials */
.tcards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tcard{background:#fff; border:1px solid var(--hair); border-radius:var(--r); padding:26px; display:flex; flex-direction:column}
.tcard .quote{font-family:var(--display); font-size:19px; line-height:1.4; letter-spacing:-.01em; flex:1}
.tcard .stars{color:var(--red); letter-spacing:2px; margin-bottom:14px; font-size:14px}
.tcard .who{display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--hair)}
.avatar-slot{width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:var(--tint-2); color:var(--red); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:16px; overflow:hidden}
.avatar-slot img{width:100%; height:100%; object-fit:cover}
.tcard .who .nm{font-weight:600; font-size:14.5px} .tcard .who .rl{font-size:12.5px; color:var(--ink-soft)}

/* big metric trio */
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; background:#fff}
.metric{padding:34px; border-right:1px solid var(--hair); text-align:center}
.metric:last-child{border-right:0}
.metric .mv{font-family:var(--display); font-size:46px; font-weight:800; letter-spacing:-.03em; color:var(--red)}
.metric .ml{font-size:14.5px; color:var(--ink-soft); margin-top:6px}

/* modules catalogue groups */
.cat-group + .cat-group{margin-top:56px}
.cat-head{display:flex; align-items:baseline; gap:16px; padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid var(--hair)}
.cat-head h3{font-size:24px} .cat-head .ct{font-family:var(--mono); font-size:12.5px; color:var(--ink-faint)}

/* checkout */
.sim-banner{background:#FFF6E6; border:1px solid #F2D9A8; color:#8A5A00; border-radius:12px; padding:13px 18px; font-size:14px; display:flex; gap:10px; align-items:center; margin-bottom:26px}
.sim-banner b{font-weight:600}
.checkout-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:start}
.summary{background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg); padding:28px; position:sticky; top:88px}
.summary h3{font-size:20px; margin-bottom:18px}
.sum-row{display:flex; justify-content:space-between; align-items:center; padding:11px 0; font-size:14.5px; border-bottom:1px solid var(--hair)}
.sum-row .k{color:var(--ink-soft)} .sum-row .v{font-weight:600}
.sum-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; margin-top:6px}
.sum-total .k{font-weight:600} .sum-total .v{font-family:var(--display); font-size:30px; font-weight:800; color:var(--red)}
.sum-note{font-size:12.5px; color:var(--ink-soft); margin-top:14px; font-family:var(--mono)}
.seg{display:inline-flex; background:var(--paper); border:1px solid var(--hair); border-radius:999px; padding:4px}
.seg button{border:0; background:transparent; font-family:var(--body); font-weight:600; font-size:13.5px; color:var(--ink-soft); padding:8px 16px; border-radius:999px; cursor:pointer; transition:.15s}
.seg button.on{background:var(--ink); color:var(--paper)}
.card-row{display:grid; grid-template-columns:1fr 110px 110px; gap:12px}
.lock-note{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); margin-top:14px; font-family:var(--mono)}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); margin:6px 0 18px; line-height:1.5}
.consent input{margin-top:3px; accent-color:var(--red); width:17px; height:17px}
.consent a{color:var(--red); text-decoration:underline}
.paid{max-width:560px; margin:0 auto; text-align:center; background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg); padding:48px 36px}
.paid .seal{width:72px; height:72px; border-radius:50%; background:var(--tint-2); color:var(--red); display:grid; place-items:center; margin:0 auto 22px}
.paid .ono{font-family:var(--mono); font-size:13px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--hair); border-radius:8px; padding:8px 14px; display:inline-block; margin:18px 0}

/* legal */
.legal-grid{display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start}
.legal-toc{position:sticky; top:88px; border:1px solid var(--hair); border-radius:var(--r); padding:18px; background:#fff}
.legal-toc h5{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px}
.legal-toc a{display:block; font-size:14px; color:var(--ink-soft); padding:8px 10px; border-radius:8px; transition:.14s}
.legal-toc a:hover{background:var(--paper); color:var(--ink)}
.legal-toc a.on{background:var(--tint-2); color:var(--red); font-weight:600}
.legal-body{max-width:720px}
.legal-body .updated{font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); margin:10px 0 26px}
.legal-body h2{font-size:clamp(28px,3.4vw,40px)}
.legal-body h3{font-size:19px; margin:34px 0 10px}
.legal-body p{color:var(--ink-soft); font-size:15.5px; margin-top:12px}
.legal-body ul{margin:12px 0 0; padding-left:20px; color:var(--ink-soft); font-size:15.5px}
.legal-body li{margin:7px 0}
.legal-body .lead{font-size:17px; color:var(--ink); margin-top:14px}
.legal-note{background:var(--paper-2); border:1px solid var(--hair); border-radius:12px; padding:16px 18px; font-size:13.5px; color:var(--ink-soft); margin-top:24px}

/* cookie banner */
.cookie{position:fixed; left:18px; right:18px; bottom:18px; z-index:80; max-width:560px; margin:0 auto; background:var(--ink); color:#EDE6E2; border-radius:16px; padding:18px 20px; box-shadow:0 24px 60px -20px rgba(0,0,0,.5); display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.cookie p{font-size:13.5px; color:#cdbfb8; flex:1; min-width:200px}
.cookie a{color:#F3B6B4; text-decoration:underline}
.cookie .btn{padding:10px 18px; font-size:13.5px}
.cookie.hide{display:none}

@media (max-width:980px){
  .badges{grid-template-columns:repeat(2,1fr)}
  .steps,.tcards,.metrics{grid-template-columns:1fr}
  .metric{border-right:0; border-bottom:1px solid var(--hair)} .metric:last-child{border-bottom:0}
  .step-card .arrow{display:none}
  .checkout-grid,.legal-grid{grid-template-columns:1fr}
  .summary,.legal-toc{position:static}
}
@media (max-width:640px){
  .badges{grid-template-columns:1fr}
  .card-row{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   Corporate trust pass — trustbar, industries, UI mock, value, assurance
   ========================================================================== */

/* top trust bar (above nav, all pages) */
.trustbar{background:var(--ink); color:#cdbfb8; font-size:12.5px; font-family:var(--mono); letter-spacing:.02em}
.trustbar-in{display:flex; align-items:center; justify-content:center; gap:26px; height:38px; flex-wrap:wrap; overflow:hidden}
.trustbar span{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.trustbar svg{width:14px; height:14px; color:#F3B6B4}
.trustbar .sep{opacity:.3}
@media (max-width:760px){ .trustbar-in span:nth-child(n+5){display:none} }
@media (max-width:560px){ .trustbar-in span:nth-child(n+3){display:none} }

/* industries strip (honest social proof) */
.industries{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.ind{display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 12px; border:1px solid var(--hair); border-radius:var(--r); background:#fff; text-align:center}
.ind .ii{width:40px; height:40px; border-radius:11px; background:var(--tint-2); color:var(--red); display:grid; place-items:center}
.ind .ii svg{width:21px; height:21px}
.ind span{font-size:13.5px; font-weight:600; color:var(--ink)}
@media (max-width:980px){ .industries{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .industries{grid-template-columns:repeat(2,1fr)} }

/* value / why cards */
.value{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.vcard{display:flex; gap:18px; padding:28px; border:1px solid var(--hair); border-radius:var(--r-lg); background:#fff}
.vcard .vi{width:48px; height:48px; flex:0 0 48px; border-radius:13px; background:var(--ink); color:var(--paper); display:grid; place-items:center}
.vcard .vi svg{width:24px; height:24px}
.vcard h3{font-size:20px; margin-bottom:8px}
.vcard p{font-size:15px; color:var(--ink-soft); line-height:1.55}
@media (max-width:760px){ .value{grid-template-columns:1fr} }

/* assurance band (support / SLA / compliance) */
.assure{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--night-line)}
.acard{padding:30px 26px; background:rgba(255,255,255,.03); border-right:1px solid var(--night-line)}
.acard:last-child{border-right:0}
.acard .ai{width:40px; height:40px; border-radius:11px; background:rgba(229,57,53,.16); color:#F3B6B4; display:grid; place-items:center; margin-bottom:16px}
.acard .ai svg{width:21px; height:21px}
.acard h4{color:#fff; font-size:17px}
.acard p{color:#bdaca3; font-size:13.5px; margin-top:8px; line-height:1.5}
@media (max-width:860px){ .assure{grid-template-columns:repeat(2,1fr)} .acard:nth-child(2){border-right:0} .acard:nth-child(1),.acard:nth-child(2){border-bottom:1px solid var(--night-line)} }
@media (max-width:480px){ .assure{grid-template-columns:1fr} .acard{border-right:0; border-bottom:1px solid var(--night-line)} }

/* in-app dashboard mock (so the page never looks empty) */
.uimock{display:grid; grid-template-columns:188px 1fr; background:var(--paper); height:430px; font-family:var(--body)}
.um-side{background:#fff; border-right:1px solid var(--hair); padding:16px 12px; display:flex; flex-direction:column; gap:3px}
.um-brand{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:15px; padding:6px 8px 14px}
.um-brand .m{width:24px; height:24px; border-radius:6px; background:var(--red); color:#fff; display:grid; place-items:center; font-size:14px; font-weight:800}
.um-nav{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:13px; color:var(--ink-soft); font-weight:500}
.um-nav svg{width:16px; height:16px; opacity:.7}
.um-nav.on{background:var(--tint-2); color:var(--red)} .um-nav.on svg{opacity:1}
.um-main{display:flex; flex-direction:column; min-width:0}
.um-top{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--hair); background:#fff}
.um-search{flex:1; max-width:260px; height:30px; border:1px solid var(--hair); border-radius:8px; background:var(--paper); display:flex; align-items:center; gap:8px; padding:0 10px; font-size:12px; color:var(--ink-faint)}
.um-search svg{width:14px; height:14px}
.um-top .av{width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; margin-left:auto}
.um-body{padding:18px; overflow:hidden}
.um-h{font-family:var(--display); font-weight:700; font-size:17px; margin-bottom:14px}
.um-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px}
.um-kpi{background:#fff; border:1px solid var(--hair); border-radius:11px; padding:14px}
.um-kpi .l{font-size:11px; color:var(--ink-faint); font-family:var(--mono); letter-spacing:.03em}
.um-kpi .v{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.02em; margin-top:6px}
.um-kpi .d{font-size:11px; margin-top:3px; font-weight:600}
.um-kpi .d.up{color:#1F9D5B} .um-kpi .d.dn{color:var(--red)}
.um-lower{display:grid; grid-template-columns:1.4fr 1fr; gap:12px}
.um-card{background:#fff; border:1px solid var(--hair); border-radius:11px; padding:14px}
.um-card .ch{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-soft); margin-bottom:12px; font-weight:600}
.um-bars{display:flex; align-items:flex-end; gap:8px; height:108px}
.um-bars i{flex:1; background:linear-gradient(180deg,var(--red),var(--oxblood)); border-radius:4px 4px 2px 2px; display:block}
.um-row{display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--hair); font-size:12px}
.um-row:last-child{border-bottom:0}
.um-row .dot{width:7px; height:7px; border-radius:50%; background:var(--red); display:inline-block; margin-right:7px}
.um-row .badge{font-size:10px; font-family:var(--mono); padding:2px 7px; border-radius:5px; background:var(--tint-2); color:var(--red)}
@media (max-width:560px){ .uimock{grid-template-columns:1fr; height:auto} .um-side{display:none} .um-kpis{grid-template-columns:1fr} .um-lower{grid-template-columns:1fr} }

/* footer contact block */
.foot-contact{font-size:13.5px; color:#cdbfb8; line-height:1.7; margin-top:14px}
.foot-contact a{color:#cdbfb8} .foot-contact a:hover{color:#fff}
.foot-contact .row{display:flex; gap:9px; margin-top:7px}
.foot-contact svg{width:15px; height:15px; color:#8f8079; flex:0 0 15px; margin-top:3px}

/* =========================================================================
   LANDING — Founder offer, gallery, contracts, pricing (added at launch)
   ========================================================================= */

/* ---- Founder offer ---- */
.founder{padding:84px 0;background:
  radial-gradient(900px 460px at 85% -10%, rgba(229,57,53,.10), transparent 60%),
  var(--night);color:#F3ECE8;position:relative;overflow:hidden}
.founder::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(700px 420px at 80% 0%,#000,transparent 75%);pointer-events:none}
.founder .wrap{position:relative;z-index:1}
.founder-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
/* Responsive collapse declared AFTER the base rule so source order wins
   (the global max-width:980px block above precedes this rule). */
@media (max-width:980px){.founder-grid{grid-template-columns:1fr;gap:38px}}
.founder-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:#F3B6B4;
  border:1px solid rgba(243,182,180,.35);border-radius:999px;padding:7px 15px;background:rgba(229,57,53,.08)}
.founder-badge i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(229,57,53,.6);animation:pulseDot 1.8s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(229,57,53,.55)}70%{box-shadow:0 0 0 9px rgba(229,57,53,0)}100%{box-shadow:0 0 0 0 rgba(229,57,53,0)}}
.founder h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,50px);line-height:1.04;letter-spacing:-.02em;margin:20px 0 16px;color:#fff}
.founder h2 .accent{color:#F3B6B4}
.founder-lead{color:#C9BBB4;font-size:17px;line-height:1.65;max-width:560px}
.founder-feats{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 22px}
@media (max-width:640px){.founder-feats{grid-template-columns:1fr}}
.founder-feats li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#E7DCD6;line-height:1.5}
.founder-feats .ck{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(62,207,142,.14);color:var(--good);margin-top:1px}
.founder-feats strong{color:#fff;font-weight:600}

.founder-card{background:linear-gradient(180deg,#241B17,#1B1411);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);padding:34px 32px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.founder-counter{text-align:center;padding:8px 0 22px;border-bottom:1px solid var(--night-line)}
.fc-num{font-family:var(--display);font-weight:800;font-size:74px;line-height:1;color:#fff;letter-spacing:-.03em}
.fc-num .of{color:#8C8079;font-size:30px;font-weight:600}
.fc-lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#F3B6B4;margin-top:8px}
.seat-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);margin:18px 0 0;overflow:hidden}
.seat-bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--red),#F3B6B4);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.founder-price{display:flex;align-items:flex-end;gap:10px;justify-content:center;margin:24px 0 4px}
.founder-price .amt{font-family:var(--display);font-weight:800;font-size:42px;color:#fff;letter-spacing:-.02em}
.founder-price .per{color:#A99A92;font-size:14px;padding-bottom:8px}
.founder-was{text-align:center;color:#8C8079;font-size:13.5px}
.founder-was s{color:#A99A92}
.founder-card .btn{width:100%;margin-top:20px}
.founder-fine{text-align:center;color:#8C8079;font-size:12px;margin-top:14px;line-height:1.55}
.founder-soldout{text-align:center;color:#F3B6B4;font-weight:600;margin-top:18px}

/* ---- Gallery (image slots the owner fills) ---- */
.gallery{padding:84px 0;background:var(--paper)}
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:34px}
.gal-grid .span2{grid-column:1/-1}
@media(max-width:820px){.gal-grid{grid-template-columns:1fr}}

/* ---- Contracts / transparency strip ---- */
.legalstrip{padding:80px 0;background:var(--paper-2);border-top:1px solid var(--hair)}
.legal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media(max-width:820px){.legal-cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.legal-cards{grid-template-columns:1fr}}
.legal-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r);padding:16px 18px;text-decoration:none;color:var(--ink);transition:.18s}
.legal-card:hover{border-color:var(--hair-strong);transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(26,19,17,.4)}
.legal-card .li{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--tint-2);color:var(--red-deep)}
.legal-card b{display:block;font-size:14.5px;font-weight:600}
.legal-card span{font-size:12.5px;color:var(--ink-faint)}

/* ---- Pricing (Founder + Standard) ---- */
.pricing2{padding:84px 0;background:var(--paper)}
.price-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:38px;align-items:stretch}
@media(max-width:820px){.price-cards{grid-template-columns:1fr}}
.price-card{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:34px 30px;display:flex;flex-direction:column}
.price-card.feature{border:1.5px solid var(--red);box-shadow:0 30px 70px -44px rgba(229,57,53,.55);position:relative}
.price-card.feature::after{content:"Sınırlı kontenjan";position:absolute;top:-12px;left:30px;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.price-card .pc-name{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.price-card .pc-amt{font-family:var(--display);font-weight:800;font-size:46px;letter-spacing:-.02em;margin:14px 0 2px;color:var(--ink)}
.price-card .pc-amt small{font-size:16px;font-weight:600;color:var(--ink-faint)}
.price-card .pc-sub{color:var(--ink-soft);font-size:14px;min-height:40px}
.price-card ul{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:11px}
.price-card li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft);line-height:1.45}
.price-card li .ck{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--tint-2);color:var(--red-deep)}
.price-card .btn{margin-top:auto}
.price-mini{text-align:center;color:var(--ink-faint);font-size:13px;margin-top:24px}