@layer legacy {

/* ============================================================
   SIMSIKO — SQUAD PAGE (Cappuccino & Tiger Marketing plans)
   Shares the main site's game-UI design system.
   ============================================================ */
.page-content{
  --bg0:#05090F; --bg1:#0A1526; --bg2:#101F3C; --bg3:#16294D; --line:#22355C;
  --cyan:#37C8F5; --cyan2:#4DD8FF; --orange:#F99E1A; --orange2:#FFB347; --gold:#FFD24A;
  --txt:#FFFFFF; --body:#AFC3E1; --muted:#8FA3C8;
  --fd:'Big Shoulders Display','ArchyEDT','Noto Sans Georgian',sans-serif; --fu:'Rajdhani','Noto Sans Georgian',sans-serif; --fh:'Chakra Petch','Noto Sans Georgian',monospace;
  --glow-cyan:rgba(55,200,245,.45); --glow-orange:rgba(249,158,26,.45);
}
/* ArchyEDT (typeface.ge) - Georgian display font, embedded for single-file portability */
.page-content *,.page-content *::before,.page-content *::after{ box-sizing:border-box; margin:0; padding:0; }
/* bilingual visibility (html.lang-ka / html.lang-en set by head boot script) */
html.lang-en .page-content .i-ka{ display:none !important; }
html.lang-ka .page-content .i-en{ display:none !important; }
/* MS Block glyphs fill the full em — multi-line Georgian collides at line-height:1.
   Inline .i-ka lifts only the lines it sits on. */
.page-content h1 .i-ka,.page-content h2 .i-ka,.page-content h3 .i-ka,.page-content h4 .i-ka{ line-height:1.22; }
.page-content{ scroll-behavior:smooth; overflow-x:clip; }
.page-content{ background:var(--bg1); color:var(--body); font-family:var(--fu); font-size:17px; line-height:1.6;
  overflow-x:clip; -webkit-font-smoothing:antialiased; animation:pagein .5s ease both; }
@keyframes pagein{ from{ opacity:0; } }
.page-content img{ max-width:100%; display:block; }
.page-content a{ color:var(--cyan); text-decoration:none; }
.page-content button{ font-family:inherit; background:none; border:0; color:inherit; cursor:pointer; }
.page-content ::selection{ background:var(--cyan); color:var(--bg0); }
.page-content ::-webkit-scrollbar{ width:10px; } .page-content ::-webkit-scrollbar-track{ background:var(--bg0); }
.page-content ::-webkit-scrollbar-thumb{ background:#2E3A5C; border:2px solid var(--bg0); border-radius:5px; }
.page-content h1,.page-content h2,.page-content h3,.page-content h4{ font-family:var(--fd); color:var(--txt); text-transform:none; line-height:1; font-weight:800; } /* Latin headings typed in caps; uppercase would remap Georgian to mtavruli and lose MS Block */
.page-content .sk{ display:inline-block; transform:skewX(-10deg); }
.page-content :where(a,button):focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* CRT overlay */
.page-content .fx-overlay{ position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); opacity:.55; }
.page-content .fx-overlay::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 58%, rgba(0,0,10,.42) 100%); }

/* topbar */
.page-content .topbar{ position:fixed; top:0; left:0; right:0; z-index:900; height:62px;
  display:flex; align-items:center; gap:28px; padding:0 22px;
  background:rgba(10,21,38,.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.page-content .logo{ display:flex; align-items:center; gap:10px; }
.page-content .top-btns{ margin-left:auto; display:flex; gap:10px; }
.page-content .top-btns a{ font-family:var(--fh); font-size:11px; letter-spacing:.1em; color:var(--body);
  border:1px solid var(--line); padding:6px 14px; transform:skewX(-10deg); transition:all .15s ease; display:inline-block; }
.page-content .top-btns a span{ display:inline-block; transform:skewX(10deg); }
.page-content .top-btns a:hover{ background:var(--cyan); color:var(--bg0); border-color:var(--cyan); box-shadow:0 0 14px var(--glow-cyan); }
.page-content .top-btns a.hot:hover{ background:var(--orange); border-color:var(--orange); box-shadow:0 0 14px var(--glow-orange); }

/* page header */
.page-content .page-head{ padding:150px 6vw 20px; position:relative; }
.page-content .kicker{ font-weight:600; font-size:13px; letter-spacing:.34em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:10px; display:flex; align-items:center; gap:14px; }
.page-content .kicker::after{ content:''; height:1px; width:120px; background:linear-gradient(90deg, var(--cyan), transparent); }
.page-content .page-head h1{ font-size:clamp(44px,7vw,96px); font-weight:900; }
.page-content .page-head .sub{ max-width:720px; margin-top:16px; font-size:16.5px; }
.page-content .page-head .sub b{ color:var(--txt); }

/* sections */
.page-content section{ position:relative; padding:80px 6vw 90px; overflow:hidden; scroll-margin-top:56px; }
.page-content #cappuccino{ --acc:#B26BFF; --acc2:#D8B4FE;
  background:radial-gradient(60% 55% at 80% 15%, rgba(178,107,255,.14), transparent 62%),
             linear-gradient(180deg, #151030, #0E0B22 60%, var(--bg1)); }
.page-content #tiger{ --acc:#FF7A2F; --acc2:#FFB347;
  background:radial-gradient(55% 50% at 16% 18%, rgba(255,122,47,.14), transparent 60%),
             linear-gradient(180deg, #221206, #180D05 60%, var(--bg1)); }
.page-content .sec-ribbon{ margin-bottom:46px; }
.page-content .sec-ribbon .kicker{ color:var(--acc); }
.page-content .sec-ribbon .kicker::after{ background:linear-gradient(90deg, var(--acc), transparent); }
.page-content .sec-ribbon h2{ font-size:clamp(40px,6vw,84px); font-weight:900; }
.page-content .cat-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:5vw; align-items:stretch; }
.page-content #tiger .cat-grid .stage{ order:2; }

/* stage with the real cat */
.page-content .stage{ position:relative; min-height:480px; display:grid; place-items:end center;
  border:1px solid var(--line); background:rgba(5,9,15,.35); overflow:hidden; padding:40px 20px 46px; }
.page-content .stage::before{ content:''; position:absolute; top:-1px; left:-1px; width:26px; height:26px;
  border-top:2px solid var(--acc); border-left:2px solid var(--acc); z-index:3; }
.page-content .stage::after{ content:''; position:absolute; bottom:-1px; right:-1px; width:26px; height:26px;
  border-bottom:2px solid var(--acc); border-right:2px solid var(--acc); z-index:3; }
.page-content .stage .tag{ position:absolute; top:14px; left:16px; font-family:var(--fh); font-size:10px; letter-spacing:.22em;
  color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 45%, transparent); padding:5px 12px; z-index:4; }
.page-content .stage .glow{ position:absolute; bottom:6%; left:50%; translate:-50% 0; width:70%; height:34%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--acc) 30%, transparent), transparent 75%);
  filter:blur(26px); animation:glowbreathe 4s ease-in-out infinite alternate; }
@keyframes glowbreathe{ from{ opacity:.6; } to{ opacity:1; } }
.page-content .stage .floor{ position:absolute; bottom:34px; left:12%; right:12%; height:16px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent 78%); filter:blur(5px); }
.page-content .stage img{ position:relative; z-index:2; max-height:420px; width:auto; }
.page-content #cappuccino .stage img{ animation:capubounce 2.6s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes capubounce{ 0%,100%{ transform:translateY(0) rotate(0); } 30%{ transform:translateY(-14px) rotate(-1.6deg); }
  55%{ transform:translateY(0) rotate(0); } 78%{ transform:translateY(-6px) rotate(1.2deg); } }
.page-content #tiger .stage img{ animation:tigbreathe 5s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes tigbreathe{ 50%{ transform:scale(1.02, .985); } }
.page-content .zzz{ position:absolute; z-index:3; font-family:var(--fd); font-weight:900; color:var(--acc2);
  opacity:0; animation:zzfloat 4.2s linear var(--zd,0s) infinite; top:30%; right:24%; }
@keyframes zzfloat{ 0%{ translate:0 0; opacity:0; scale:.5; } 18%{ opacity:.95; }
  100%{ translate:34px -84px; opacity:0; scale:1.3; } }

/* offer panel */
.page-content .offer{ position:relative; border:1px solid var(--line); padding:30px 32px;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px), rgba(9,18,34,.55);
  display:flex; flex-direction:column; gap:16px; }
.page-content .offer::before{ content:''; position:absolute; top:-1px; right:-1px; width:26px; height:26px;
  border-top:2px solid var(--acc); border-right:2px solid var(--acc); }
.page-content .offer::after{ content:''; position:absolute; bottom:-1px; left:-1px; width:26px; height:26px;
  border-bottom:2px solid var(--acc); border-left:2px solid var(--acc); }
.page-content .tier{ font-family:var(--fh); font-size:11px; letter-spacing:.3em; color:var(--acc); }
.page-content .offer h3{ font-size:34px; letter-spacing:.02em; }
.page-content .tags{ display:flex; gap:8px; flex-wrap:wrap; }
.page-content .tags span{ display:inline-block; transform:skewX(-8deg); border:1px solid var(--line); padding:4px 12px;
  font-family:var(--fh); font-size:10px; letter-spacing:.14em; color:var(--body); }
.page-content .tags span b{ display:inline-block; transform:skewX(8deg); font-weight:600; }
.page-content .tags span.hot{ color:var(--acc); border-color:color-mix(in srgb, var(--acc) 55%, transparent); }
.page-content .bio{ font-size:15px; line-height:1.55; border-left:3px solid var(--acc); padding-left:16px; }
.page-content .bio b{ color:var(--txt); }
/* price */
.page-content .price-block{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; border:1px solid var(--line);
  background:rgba(5,9,15,.5); padding:16px 20px; }
.page-content .price{ font-family:var(--fd); font-weight:900; font-size:clamp(36px,4vw,52px); color:var(--gold);
  line-height:1; letter-spacing:.01em; transform:skewX(-8deg); text-shadow:0 0 26px rgba(255,210,74,.4); }
.page-content .price small{ font-size:.38em; color:var(--muted); letter-spacing:.14em; font-family:var(--fh); font-weight:400; }
.page-content .power-badge{ font-family:var(--fh); font-size:11px; letter-spacing:.18em; color:var(--bg0);
  background:linear-gradient(90deg, var(--gold), #F6E7B9); padding:6px 14px; transform:skewX(-8deg);
  box-shadow:0 0 20px rgba(255,210,74,.4); animation:badgepulse 2.6s ease-in-out infinite; }
@keyframes badgepulse{ 50%{ box-shadow:0 0 30px rgba(255,210,74,.65); } }
/* perks */
.page-content .perks{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.page-content .perks li{ display:flex; gap:12px; align-items:baseline; font-size:15px; color:var(--body);
  border-bottom:1px solid rgba(34,53,92,.5); padding-bottom:9px; }
.page-content .perks li::before{ content:'✦'; color:var(--acc); flex-shrink:0; }
.page-content .perks li b{ color:var(--txt); font-weight:600; }
.page-content .perks li.inherit{ color:var(--acc2); }
.page-content .perks li.inherit::before{ content:'★'; color:var(--gold); }
/* cta */
.page-content .cta-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.page-content .btn{ position:relative; display:inline-block; font-family:var(--fd); font-weight:800; text-transform:none;
  font-size:21px; letter-spacing:.05em; padding:13px 30px; transform:skewX(-8deg);
  border:1.5px solid var(--acc); color:var(--txt); overflow:hidden; transition:all .18s ease; }
.page-content .btn > span{ display:inline-block; transform:skewX(8deg); position:relative; z-index:2; }
.page-content .btn::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--acc), var(--acc2));
  transform:translateX(-101%); transition:transform .18s ease; z-index:1; }
.page-content .btn:hover{ transform:skewX(-8deg) translateY(-3px); color:var(--bg0);
  box-shadow:0 6px 28px color-mix(in srgb, var(--acc) 45%, transparent); }
.page-content .btn:hover::before{ transform:translateX(0); }
.page-content .cta-note{ font-family:var(--fh); font-size:10px; letter-spacing:.12em; color:var(--muted); }

/* tier ladder strip (anchor: expensive first) */
.page-content .ladder{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:26px 6vw 6px; }
.page-content .ladder a{ position:relative; border:1px solid var(--line); padding:16px 18px 14px; display:flex; flex-direction:column; gap:3px;
  background:rgba(9,18,34,.55); transition:all .18s ease; overflow:hidden; }
.page-content .ladder a:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:0 6px 24px rgba(255,210,74,.15); }
.page-content .ladder .ln{ font-family:var(--fd); font-weight:800; font-size:19px; color:var(--txt); letter-spacing:.02em; }
.page-content .ladder .lp{ font-family:var(--fd); font-weight:900; font-size:23px; color:var(--gold); }
.page-content .ladder .ld{ font-size:12.5px; color:var(--muted); line-height:1.4; }
.page-content .ladder a.lk{ opacity:.72; }
.page-content .ladder a.lk:hover{ border-color:var(--red); box-shadow:none; }
.page-content .ladder .lock-pip{ position:absolute; top:10px; right:12px; font-size:13px; }

/* cat chat log (manzai) */
.page-content .chat{ display:flex; flex-direction:column; gap:10px; border:1px solid var(--line);
  background:rgba(5,9,15,.5); padding:15px 17px; }
.page-content .chat .cl{ display:flex; gap:10px; font-size:14.5px; line-height:1.5; color:var(--body); }
.page-content .chat .who{ font-family:var(--fh); font-size:9.5px; letter-spacing:.12em; padding:3px 9px; transform:skewX(-8deg);
  flex-shrink:0; align-self:flex-start; margin-top:3px; white-space:nowrap; }
.page-content .chat .c-capu .who{ color:#D8B4FE; border:1px solid rgba(178,107,255,.5); }
.page-content .chat .c-tiger .who{ color:#FFB347; border:1px solid rgba(255,122,47,.5); }
.page-content .chat .cl b{ color:var(--txt); font-weight:600; }

/* DUO + RAID sections */
.page-content #duo{ --acc:#FFD24A; --acc2:#F6E7B9;
  background:radial-gradient(55% 50% at 50% 12%, rgba(255,210,74,.12), transparent 60%),
             linear-gradient(180deg, #1C1706, #131005 60%, var(--bg1)); }
.page-content #raid{ --acc:#8FA3C8; --acc2:#AFC3E1;
  background:linear-gradient(180deg, #0B1220, #0A0F1B 60%, var(--bg1)); }
.page-content .offer.wide{ max-width:900px; }
.page-content .duo-badges{ display:flex; gap:8px; }
.page-content .duo-badges i{ font-style:normal; font-family:var(--fh); font-size:10px; letter-spacing:.14em; padding:4px 12px; transform:skewX(-8deg); }
.page-content .duo-badges .b-capu{ color:#D8B4FE; border:1px solid rgba(178,107,255,.5); }
.page-content .duo-badges .b-tiger{ color:#FFB347; border:1px solid rgba(255,122,47,.5); }
.page-content #raid .offer{ filter:saturate(.55); }
.page-content #raid .offer:hover{ filter:saturate(.8); }
.page-content .locked-stamp{ position:absolute; top:22px; right:-42px; transform:rotate(35deg); background:var(--red); color:#FFF;
  font-family:var(--fh); font-size:11px; letter-spacing:.3em; padding:6px 52px; z-index:5;
  box-shadow:0 0 22px rgba(255,92,92,.35); }
.page-content .price.range{ font-size:clamp(30px,3.4vw,44px); }

/* side quests (one-off projects) */
.page-content #quests{ --acc:var(--cyan); --acc2:var(--cyan2);
  background:linear-gradient(180deg, var(--bg1), #0A1322 60%, var(--bg1)); }
.page-content .quest-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.page-content .quest{ position:relative; border:1px solid var(--line); background:rgba(9,18,34,.55); padding:18px 20px 16px;
  display:flex; flex-direction:column; gap:5px; transition:all .18s ease; }
.page-content .quest:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.page-content .quest b{ font-family:var(--fd); font-size:19px; font-weight:800; color:var(--txt); letter-spacing:.02em; }
.page-content .quest .qp{ font-family:var(--fd); font-weight:900; font-size:22px; color:var(--gold); }
.page-content .quest .qp small{ font-size:.52em; color:var(--muted); font-family:var(--fh); letter-spacing:.1em; }
.page-content .quest .qd{ font-size:13.5px; color:var(--muted); line-height:1.45; }
.page-content .quest.consult{ border-left:3px solid var(--qa); }
.page-content .quest.q-capu{ --qa:#B26BFF; }
.page-content .quest.q-tiger{ --qa:#FF7A2F; }
.page-content .quest.consult:hover{ border-color:var(--qa); }
.page-content .quest .q-tag{ position:absolute; top:12px; right:14px; font-family:var(--fh); font-size:9px; letter-spacing:.18em; color:var(--qa, var(--cyan)); }
.page-content .quest.combo{ border-color:rgba(88,242,123,.45); border-left:3px solid var(--green); }
.page-content .quest .qp .was{ font-size:.58em; color:var(--muted); text-decoration:line-through; font-family:var(--fd); font-weight:700; }
@media (max-width:1020px){ .page-content .ladder{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .page-content .ladder{ grid-template-columns:1fr; } }

/* compare strip + footer */
.page-content .compare{ text-align:center; padding:30px 6vw 40px; font-family:var(--fh); font-size:12px;
  letter-spacing:.12em; color:var(--muted); }
.page-content .compare b{ color:var(--gold); }
.page-content .site-footer{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 6vw 70px; border-top:1px solid var(--line); font-family:var(--fh); font-size:11px;
  color:var(--muted); letter-spacing:.1em; }
.page-content .site-footer a{ color:var(--cyan); }

/* reveal engine */
.page-content [data-reveal]{ transition:opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); }
.page-content [data-reveal]:not(.in){ opacity:0; transform:translateY(34px); }

@media (max-width:1020px){
  .page-content .cat-grid{ grid-template-columns:1fr; }
  .page-content #tiger .cat-grid .stage{ order:0; }
  .page-content .stage{ min-height:380px; }
  .page-content .stage img{ max-height:320px; }
}
@media (max-width:640px){
  .page-content section{ padding:60px 6vw 66px; }
  .page-content .page-head{ padding-top:120px; }
  .page-content .offer{ padding:22px 18px; }
  /* logo + 3 nowrap buttons overran the bar — the F1 contact CTA lost half its
     width at 320px. "BACK TO BASE" points at index.html, same as the logo, so
     it is the one to drop here. */
  .page-content .topbar{ gap:10px; padding:0 10px; }
  .page-content .top-btns{ gap:6px; min-width:0; }
  .page-content .top-btns a{ padding:6px 9px; }
  .page-content .top-btns a:not(.hot){ display:none; }
  .page-content .top-btns a span{ font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
  .page-content *,.page-content *::before,.page-content *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  .page-content [data-reveal]{ opacity:1; transform:none; }
  .page-content [data-reveal]:not(.in){ opacity:1; transform:none; }
}


.page-content .logo .hex{ width:30px; height:34px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg, var(--cyan), #0E2A4A 70%); position:relative;
  animation:logobreathe 3s ease-in-out infinite; }
.page-content .logo .hex::after{ content:'S'; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--fd); font-weight:900; font-size:18px; color:var(--bg0); }
.page-content .logo .word{ font-family:var(--fd); font-weight:900; font-size:20px; color:#FFFFFF; letter-spacing:.04em; transform:skewX(-10deg); }@keyframes logobreathe{ 0%,100%{ filter:drop-shadow(0 0 5px rgba(55,200,245,.25)) brightness(1.12); } 50%{ filter:drop-shadow(0 0 14px rgba(55,200,245,.45)) brightness(1.12); } }

}