/* ============================================================================
   OKAMI · DESIGN SYSTEM  ·  okami-patterns.css  ·  v0.3.0
   ----------------------------------------------------------------------------
   Page-level COMPOSITIONS built on top of okami.css primitives & tokens.
   Load AFTER okami.css:
     <link rel="stylesheet" href="okami.css">
     <link rel="stylesheet" href="okami-patterns.css">

   These are bigger, opinionated blocks (the gateway diagram, the maturity
   meter, pricing tiers, the rotating compliance stamp …). They still read only
   from --ok-* tokens, so re-theming with --ok-accent / --ok-glow flows through.
   Each block notes the markup it expects.
   ============================================================================ */

/* ============================================================================
   SERVICES GRID  —  bordered grid of service cells, accent rotates per cell.
   <div class="ok-services">
     <a class="ok-service [magenta|cyan]">
       <div class="ok-s-num"><span>SVC · 01</span><span class="ico">…</span></div>
       <h3>Title</h3><p>Desc</p><span class="ok-more">→ saiba mais</span>
     </a> …
   </div>
   ============================================================================ */
.ok-services{ display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ok-line); border-right: 0; border-bottom: 0; }
.ok-service{ padding: 36px 32px 32px; border-right: 1px solid var(--ok-line); border-bottom: 1px solid var(--ok-line); background: color-mix(in srgb, var(--ok-bg-1) 60%, transparent); position: relative; transition: all var(--ok-mid); color: inherit; text-decoration: none; }
.ok-service:hover{ background: var(--ok-bg-2); }
.ok-s-num{ font-family: var(--ok-mono); font-size: 10px; letter-spacing: .14em; color: var(--ok-fg-mute); margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; transition: color var(--ok-mid); }
.ok-service:hover .ok-s-num{ color: var(--ok-accent); }
.ok-s-num .ico{ width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ok-line); color: var(--ok-accent); box-shadow: 0 0 calc(8px * var(--ok-glow)) -2px color-mix(in oklch, var(--ok-accent) 50%, transparent); }
.ok-s-num .ico svg{ width: 14px; height: 14px; }
.ok-service h3{ font-family: var(--ok-display); font-weight: 500; font-size: 22px; letter-spacing: -.01em; margin: 0 0 12px; }
.ok-service p{ margin: 0; color: var(--ok-fg-soft); font-size: 14px; line-height: 1.55; }
.ok-more{ display: block; margin-top: 24px; font-family: var(--ok-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok-fg-mute); }
.ok-service:hover .ok-more{ color: var(--ok-accent); }
.ok-service.magenta:hover .ok-s-num{ color: var(--ok-magenta); }
.ok-service.magenta .ok-s-num .ico{ color: var(--ok-magenta); border-color: color-mix(in oklch, var(--ok-magenta) 40%, var(--ok-line)); box-shadow: 0 0 calc(8px * var(--ok-glow)) -2px color-mix(in oklch, var(--ok-magenta) 50%, transparent); }
.ok-service.magenta:hover .ok-more{ color: var(--ok-magenta); }
.ok-service.cyan:hover .ok-s-num{ color: var(--ok-cyan); }
.ok-service.cyan .ok-s-num .ico{ color: var(--ok-cyan); border-color: color-mix(in oklch, var(--ok-cyan) 40%, var(--ok-line)); box-shadow: 0 0 calc(8px * var(--ok-glow)) -2px color-mix(in oklch, var(--ok-cyan) 50%, transparent); }
.ok-service.cyan:hover .ok-more{ color: var(--ok-cyan); }
@media (max-width: 900px){ .ok-services{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .ok-services{ grid-template-columns: 1fr; } }

/* ============================================================================
   GATEWAY VIZ  —  absolute-positioned nodes around a glowing core + SVG edges.
   Container holds .ok-gv-head + .ok-gv-stage; place nodes with inline
   left/right/top. Edges are <svg> lines you draw yourself (see DS reference).
   <div class="ok-gateway">
     <div class="ok-gv-head"><span class="ok-gv-dots"><span></span>…</span> label
        <span class="ok-gv-status">● live</span></div>
     <div class="ok-gv-stage">
       <div class="ok-gv-node [magenta|cyan|warn|err]" style="left:16px;top:24px">
         <span class="led"></span>ANTHROPIC · CLAUDE</div> …
       <div class="ok-gv-node core" style="left:50%;top:50%;transform:translate(-50%,-50%)">
         <span class="led"></span>OKAMI.GATEWAY</div>
     </div>
   </div>
   ============================================================================ */
.ok-gateway{ position: relative; height: 480px; background: linear-gradient(180deg, var(--ok-bg-1), var(--ok-bg-0)); border: 1px solid var(--ok-line); font-family: var(--ok-mono); overflow: hidden; }
.ok-gv-head{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ok-line); font-size: 10px; color: var(--ok-fg-mute); letter-spacing: .14em; text-transform: uppercase; }
.ok-gv-status{ margin-left: auto; color: var(--ok-success); }
.ok-gv-dots span{ display: inline-block; width: 8px; height: 8px; border: 1px solid; border-radius: 50%; margin-right: 4px; }
.ok-gv-dots span:nth-child(1){ border-color: var(--ok-orange); }
.ok-gv-dots span:nth-child(2){ border-color: var(--ok-magenta); }
.ok-gv-dots span:nth-child(3){ border-color: var(--ok-cyan); }
.ok-gv-stage{ position: relative; height: calc(100% - 38px); padding: 24px; }
.ok-gv-node{ position: absolute; background: var(--ok-bg-2); border: 1px solid var(--ok-line); padding: 10px 14px; font-size: 11px; color: var(--ok-fg-soft); letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.ok-gv-node .led{ width: 6px; height: 6px; border-radius: 50%; background: var(--ok-success); box-shadow: 0 0 calc(8px * var(--ok-glow)) var(--ok-success); }
.ok-gv-node.magenta{ border-color: color-mix(in oklch, var(--ok-magenta) 35%, var(--ok-line)); }
.ok-gv-node.magenta .led{ background: var(--ok-magenta); box-shadow: 0 0 calc(8px * var(--ok-glow)) var(--ok-magenta); }
.ok-gv-node.cyan{ border-color: color-mix(in oklch, var(--ok-cyan) 35%, var(--ok-line)); }
.ok-gv-node.cyan .led{ background: var(--ok-cyan); box-shadow: 0 0 calc(8px * var(--ok-glow)) var(--ok-cyan); }
.ok-gv-node.warn .led{ background: var(--ok-warning); }
.ok-gv-node.err .led{ background: var(--ok-magenta); }
.ok-gv-node.core{ background: var(--ok-bg-3); border-color: var(--ok-accent); color: var(--ok-fg); box-shadow: 0 0 calc(28px * var(--ok-glow)) -4px var(--ok-accent); }
.ok-gv-node.core .led{ background: var(--ok-accent); box-shadow: 0 0 calc(12px * var(--ok-glow)) var(--ok-accent); }

/* ============================================================================
   MATURITY METER  —  before→after track for a 0–N scale (GAP Analysis).
   <div class="ok-meter">
     <div class="ok-meter-track">                (mark the labels via lang)
       <div class="ok-meter-line"></div>
       <div class="ok-meter-bar to"   style="left:0;width:80%"></div>
       <div class="ok-meter-bar from" style="left:0;width:40%"></div>
       <div class="ok-meter-step now"    style="left:0%"><span class="dot"></span><span class="lvl">0</span><span class="nm">Ad-hoc</span></div>
       <div class="ok-meter-step target" style="left:40%">…</div> …
     </div>
   </div>
   Add class `now` up to the current level, `target` up to the goal level.
   ============================================================================ */
.ok-meter{ padding: 32px; border: 1px solid var(--ok-line); background: var(--ok-bg-1); }
.ok-meter-head{ display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--ok-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok-fg-mute); margin-bottom: 56px; flex-wrap: wrap; }
.ok-meter-track{ position: relative; height: 72px; margin: 0 32px 24px; }
.ok-meter-track::before{ content: "ANTES"; position: absolute; top: -22px; left: 0; font-family: var(--ok-mono); font-size: 9px; letter-spacing: .18em; color: var(--ok-magenta); }
.ok-meter-track::after{ content: "DEPOIS →"; position: absolute; top: -22px; right: 0; font-family: var(--ok-mono); font-size: 9px; letter-spacing: .18em; color: var(--ok-cyan); }
html[lang="en"] .ok-meter-track::before{ content: "BEFORE"; }
html[lang="en"] .ok-meter-track::after{ content: "AFTER →"; }
.ok-meter-line{ position: absolute; left: 0; right: 0; top: 20px; height: 2px; background: var(--ok-bg-3); }
.ok-meter-bar{ position: absolute; top: 20px; height: 2px; transition: all var(--ok-slow); }
.ok-meter-bar.to{ background: linear-gradient(90deg, transparent, var(--ok-cyan)); box-shadow: 0 0 calc(12px * var(--ok-glow)) var(--ok-cyan); }
.ok-meter-bar.from{ background: var(--ok-magenta); box-shadow: 0 0 calc(12px * var(--ok-glow)) var(--ok-magenta); z-index: 2; }
.ok-meter-step{ position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 3; }
.ok-meter-step .dot{ width: 14px; height: 14px; border-radius: 50%; background: var(--ok-bg-0); border: 2px solid var(--ok-fg-dim); margin-top: 13px; transition: all var(--ok-mid); }
.ok-meter-step.now .dot{ border-color: var(--ok-magenta); background: var(--ok-magenta); box-shadow: 0 0 calc(14px * var(--ok-glow)) var(--ok-magenta); }
.ok-meter-step.target:not(.now) .dot{ border-color: var(--ok-cyan); background: var(--ok-bg-0); }
.ok-meter-step .lvl{ font-family: var(--ok-mono); font-size: 13px; color: var(--ok-fg-mute); margin-top: 8px; font-weight: 500; }
.ok-meter-step.now .lvl{ color: var(--ok-magenta); }
.ok-meter-step.target:not(.now) .lvl{ color: var(--ok-cyan); }
.ok-meter-step .nm{ font-family: var(--ok-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-fg-dim); white-space: nowrap; }
.ok-meter-step.now .nm, .ok-meter-step.target:not(.now) .nm{ color: var(--ok-fg-soft); }
.ok-meter-caption{ margin-top: 32px; font-family: var(--ok-mono); font-size: 12px; color: var(--ok-fg-soft); line-height: 1.6; max-width: 720px; padding-top: 20px; border-top: 1px solid var(--ok-line); }
@media (max-width: 700px){ .ok-meter-track{ margin: 0 16px 24px; } .ok-meter-step .nm{ font-size: 8px; } }

/* ============================================================================
   JOURNEY PHASES  —  numbered phase rows (AppSec Journey).
   <div class="ok-phase [cyan|magenta]">
     <div class="ok-phase-num">01</div>
     <div><h4>Discovery</h4><p>…</p></div>
   </div>
   ============================================================================ */
.ok-phase{ display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--ok-line); }
.ok-phase-num{ font-family: var(--ok-display); font-weight: 500; font-size: 32px; color: var(--ok-accent); letter-spacing: -.02em; line-height: 1; padding-top: 4px; }
.ok-phase.cyan .ok-phase-num{ color: var(--ok-cyan); }
.ok-phase.magenta .ok-phase-num{ color: var(--ok-magenta); }
.ok-phase h4{ font-family: var(--ok-display); font-weight: 500; font-size: 20px; letter-spacing: -.01em; margin: 0 0 8px; }
.ok-phase p{ margin: 0; color: var(--ok-fg-soft); font-size: 14px; line-height: 1.55; max-width: 460px; }
/* deliverables checklist (paired with phases) */
.ok-deliverables{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.ok-deliverables li{ font-family: var(--ok-mono); font-size: 12px; color: var(--ok-fg-soft); padding: 7px 0 7px 18px; position: relative; letter-spacing: .02em; line-height: 1.4; }
.ok-deliverables li::before{ content: "→"; position: absolute; left: 0; top: 7px; color: var(--ok-cyan); }
.ok-deliverables li:nth-child(even)::before{ color: var(--ok-magenta); }
@media (max-width: 700px){ .ok-phase{ grid-template-columns: 44px 1fr; gap: 14px; } .ok-phase-num{ font-size: 24px; } .ok-deliverables{ grid-template-columns: 1fr; } }

/* ============================================================================
   PRICING TIERS  —  3 abutting tiers, middle one .featured pops with glow.
   <div class="ok-prices">
     <div class="ok-price"><div class="ok-tier"><span>STARTER</span></div><h3>…</h3>
       <div class="ok-px"><b>Sob consulta</b><small>…</small></div>
       <p class="ok-px-desc">…</p><ul><li>…</li></ul><a class="ok-btn …">…</a></div>
     <div class="ok-price featured">…<span class="ok-tier-bg">POPULAR</span>…</div>
   </div>
   ============================================================================ */
.ok-prices{ display: grid; grid-template-columns: repeat(3, 1fr); }
.ok-price{ border: 1px solid var(--ok-line); margin-left: -1px; background: var(--ok-bg-1); padding: 36px 32px; position: relative; }
.ok-price:first-child{ margin-left: 0; border-left-color: color-mix(in oklch, var(--ok-cyan) 25%, var(--ok-line)); }
.ok-price:last-child{ border-right-color: color-mix(in oklch, var(--ok-magenta) 25%, var(--ok-line)); }
.ok-price.featured{ background: linear-gradient(135deg, color-mix(in oklch, var(--ok-accent) 7%, transparent), transparent 50%), var(--ok-bg-2); border-color: var(--ok-accent); z-index: 2; box-shadow: 0 0 calc(40px * var(--ok-glow)) -8px color-mix(in oklch, var(--ok-accent) 50%, transparent); }
.ok-tier{ font-family: var(--ok-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-fg-mute); display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ok-price.featured .ok-tier{ color: var(--ok-accent); }
.ok-tier-bg{ font-family: var(--ok-mono); font-size: 10px; background: var(--ok-accent); color: var(--ok-bg-0); padding: 3px 8px; letter-spacing: .14em; }
.ok-price h3{ font-family: var(--ok-display); font-weight: 500; font-size: 32px; letter-spacing: -.02em; margin: 0 0 8px; }
.ok-px{ display: flex; flex-direction: column; gap: 4px; margin: 16px 0; }
.ok-px b{ font-family: var(--ok-display); font-weight: 500; font-size: 32px; letter-spacing: -.02em; color: var(--ok-fg); line-height: 1; }
.ok-price.featured .ok-px b{ color: var(--ok-accent); }
.ok-px small{ font-family: var(--ok-mono); font-size: 11px; color: var(--ok-fg-mute); letter-spacing: .06em; }
.ok-px-desc{ color: var(--ok-fg-soft); font-size: 14px; line-height: 1.5; margin: 0 0 24px; min-height: 44px; }
.ok-price ul{ margin: 0 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--ok-line); }
.ok-price li{ font-size: 13px; color: var(--ok-fg-soft); padding: 12px 0 12px 22px; border-bottom: 1px dashed var(--ok-line-soft); position: relative; line-height: 1.45; }
.ok-price li::before{ content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 1px; background: var(--ok-accent); }
@media (max-width: 900px){ .ok-prices{ grid-template-columns: 1fr; } .ok-price{ margin-left: 0; margin-top: -1px; } }

/* ============================================================================
   COMPLIANCE STAMP  —  rotating concentric rings around a central seal.
   <div class="ok-stamp">
     <div class="ring"></div><div class="ring ring-2"></div>
     <div class="ok-stamp-inner"><div class="x">100%</div><div class="y">COMPLIANCE</div><div class="z">LGPD · GDPR</div></div>
   </div>
   ============================================================================ */
.ok-stamp{ aspect-ratio: 1; max-width: 380px; margin: 0 auto; border: 1px solid var(--ok-line); background: radial-gradient(circle at center, color-mix(in oklch, var(--ok-accent) calc(15% * var(--ok-glow)), transparent), transparent 60%), var(--ok-bg-1); position: relative; display: grid; place-items: center; }
.ok-stamp::before, .ok-stamp::after{ content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in oklch, var(--ok-cyan) 25%, var(--ok-line)); }
.ok-stamp::after{ inset: 28px; }
.ok-stamp .ring{ position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--ok-accent); border-right-color: var(--ok-accent); border-radius: 50%; animation: ok-rotr 20s linear infinite; opacity: .6; }
.ok-stamp .ring.ring-2{ inset: 24px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: var(--ok-magenta); border-left-color: var(--ok-magenta); animation: ok-rotr 28s linear infinite reverse; opacity: .5; }
@keyframes ok-rotr{ to{ transform: rotate(360deg); } }
.ok-stamp-inner{ position: relative; z-index: 2; text-align: center; font-family: var(--ok-mono); }
.ok-stamp-inner .x{ font-family: var(--ok-display); font-weight: 600; font-size: 48px; letter-spacing: -.03em; line-height: 1; background: linear-gradient(180deg, var(--ok-fg), color-mix(in oklch, var(--ok-fg) 70%, var(--ok-accent))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ok-stamp-inner .y{ font-size: 11px; color: var(--ok-accent); letter-spacing: .18em; margin-top: 8px; text-transform: uppercase; }
.ok-stamp-inner .z{ font-size: 10px; color: var(--ok-fg-mute); letter-spacing: .14em; margin-top: 4px; }

/* ============================================================================
   STACK CARDS  —  4-up tech-stack columns, each with a colored top edge.
   <div class="ok-stack"><div class="ok-stack-card [cyan|magenta]">
     <div class="ok-stack-h">// label</div><h4>Title</h4><ul><li>…</li></ul>
   </div> …</div>
   ============================================================================ */
.ok-stack{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ok-stack-card{ border: 1px solid var(--ok-line); padding: 24px 20px; background: var(--ok-bg-1); transition: all var(--ok-mid); }
.ok-stack-card:hover{ border-color: var(--ok-cyan); background: var(--ok-bg-2); }
.ok-stack-card:nth-child(1){ border-top: 2px solid var(--ok-accent); }
.ok-stack-card:nth-child(2){ border-top: 2px solid var(--ok-cyan); }
.ok-stack-card:nth-child(3){ border-top: 2px solid var(--ok-magenta); }
.ok-stack-card:nth-child(4){ border-top: 2px solid var(--ok-fg-soft); }
.ok-stack-h{ font-family: var(--ok-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-accent); margin-bottom: 14px; }
.ok-stack-card.cyan .ok-stack-h{ color: var(--ok-cyan); }
.ok-stack-card.magenta .ok-stack-h{ color: var(--ok-magenta); }
.ok-stack-card h4{ font-family: var(--ok-display); font-weight: 500; font-size: 17px; margin: 0 0 12px; }
.ok-stack-card ul{ margin: 0; padding: 0; list-style: none; }
.ok-stack-card li{ font-family: var(--ok-mono); font-size: 11px; color: var(--ok-fg-soft); padding: 5px 0; border-top: 1px dashed var(--ok-line-soft); }
.ok-stack-card li:first-child{ border-top: 0; }
@media (max-width: 900px){ .ok-stack{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .ok-stack{ grid-template-columns: 1fr; } }

/* ============================================================================
   TIMELINE CHART  —  vertical rail with past / now / future states.
   <ul class="ok-timeline"><li class="ok-tl-item [past|now|future]">
     <span class="ok-tl-dot"></span><span class="ok-tl-date">Q1 2026</span>
     <span class="ok-tl-label">Milestone</span></li> …</ul>
   ============================================================================ */
.ok-timeline{ position: relative; list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; }
.ok-timeline::before{ content: ""; position: absolute; top: 14px; bottom: 14px; left: 8px; width: 1px; background: var(--ok-line); }
.ok-tl-item{ position: relative; display: grid; grid-template-columns: 28px 110px 1fr; gap: 12px; align-items: center; padding: 12px 0; font-family: var(--ok-mono); font-size: 12px; }
.ok-tl-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--ok-bg-3); border: 1px solid var(--ok-line); justify-self: center; position: relative; z-index: 1; }
.ok-tl-item.past .ok-tl-dot{ background: var(--ok-fg-mute); border-color: var(--ok-fg-mute); }
.ok-tl-item.now .ok-tl-dot{ background: var(--ok-cyan); border-color: var(--ok-cyan); box-shadow: 0 0 0 4px color-mix(in oklch, var(--ok-cyan) 25%, transparent); }
.ok-tl-item.future .ok-tl-dot{ background: transparent; border-color: var(--ok-accent); }
.ok-tl-date{ color: var(--ok-fg-mute); letter-spacing: .14em; }
.ok-tl-item.now .ok-tl-date{ color: var(--ok-cyan); }
.ok-tl-label{ color: var(--ok-fg-soft); }
.ok-tl-item.now .ok-tl-label, .ok-tl-item.future .ok-tl-label{ color: var(--ok-fg); }

/* ============================================================================
   RISK LIST  —  ranked items with severity tag (OWASP-style).
   <ul class="ok-risk-list"><li class="sev-high">
     <span class="id">A01</span><span class="nm">Broken Access Control</span>
     <span class="sev">HIGH</span></li> …</ul>
   ============================================================================ */
.ok-risk-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ok-risk-list li{ display: grid; grid-template-columns: 56px 1fr 60px; gap: 12px; align-items: center; padding: 10px 4px; font-family: var(--ok-mono); font-size: 12px; border-bottom: 1px solid var(--ok-line-soft); }
.ok-risk-list li:last-child{ border-bottom: none; }
.ok-risk-list .id{ color: var(--ok-fg); letter-spacing: .08em; font-weight: 500; }
.ok-risk-list .nm{ color: var(--ok-fg-soft); }
.ok-risk-list .sev{ text-align: right; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; justify-self: end; border: 1px solid currentColor; }
.ok-risk-list .sev-high .sev, .ok-risk-list li.sev-high .id{ color: var(--ok-accent); }
.ok-risk-list .sev-medium .sev{ color: var(--ok-magenta); }

/* ============================================================================
   CTA PANEL  —  bordered call-to-action block with bracket corners + glow wash.
   <div class="ok-cta"><h3>…</h3><p>…</p><div class="ok-cta-actions">…</div></div>
   ============================================================================ */
.ok-cta{ position: relative; overflow: hidden; border: 1px solid var(--ok-line); border-radius: var(--ok-r-3); padding: 56px; background: radial-gradient(800px 280px at 80% 20%, color-mix(in oklch, var(--ok-accent) calc(10% * var(--ok-glow)), transparent), transparent 60%), radial-gradient(700px 260px at 10% 80%, color-mix(in oklch, var(--ok-cyan) calc(8% * var(--ok-glow)), transparent), transparent 60%), var(--ok-bg-1); }
.ok-cta::before, .ok-cta::after{ content: ""; position: absolute; width: 36px; height: 36px; }
.ok-cta::before{ top: 16px; left: 16px; border-top: 1px solid var(--ok-accent); border-left: 1px solid var(--ok-accent); }
.ok-cta::after{ bottom: 16px; right: 16px; border-bottom: 1px solid var(--ok-cyan); border-right: 1px solid var(--ok-cyan); }
.ok-cta h3{ font-family: var(--ok-display); font-weight: 500; font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -.02em; margin: 0 0 16px; max-width: 22ch; }
.ok-cta p{ font-size: 17px; color: var(--ok-fg-soft); max-width: 56ch; margin: 0 0 28px; }
.ok-cta-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 700px){ .ok-cta{ padding: 36px 24px; } }