/* ============================================================
   cryptirc.css — standalone landing layer
   Built on the TwistedNET design system (theme.css). Adds the
   header/nav, hero, app mockup, flow, terminal and section
   rhythm that aren't part of the WP block content.
   ============================================================ */

/* ---------- section rhythm ---------- */
.cx-section{padding-block:clamp(3rem, 7vw, var(--wp--preset--spacing--60));}
.cx-section--tight{padding-block:clamp(2.5rem, 5vw, var(--wp--preset--spacing--50));}
.cx-band{background:var(--wp--preset--color--surface);
  border-block:1px solid var(--tn-border);}
.cx-head{max-width:720px;margin-inline:auto;text-align:center;}
.cx-head .tn-eyebrow{display:inline-block;margin-bottom:1rem;}
.cx-sub{color:var(--tn-muted);margin-top:.9rem;font-size:1.06rem;}
.cx-center{text-align:center;}

/* a11y: inline body links keep their underline at rest (theme animates it only on hover),
   so links aren't distinguished by colour alone. Loads after theme.css; same specificity wins. */
.entry-content a:not(.wp-block-button__link):not(.tn-lcard__cta):not(.tn-chan-pill){
  background-size:100% 1px;
}

/* skip link (a11y) */
.cx-skip{position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--tn-gold);color:#fff;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:.85rem;padding:.7em 1.1em;border-radius:0 0 10px 0;text-decoration:none;}
.cx-skip:focus{left:0;}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.cx-header{position:sticky;top:0;z-index:80;
  background:rgba(10,10,11,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--tn-border);}
.cx-bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:66px;}
.cx-brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.28rem;
  color:var(--tn-cream);letter-spacing:-.01em;white-space:nowrap;}
.cx-brand__mark{font-family:'Roboto Mono',ui-monospace,monospace;color:var(--tn-gold);
  font-size:1.5rem;line-height:1;filter:drop-shadow(0 0 10px rgba(225,6,0,.55));}
.cx-brand__by{font-family:'Roboto Mono',ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tn-muted);
  border:1px solid var(--tn-border);border-radius:6px;padding:.2em .5em;margin-left:.15rem;}
.cx-brand:hover .cx-brand__mark{filter:drop-shadow(0 0 16px rgba(225,6,0,.8));}

.cx-nav{display:flex;align-items:center;gap:1.7rem;}
.cx-nav a{font-family:'Roboto Mono',ui-monospace,monospace;font-size:.82rem;
  letter-spacing:.04em;text-decoration:none;color:var(--tn-champagne);
  transition:color .2s ease;position:relative;}
.cx-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--tn-grad);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.cx-nav a:hover{color:var(--tn-cream);}
.cx-nav a:hover::after{transform:scaleX(1);}

.cx-actions{display:flex;align-items:center;gap:.9rem;}
.cx-ghost{font-family:'Roboto Mono',ui-monospace,monospace;font-size:.8rem;
  text-decoration:none;color:var(--tn-champagne);border:1px solid var(--tn-border);
  border-radius:10px;padding:.5em .9em;transition:border-color .2s ease,color .2s ease,background .2s ease;
  white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.cx-ghost:hover{border-color:rgba(255,255,255,.5);color:var(--tn-cream);background:rgba(255,255,255,.04);}
.cx-solid{font-family:'Roboto Mono',ui-monospace,monospace;font-weight:700;font-size:.8rem;
  text-decoration:none;color:#fff;background:var(--tn-gold);border-radius:10px;
  padding:.55em 1.05em;white-space:nowrap;box-shadow:0 10px 30px -12px rgba(225,6,0,.7);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;}
.cx-solid:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(225,6,0,.85);filter:brightness(1.05);}

/* hamburger */
.cx-burger{display:none;background:none;border:1px solid var(--tn-border);border-radius:11px;
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--tn-champagne);
  transition:border-color .2s ease,background .2s ease;}
.cx-burger:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);}
.cx-burger svg{width:22px;height:22px;}

/* mobile overlay */
.cx-mobile{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  align-items:center;justify-content:safe center;gap:.3rem;
  height:100dvh;max-height:100dvh;
  background:radial-gradient(135% 95% at 50% -5%, rgba(18,18,20,1) 0%, rgba(8,8,9,1) 70%);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);
  padding:5rem 1.5rem 2.5rem;overflow-y:auto;}
.cx-mobile.is-open{display:flex;animation:tn-overlay-in .42s cubic-bezier(.22,1,.36,1) both;}
body.cx-locked{overflow:hidden;}
.cx-mobile::before{content:"navigate";position:absolute;top:2rem;left:0;right:0;text-align:center;
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--tn-muted);opacity:.55;}
.cx-mobile a{font-family:'Space Grotesk',sans-serif;font-weight:300;font-size:1.85rem;
  color:rgba(244,244,246,.93);text-decoration:none;padding:.55rem 1.5rem;position:relative;
  transition:letter-spacing .25s ease;}
.cx-mobile a::after{content:"";position:absolute;left:50%;bottom:.25rem;width:0;height:2px;
  border-radius:2px;background:var(--tn-grad);transform:translateX(-50%);transition:width .28s ease;}
.cx-mobile a:hover{letter-spacing:.03em;background-image:var(--tn-grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.cx-mobile a:hover::after{width:36px;}
.cx-mobile__close{position:absolute;top:1.4rem;right:1.4rem;width:46px;height:46px;
  border:1px solid var(--tn-border);border-radius:50%;background:none;color:var(--tn-champagne);
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.cx-mobile__cta{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap;justify-content:center;}

/* ============================================================
   HERO
   ============================================================ */
.cx-hero{padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(2rem,4vw,3rem);
  text-align:center;}
.cx-hero .tn-eyebrow{display:inline-block;}
.cx-hero .tn-eyebrow::after{content:"";display:inline-block;width:.5em;height:1.05em;
  margin-left:.5rem;vertical-align:-2px;background:var(--tn-gold);
  animation:tn-blink 1.15s steps(1) infinite;}
.cx-hero h1{margin:.6rem 0 0;}
.cx-hero__sub{max-width:680px;margin:1rem auto 0;color:var(--tn-muted);font-size:1.18rem;line-height:1.6;}
.cx-hero .wp-block-buttons{margin-top:2rem;justify-content:center;}

/* ---------- app mockup (centerpiece) ---------- */
.cx-app-wrap{margin:clamp(2.5rem,6vw,4rem) auto 0;max-width:880px;position:relative;}
.cx-app-wrap::before{content:"";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:80%;height:70%;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(225,6,0,.22),transparent 70%);filter:blur(18px);}
.cx-app{border:1px solid var(--tn-border);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#141416,#0d0d0f);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
  text-align:left;}
.cx-app__bar{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--tn-border);background:rgba(255,255,255,.02);}
.cx-app__dots{display:flex;gap:.45rem;}
.cx-app__dots i{width:11px;height:11px;border-radius:50%;display:block;}
.cx-app__dots i:nth-child(1){background:#ff5f57;}
.cx-app__dots i:nth-child(2){background:#febc2e;}
.cx-app__dots i:nth-child(3){background:#28c840;}
.cx-app__title{font-family:'Roboto Mono',ui-monospace,monospace;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tn-muted);}
.cx-app__live{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tn-champagne);}
.cx-app__live i{width:8px;height:8px;border-radius:50%;background:#28c840;
  box-shadow:0 0 0 0 rgba(40,200,64,.6);animation:cx-pulse 2s infinite;}
@keyframes cx-pulse{0%{box-shadow:0 0 0 0 rgba(40,200,64,.55);}70%{box-shadow:0 0 0 8px rgba(40,200,64,0);}100%{box-shadow:0 0 0 0 rgba(40,200,64,0);}}
.cx-app__body{display:grid;grid-template-columns:200px 1fr;min-height:330px;}
.cx-app__side{border-right:1px solid var(--tn-border);padding:1rem .8rem;background:rgba(0,0,0,.25);}
.cx-app__side h4{font-family:'Roboto Mono',ui-monospace,monospace;font-weight:400;font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tn-muted);margin:0 0 .7rem;padding-left:.4rem;}
.cx-chan{display:flex;align-items:center;gap:.5rem;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:.86rem;color:var(--tn-champagne);padding:.4rem .55rem;border-radius:8px;margin-bottom:.15rem;}
.cx-chan.is-active{background:rgba(225,6,0,.14);color:#fff;}
.cx-chan .cx-badge{margin-left:auto;font-size:.6rem;background:var(--tn-gold);color:#fff;
  border-radius:999px;padding:.05em .5em;}
.cx-chan.is-muted{color:var(--tn-muted);}
.cx-app__chat{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;}
.cx-app__chanhead{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--tn-cream);
  font-size:1.05rem;margin-bottom:.2rem;}
.cx-msg{font-size:.9rem;line-height:1.5;color:var(--tn-text);}
.cx-msg .cx-nick{font-family:'Roboto Mono',ui-monospace,monospace;font-weight:700;font-size:.82rem;margin-right:.5rem;}
.cx-nick.c1{color:#e6e6ea;} .cx-nick.c2{color:var(--tn-gold);} .cx-nick.c3{color:#7fb7ff;} .cx-nick.c4{color:#7ad08a;}
.cx-msg.cx-sys{color:var(--tn-muted);font-family:'Roboto Mono',ui-monospace,monospace;font-size:.78rem;}
.cx-replay{align-self:flex-start;font-family:'Roboto Mono',ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tn-muted);
  border:1px dashed var(--tn-border);border-radius:7px;padding:.3em .7em;margin:.2rem 0;}
.cx-app__input{margin-top:auto;display:flex;align-items:center;gap:.6rem;
  border:1px solid var(--tn-border);border-radius:10px;padding:.55rem .8rem;background:rgba(255,255,255,.03);}
.cx-app__input .cx-prompt{font-family:'Roboto Mono',ui-monospace,monospace;color:var(--tn-gold);}
.cx-app__input span.cx-type{font-family:'Roboto Mono',ui-monospace,monospace;color:var(--tn-champagne);font-size:.88rem;}
.cx-app__input .cx-caret{width:.5em;height:1.05em;background:var(--tn-gold);display:inline-block;
  animation:tn-blink 1.15s steps(1) infinite;}

/* ---------- app window holding the real screenshot ---------- */
.cx-app__shot{display:block;width:100%;height:auto;}
.cx-app__shot img{display:block;width:100%;height:auto;}

/* ---------- generic screenshot frame ---------- */
.cx-shot{position:relative;border:1px solid var(--tn-border);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  box-shadow:0 40px 90px -45px rgba(0,0,0,.9);}
.cx-shot img{display:block;width:100%;height:auto;}

/* ============================================================
   SECURITY HIGHLIGHT
   ============================================================ */
.cx-bigico{width:64px;height:64px;margin:0 auto 1.2rem;background:var(--tn-grad);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
  filter:drop-shadow(0 0 18px rgba(225,6,0,.5));}
.cx-bigico--lock{--ico:url(assets/icons/lock.svg);}
.cx-bigico--shield{--ico:url(assets/icons/shield.svg);}

/* ============================================================
   APPS / EVERY DEVICE
   ============================================================ */
.cx-apps-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;margin-top:var(--wp--preset--spacing--40);}
.cx-apps-shot{max-width:280px;margin-inline:auto;}
.cx-applist{display:flex;flex-direction:column;}
.cx-approw{display:flex;align-items:center;gap:1rem;padding:.95rem .2rem;border-top:1px solid var(--tn-border);}
.cx-approw:last-child{border-bottom:1px solid var(--tn-border);}
.cx-approw__name{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--tn-cream);
  font-size:1.02rem;min-width:128px;}
.cx-approw__desc{color:var(--tn-muted);font-size:.92rem;flex:1;}
.cx-approw__desc a{color:var(--tn-gold);text-decoration:none;}
.cx-approw__desc a:hover{text-decoration:underline;}
@media (max-width:781px){
  .cx-apps-grid{grid-template-columns:1fr;}
  .cx-approw{flex-direction:column;align-items:flex-start;gap:.2rem;}
  .cx-approw__name{min-width:0;}
}

/* ============================================================
   EXTRAS / capability pills band
   ============================================================ */
.cx-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;max-width:820px;
  margin:var(--wp--preset--spacing--40) auto 0;}
.cx-pills span{font-family:'Roboto Mono',ui-monospace,monospace;font-size:.8rem;letter-spacing:.02em;
  color:var(--tn-champagne);border:1px solid var(--tn-border);border-radius:999px;
  padding:.5em 1em;background:rgba(255,255,255,.04);transition:border-color .2s ease,transform .2s ease;}
.cx-pills span:hover{border-color:rgba(255,255,255,.45);transform:translateY(-2px);}
.cx-pills b{color:var(--tn-gold);font-weight:700;}

/* ============================================================
   FAQ (theme .tn-faq exists; ensure spacing)
   ============================================================ */
.cx-faq-wrap{margin-top:var(--wp--preset--spacing--40);}

/* ============================================================
   FEATURE CARD GRID  (uses theme .tn-card)
   ============================================================ */
.cx-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:var(--wp--preset--spacing--40);}

/* ---------- "always on" guarantee strip ---------- */
.cx-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:var(--wp--preset--spacing--40);}
.cx-stat{text-align:center;padding:1.5rem .8rem;border-radius:16px;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--tn-border);transition:transform .25s ease,border-color .25s ease;}
.cx-stat:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.45);}
.cx-stat b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1;
  font-size:clamp(1.8rem,5vw,2.6rem);background:var(--tn-grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.cx-stat span{display:block;margin-top:.5rem;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tn-muted);}

/* ============================================================
   HOW IT WORKS — 3 step flow
   ============================================================ */
.cx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:var(--wp--preset--spacing--40);
  counter-reset:step;}
.cx-step{position:relative;padding:1.8rem 1.5rem;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--tn-border);}
.cx-step::before{counter-increment:step;content:"0" counter(step);
  font-family:'Roboto Mono',ui-monospace,monospace;font-weight:700;font-size:.9rem;
  color:var(--tn-gold);letter-spacing:.1em;}
.cx-step h3{margin:.7rem 0 .5rem;font-size:1.2rem;color:var(--tn-cream);}
.cx-step p{color:var(--tn-muted);font-size:.95rem;margin:0;}
.cx-step__arrow{position:absolute;right:-1.1rem;top:50%;transform:translateY(-50%);z-index:2;
  color:var(--tn-bronze);font-family:'Roboto Mono',ui-monospace,monospace;}

/* ============================================================
   SELF-HOST TERMINAL
   ============================================================ */
.cx-term{max-width:720px;margin:var(--wp--preset--spacing--40) auto 0;
  border:1px solid var(--tn-border);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#121214,#0c0c0e);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);}
.cx-term__bar{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;
  border-bottom:1px solid var(--tn-border);background:rgba(255,255,255,.02);}
.cx-term__bar i{width:10px;height:10px;border-radius:50%;display:block;}
.cx-term__bar i:nth-child(1){background:#ff5f57;}
.cx-term__bar i:nth-child(2){background:#febc2e;}
.cx-term__bar i:nth-child(3){background:#28c840;}
.cx-term__name{margin-left:.4rem;font-family:'Roboto Mono',ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.08em;color:var(--tn-muted);}
.cx-term__copy{margin-left:auto;font-family:'Roboto Mono',ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tn-champagne);background:rgba(255,255,255,.05);
  border:1px solid var(--tn-border);border-radius:7px;padding:.3em .65em;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;}
.cx-term__copy:hover{border-color:rgba(255,255,255,.5);color:var(--tn-cream);}
.cx-term pre{margin:0;padding:1.2rem 1.3rem;overflow-x:auto;
  font-family:'Roboto Mono',ui-monospace,monospace;font-size:.86rem;line-height:1.8;color:var(--tn-text);}
.cx-term .cx-c{color:var(--tn-muted);}            /* comment */
.cx-term .cx-p{color:var(--tn-gold);}             /* prompt $ */
.cx-term .cx-k{color:#7fb7ff;}                    /* command keyword */

/* ============================================================
   CONNECT DETAIL
   ============================================================ */
.cx-connect{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:var(--wp--preset--spacing--40);}
@media (max-width:781px){.cx-connect{grid-template-columns:1fr;}}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cx-final{text-align:center;}
.cx-final h2{margin-bottom:1rem;}
.cx-final .wp-block-buttons{justify-content:center;margin-top:1.6rem;}

/* ============================================================
   FOOTER (reuses theme .tn-footer / .tn-foot-links / .tn-eyebrow)
   ============================================================ */
.cx-footmark{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.4rem;color:var(--tn-cream);}
.cx-footmark .cx-brand__mark{font-size:1.6rem;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .cx-cards{grid-template-columns:repeat(2,1fr);}
  .cx-strip{grid-template-columns:repeat(2,1fr);}
  .cx-steps{grid-template-columns:1fr;}
  .cx-step__arrow{right:50%;top:auto;bottom:-1.15rem;transform:translateX(50%) rotate(90deg);}
}
@media (max-width:781px){
  .cx-cards{grid-template-columns:1fr;}
  .cx-term__copy{min-height:40px;padding:.5em 1em;}
}
@media (max-width:820px){
  .cx-nav{display:none;}
  .cx-actions .cx-ghost.is-desktop{display:none;}
  .cx-burger{display:flex;}
}
@media (max-width:620px){
  .cx-app__body{grid-template-columns:1fr;}
  .cx-app__side{display:none;}
  .cx-cards{grid-template-columns:1fr;}
  .cx-strip{grid-template-columns:repeat(2,1fr);gap:.7rem;}
  .cx-actions .cx-solid{display:none;}
}
@media (max-width:380px){
  .cx-brand__by{display:none;}
  .cx-bar{gap:.75rem;}
}
@media (max-height:680px){
  .cx-mobile{justify-content:flex-start;}
  .cx-mobile a{font-size:1.4rem;padding:.4rem 1.5rem;}
  .cx-mobile::before{top:1.4rem;}
}
@media (prefers-reduced-motion:reduce){
  .cx-hero .tn-eyebrow::after,.cx-app__input .cx-caret{animation:none!important;}
}