/*
Theme Name: Socionova Technical
Theme URI: https://socionovatechnologies.com
Author: Socionova Technologies
Author URI: https://socionovatechnologies.com
Description: One-page "Technical Minimalism" theme for Socionova — full-stack growth consultancy. Custom scroll-choreographed layout with a native contact form (no plugin required).
Version: 1.3.1
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: socionova-technical
*/



/* ============ TOKENS ============ */
:root{
  --bg:#fcfdfc;
  --ink:#0d0d0d;
  --cyan:#07f1ce;
  --purple:#6507f1;
  --coral:#ff6e5f;
  --tertiary:#e8ede9;
  --border:#0d0d0d26;
  --border-2:#b4b5b4;
  --purple-deep:#5108bd;
  --f-head:'Outfit',sans-serif;
  --f-mono:'Geist Mono',monospace;
  --ease:cubic-bezier(.455,.03,.515,.955);
  --maxw:1700px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-head);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,p,ul,figure{margin:0;}
ul{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
img,canvas,svg{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;}

.head{
  font-family:var(--f-head);
  letter-spacing:-.03em;
  font-weight:600;
  line-height:1.02;
}
.mono{
  font-family:var(--f-mono);
  letter-spacing:0;
  font-size:.8rem;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 3rem;}
@media (max-width:900px){.wrap{padding:0 1.5rem;}}

/* section rhythm */
.sec{padding:8rem 0;position:relative;}
.sec-sm{padding:4rem 0;}
@media (max-width:900px){.sec{padding:5rem 0;} .sec-sm{padding:3rem 0;}}

/* ---------- word split reveal ---------- */
.split .word{
  display:inline-block;
  opacity:0;
  transform:translateY(1em);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 34ms);
}
.split.revealed .word{opacity:1;transform:translateY(0);}

[data-rev]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-rev].revealed{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  .split .word,[data-rev]{transition:none!important;opacity:1!important;transform:none!important;}
  *{animation:none!important;}
}

/* ---------- status tag ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  border-radius:12.5rem;
  background:var(--tertiary);
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tag .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:0 0 auto;}
.tag.on-ink{background:rgba(255,255,255,.08);color:#fff;}
.tag.cyan{background:var(--cyan);color:var(--ink);}

/* ---------- animated text button ---------- */
.roll-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.5rem;
  border-radius:12.5rem;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
}
.roll-btn .roll-wrap{position:relative;overflow:hidden;display:inline-block;height:1.1em;}
.roll-btn .roll-wrap .t-orig,.roll-btn .roll-wrap .t-clone{
  display:block;
  font-family:var(--f-mono);
  font-size:.82rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  transition:transform .5s var(--ease);
  white-space:nowrap;
}
.roll-btn .roll-wrap .t-clone{position:absolute;top:100%;left:0;}
.roll-btn:hover .t-orig{transform:translateY(-100%);}
.roll-btn:hover .t-clone{transform:translateY(-100%);}
.roll-btn .arrow-wrap{
  width:1.6rem;height:1.6rem;
  border-radius:50%;
  background:var(--cyan);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  transition:transform .5s var(--ease);
}
.roll-btn:hover .arrow-wrap{transform:rotate(45deg);}
.roll-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--border);}
.roll-btn.ghost .arrow-wrap{background:var(--ink);}
.roll-btn.ghost .arrow-wrap svg{stroke:#fff;}
.roll-btn.on-purple{background:var(--purple);}
.roll-btn.on-purple .arrow-wrap{background:#fff;}

/* ============ NAV ============ */
.nav-outer{
  position:fixed;
  top:1.25rem;left:50%;
  transform:translateX(-50%);
  z-index:300;
  width:min(660px, calc(100vw - 2rem));
  transition:width .4s var(--ease);
}
.nav-pill{
  background:#fff;
  border-radius:2.6rem;
  box-shadow:0 1px 2px rgba(13,13,13,.04), 0 12px 30px -12px rgba(13,13,13,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.55rem .6rem .55rem 1.1rem;
  gap:1rem;
}
.nav-burger{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  background:var(--tertiary);
}
.nav-burger .lines{width:14px;height:10px;position:relative;}
.nav-burger .lines span{
  position:absolute;left:0;width:100%;height:1.4px;background:var(--ink);
  transition:transform .35s var(--ease), opacity .35s var(--ease), top .35s var(--ease);
}
.nav-burger .lines span:nth-child(1){top:0;}
.nav-burger .lines span:nth-child(2){top:50%;}
.nav-burger .lines span:nth-child(3){top:100%;}
.nav-open .nav-burger .lines span:nth-child(1){top:50%;transform:rotate(45deg);}
.nav-open .nav-burger .lines span:nth-child(2){opacity:0;}
.nav-open .nav-burger .lines span:nth-child(3){top:50%;transform:rotate(-45deg);}

.nav-logo{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);
  font-size:.82rem;
  letter-spacing:.01em;
}
.nav-logo img{width:22px;height:22px;object-fit:cover;border-radius:4px;}
.nav-logo b{font-weight:600;}
.nav-logo b span{color:var(--purple);}

.nav-cta{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  background:var(--ink);
  color:#fff;
  padding:.6rem 1.2rem;
  border-radius:2rem;
}

/* nav overlay */
.nav-overlay{
  position:fixed;inset:0;
  z-index:290;
  background:rgba(13,13,13,.35);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}
.nav-open .nav-overlay{opacity:1;pointer-events:auto;}
.nav-menu{
  position:fixed;
  top:5.2rem;left:50%;
  transform:translateX(-50%) translateY(-16px);
  z-index:295;
  width:min(760px, calc(100vw - 2rem));
  background:#fff;
  border-radius:2rem;
  padding:2.6rem;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
}
.nav-open .nav-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav-menu-col span.mono{color:#8a8f8b;display:block;margin-bottom:1.1rem;text-transform:uppercase;}
.nav-menu-col a{display:block;font-family:var(--f-head);font-size:1.05rem;font-weight:500;letter-spacing:-.01em;margin-bottom:.9rem;}
.nav-menu-col a:hover{color:var(--purple);}
.nav-menu-tag{
  grid-column:1/-1;
  border-top:1px solid var(--border);
  padding-top:1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.nav-menu-tag a{font-family:var(--f-mono);font-size:.8rem;}
@media (max-width:640px){
  .nav-menu{grid-template-columns:1fr 1fr;}
  .nav-menu-tag{grid-column:1/-1;}
}

/* ============ FLOATING BG CIRCLES ============ */
.floaters{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.floaters .fc{position:absolute;border-radius:50%;filter:blur(38px);opacity:.42;will-change:transform;}
@keyframes floatY{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-26px);}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:8rem;
  overflow:hidden;
}
.hero-inner{position:relative;z-index:2;}
.hero-tag{margin-bottom:2rem;}
.hero-title{
  font-size:clamp(2.6rem,7.2vw,6rem);
  max-width:16ch;
  margin-bottom:1.8rem;
}
.hero-title .accent{color:var(--purple);}
.hero-sub{
  font-family:var(--f-head);
  font-size:1.15rem;
  font-weight:400;
  color:#4a4d4a;
  max-width:46ch;
  margin-bottom:2.6rem;
}
.hero-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;}

.hero-panel{
  position:absolute;
  right:3rem;bottom:3rem;
  width:380px;
  max-width:calc(100vw - 3rem);
  background:#000;
  border-radius:1.2rem;
  overflow:hidden;
  z-index:2;
  box-shadow:0 30px 60px -20px rgba(13,13,13,.35);
}
.hero-panel-top{
  display:flex;align-items:center;gap:.4rem;
  padding:.8rem 1rem;
  background:#1e1e1e;
}
.hero-panel-top i{width:9px;height:9px;border-radius:50%;display:block;}
.hero-panel-top i:nth-child(1){background:#ff5f57;}
.hero-panel-top i:nth-child(2){background:#febc2e;}
.hero-panel-top i:nth-child(3){background:#28c840;}
.hero-panel-top span{margin-left:.6rem;font-family:var(--f-mono);font-size:.7rem;color:#8a8f8b;}
.hero-ticker{
  height:140px;
  overflow:hidden;
  position:relative;
  padding:1rem 1.1rem;
}
.hero-ticker-track{
  position:absolute;top:0;left:0;right:0;
  padding:1rem 1.1rem;
  animation:tickerUp 9s linear infinite;
}
.hero-ticker-track p{
  font-family:var(--f-mono);
  font-size:.76rem;
  color:var(--cyan);
  margin-bottom:.65rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
}
.hero-ticker-track p em{color:#5a5f5b;font-style:normal;}
@keyframes tickerUp{
  0%{transform:translateY(0);}
  100%{transform:translateY(-50%);}
}

@media (max-width:860px){
  .hero-panel{position:static;width:100%;margin-top:3rem;}
  .hero{padding-bottom:3rem;}
}

/* ============ SECTION HEAD ============ */
.sec-head{max-width:44ch;margin-bottom:4rem;}
.sec-head .tag{margin-bottom:1.4rem;}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:1rem;}
.sec-head p{color:#5a5f5b;font-size:1.05rem;max-width:52ch;}

/* ============ FEATURE PERSPECTIVE GRID ============ */
.feat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
}
.mockup-stage{perspective:2000px;display:flex;justify-content:center;}
.mockup-card{
  width:340px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:1.5rem;
  overflow:hidden;
  transform:rotateX(11deg) rotateY(-6deg) rotate(7deg);
  box-shadow:0 60px 80px -30px rgba(13,13,13,.35), 0 0 0 1px rgba(13,13,13,.03);
  transition:transform .6s var(--ease);
}
.mockup-stage:hover .mockup-card{transform:rotateX(6deg) rotateY(-3deg) rotate(3deg);}
.mockup-top{
  display:flex;align-items:center;gap:.4rem;
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--border);
}
.mockup-top i{width:8px;height:8px;border-radius:50%;background:var(--border-2);}
.mockup-top span{margin-left:.5rem;font-family:var(--f-mono);font-size:.7rem;color:#8a8f8b;}
.mockup-body{padding:1.4rem;}
.mockup-row{
  display:flex;align-items:center;justify-content:flex-start;gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--border);
}
.mockup-row:last-child{border-bottom:0;}
.mockup-row .label{font-family:var(--f-head);font-weight:500;font-size:.88rem;width:7.4rem;flex:0 0 auto;}
.mockup-row .stat{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.03em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:1rem;
  flex:0 0 auto;
}
.mockup-row .stat.done{background:var(--tertiary);color:#3a3f3b;}
.mockup-row .stat.live{background:var(--cyan);color:var(--ink);}
.mockup-row .stat.queued{background:#f2f2f2;color:#9a9f9b;}

.feat-2x2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.feat-cell{background:var(--bg);padding:2.2rem;}
.feat-cell svg{margin-bottom:1.6rem;}
.feat-cell .mono{color:#8a8f8b;text-transform:uppercase;margin-bottom:.5rem;display:block;}
.feat-cell h3{font-size:1.15rem;font-weight:500;margin-bottom:.6rem;letter-spacing:-.01em;}
.feat-cell p{color:#5a5f5b;font-size:.9rem;line-height:1.6;}

@media (max-width:900px){
  .feat-grid{grid-template-columns:1fr;gap:3.5rem;}
  .feat-2x2{grid-template-columns:1fr;}
  .mockup-card{transform:rotateX(8deg) rotateY(0deg) rotate(0deg);}
}

/* ============ PLATFORM BENTO ============ */
.bento{
  display:grid;
  grid-template-columns:2fr 1fr;
  border:1px solid var(--border-2);
  border-top:1px solid var(--border-2);
}
.bento-top-l, .bento-top-r{border-bottom:1px solid var(--border-2);}
.bento-top-l{border-right:1px solid var(--border-2);}
.bento-bottom{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.bento-bottom .bcell{padding:2.6rem 2.2rem;border-right:1px solid var(--border-2);}
.bento-bottom .bcell:last-child{border-right:0;}
.bcell-icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--tertiary);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.4rem;
}
.bcell h3{font-size:1rem;font-weight:500;margin-bottom:.5rem;}
.bcell p{color:#5a5f5b;font-size:.88rem;line-height:1.6;}

/* code editor mockup */
.code-mockup{background:#000;color:#fff;}
.code-top{
  display:flex;align-items:center;gap:.4rem;
  padding:.9rem 1.2rem;
  background:#1e1e1e;
}
.code-top i{width:9px;height:9px;border-radius:50%;}
.code-top i:nth-child(1){background:#ff5f57;}
.code-top i:nth-child(2){background:#febc2e;}
.code-top i:nth-child(3){background:#28c840;}
.code-top span{margin-left:.6rem;font-family:var(--f-mono);font-size:.7rem;color:#8a8f8b;}
.code-body{padding:1.8rem 1.6rem;min-height:280px;display:flex;}
.code-lines{
  font-family:var(--f-mono);
  font-size:.72rem;
  color:#4a4f4b;
  text-align:right;
  margin-right:1.2rem;
  user-select:none;
  line-height:1.85;
  padding-top:.1rem;
  white-space:pre;
}
.code-out{
  font-family:var(--f-mono);
  font-size:.82rem;
  line-height:1.85;
  color:var(--cyan);
  white-space:pre-wrap;
}
.code-out .dim{color:#5a5f5b;}
.code-out .cursor{display:inline-block;width:7px;height:1em;background:var(--cyan);vertical-align:text-bottom;animation:blink 1s step-end infinite;margin-left:1px;}
@keyframes blink{50%{opacity:0;}}

/* documentation card */
.doc-card{padding:2.2rem;}
.doc-card .mono.tag{margin-bottom:1.6rem;}
.doc-list{display:flex;flex-direction:column;}
.doc-item{
  display:flex;align-items:baseline;gap:.9rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--border);
}
.doc-item:last-child{border-bottom:0;}
.doc-item .n{font-family:var(--f-mono);font-size:.7rem;color:var(--purple);flex:0 0 auto;}
.doc-item .t{font-family:var(--f-head);font-weight:500;font-size:.92rem;}

@media (max-width:900px){
  .bento{grid-template-columns:1fr;}
  .bento-top-l{border-right:0;}
  .bento-bottom{grid-template-columns:1fr;}
  .bento-bottom .bcell{border-right:0;border-bottom:1px solid var(--border-2);}
}

/* ============ PILLARS VERTICAL SLIDER ============ */
.pillars-grid{display:grid;grid-template-columns:320px 1fr;gap:5rem;}
.pillars-sticky{position:sticky;top:7rem;align-self:start;height:fit-content;}
.pillars-count{color:#8a8f8b;display:block;margin-bottom:1.4rem;}
.pillars-rollbox{height:3.2rem;overflow:hidden;position:relative;}
.pillars-roll{transition:transform .7s var(--ease);}
.pillars-roll-item{height:3.2rem;display:flex;align-items:center;font-size:2.1rem;font-weight:600;letter-spacing:-.02em;}
.pillars-desc{margin-top:1.4rem;color:#5a5f5b;max-width:26ch;line-height:1.7;text-transform:none;font-size:.82rem;}

.pillars-panels{display:flex;flex-direction:column;gap:7rem;}
.pillars-panel{position:relative;}
.pillars-panel-media{
  position:relative;
  aspect-ratio:16/10;
  background:var(--tertiary);
  border-radius:1.4rem;
  overflow:hidden;
  margin-bottom:1.8rem;
}
.pillars-panel-media svg{width:100%;height:100%;display:block;}
.pillars-panel-media.photo{background-size:cover;background-position:center;}
.pillars-panel-overlay{
  position:absolute;inset:0;
  background:var(--bg);
  transform-origin:left;
  z-index:2;
  transform:scaleX(1);
}
.pillars-panel.revealed .pillars-panel-overlay{animation:slideOverlay 1s var(--ease) forwards;}
@keyframes slideOverlay{ to{ transform:scaleX(0);} }
.pillars-panel h3{font-size:1.4rem;margin-bottom:.7rem;}
.pillars-panel p{color:#5a5f5b;max-width:56ch;line-height:1.7;}

@media (max-width:900px){
  .pillars-grid{grid-template-columns:1fr;gap:2rem;}
  .pillars-sticky{position:static;}
}

/* ============ ENGAGEMENT PATTERNS ============ */
.patterns-note{color:#8a8f8b;margin-bottom:2.4rem;max-width:52ch;}
.patterns-scroller{
  display:flex;gap:1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  margin:0 -3rem;padding-left:3rem;padding-right:3rem;
}
.pattern-card{
  flex:0 0 320px;
  height:460px;
  border-radius:1.4rem;
  position:relative;
  overflow:hidden;
  scroll-snap-align:start;
}
.pattern-card-bg{position:absolute;inset:0;}
.pattern-card-bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;}
.pattern-card-info{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.7rem;
  color:#fff;
  z-index:2;
}
.pattern-card-info .mono{opacity:.75;margin-bottom:.6rem;display:block;color:#fff;}
.pattern-card-info h3{font-size:1.2rem;letter-spacing:-.01em;line-height:1.25;}
.pattern-card-quote{
  position:absolute;left:0;right:0;bottom:0;top:0;
  padding:1.7rem;
  background:rgba(13,13,13,.86);
  color:#fff;
  transform:translateY(100%);
  transition:transform .5s var(--ease);
  z-index:3;
  display:flex;
  align-items:flex-end;
}
.pattern-card-quote p{font-size:.95rem;line-height:1.65;}
.pattern-card:hover .pattern-card-quote,
.pattern-card:focus-within .pattern-card-quote{transform:translateY(0);}
@media (max-width:900px){
  .patterns-scroller{margin:0 -1.5rem;padding-left:1.5rem;padding-right:1.5rem;}
}

/* ============ PRICING (rate list) ============ */
.rate-shell{
  border:1px solid var(--border-2);
  border-radius:1.6rem;
  overflow:hidden;
}
.rate-row{
  display:flex;
  align-items:center;
  gap:1.6rem;
  padding:1.8rem 2rem;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.rate-row:last-child{border-bottom:0;}
.rate-icon{
  width:56px;height:56px;
  border-radius:50%;
  flex:0 0 auto;
  background-size:cover;
  background-position:center;
}
.rate-info{flex:1 1 auto;min-width:0;}
.rate-name{display:block;font-size:1.05rem;font-weight:500;letter-spacing:-.01em;margin-bottom:.3rem;}
.rate-desc{color:#5a5f5b;font-size:.88rem;line-height:1.55;max-width:52ch;}
.rate-price{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.3rem;
  text-align:right;
}
.rate-price .from{color:#8a8f8b;font-size:.65rem;letter-spacing:.06em;}
.rate-price .amt{font-size:1.15rem;color:var(--ink);}
.rate-price .amt .unit{color:#8a8f8b;font-size:.7rem;margin-left:.2rem;}
.rate-cta{
  margin-top:2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  flex-wrap:wrap;
}
.price-note{color:#8a8f8b;max-width:48ch;}
@media (max-width:700px){
  .rate-row{flex-wrap:wrap;padding:1.6rem;}
  .rate-price{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:baseline;margin-top:.4rem;padding-left:72px;}
  .rate-cta{flex-direction:column;align-items:flex-start;}
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--ink);
  color:#fff;
  border-radius:3rem 3rem 0 0;
  padding-top:5rem;
  overflow:hidden;
}
.footer-top{
  display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap;
  padding-bottom:4rem;
}
.footer-brand{max-width:26ch;}
.footer-brand .nav-logo{margin-bottom:1.4rem;}
.footer-brand .nav-logo img{width:26px;height:26px;}
.footer-brand .nav-logo b{color:#fff;font-size:.95rem;}
.footer-brand p{color:rgba(255,255,255,.55);font-size:.88rem;line-height:1.65;}
.footer-cols{display:flex;gap:4.5rem;flex-wrap:wrap;}
.footer-col span.mono{color:rgba(255,255,255,.45);display:block;margin-bottom:1.1rem;}
.footer-col a{display:block;font-size:.92rem;margin-bottom:.8rem;color:#fff;}
.footer-col a:hover{color:var(--cyan);}
.footer-wordmark{
  position:relative;
  line-height:.78;
  font-weight:700;
  font-size:16vw;
  letter-spacing:-.03em;
  color:#fff;
  white-space:nowrap;
  margin-left:-.5vw;
  user-select:none;
}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;
  padding:1.6rem 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom .mono{color:rgba(255,255,255,.45);}
.footer-bottom a.mono{color:rgba(255,255,255,.7);}
.footer-bottom a.mono:hover{color:var(--cyan);}

/* ============ FAQ ============ */
.faq-list{border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1.6rem 0;
  cursor:pointer;
  font-family:var(--f-head);font-weight:500;font-size:1.05rem;letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{position:relative;flex:0 0 auto;width:16px;height:16px;}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--ink);transition:transform .25s ease;}
.faq-plus::before{left:0;top:7px;width:16px;height:1.5px;}
.faq-plus::after{left:7px;top:0;width:1.5px;height:16px;}
.faq-item[open] .faq-plus::after{transform:rotate(90deg);opacity:0;}
.faq-a{padding:0 0 1.8rem;max-width:62ch;color:#5a5f5b;font-size:.92rem;line-height:1.7;}

/* ============ CONTACT ============ */
.contact-shell{
  background:var(--ink);
  color:#fff;
  border-radius:3rem;
  padding:3.5rem;
}
.contact-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:3.5rem;}
.contact-form{display:flex;flex-direction:column;gap:1.6rem;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
.field{display:flex;flex-direction:column;gap:.6rem;}
.field label{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.field input,.field textarea{
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-family:var(--f-head);
  font-size:1rem;
  padding:.6rem 0;
  resize:vertical;
  transition:border-color .3s ease;
}
.field input:focus,.field textarea:focus{
  outline:none;
  border-bottom-color:var(--cyan);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.3);}
.contact-form .roll-btn{align-self:flex-start;margin-top:.6rem;}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-notice{
  font-family:var(--f-mono);
  font-size:.82rem;
  padding:.9rem 1.1rem;
  border-radius:.8rem;
}
.form-notice.success{background:rgba(7,241,206,.14);color:var(--cyan);}
.form-notice.error{background:rgba(255,110,95,.14);color:var(--coral);}

.contact-direct{
  border-left:1px solid rgba(255,255,255,.14);
  padding-left:3rem;
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}
.contact-direct > span.mono{color:rgba(255,255,255,.5);}
.contact-line{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  font-size:1.05rem;
  color:#fff;
  padding-bottom:1.4rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.contact-line:last-child{border-bottom:0;padding-bottom:0;}
.contact-line .mono{color:rgba(255,255,255,.45);}
.contact-line:hover{color:var(--cyan);}

@media (max-width:860px){
  .contact-shell{padding:2rem 1.4rem;border-radius:2rem;}
  .contact-grid{grid-template-columns:1fr;gap:2.4rem;}
  .field-row{grid-template-columns:1fr;}
  .contact-direct{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:2rem;}
}

/* ============ ARTICLE / PAGE TEMPLATES ============ */
/* Used by single.php, page.php and the generic index.php fallback —
   real WordPress content (posts, pages), rendered with the same
   fonts/colors as the front page but a plain, fast, readable layout. */
.article-wrap{
  max-width:760px;
  margin:0 auto;
  padding:9rem 1.5rem 6rem;
}
.article-back{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--f-mono);
  font-size:.78rem;
  color:#5a5f5b;
  margin-bottom:2.4rem;
}
.article-back:hover{color:var(--purple);}
.article-kicker{margin-bottom:1.2rem;}
.article-title{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:1rem;}
.article-meta{color:#8a8f8b;margin-bottom:2.6rem;display:flex;gap:1rem;flex-wrap:wrap;}
.article-featured{
  width:100%;
  border-radius:1.4rem;
  overflow:hidden;
  margin-bottom:2.6rem;
}
.article-featured img{width:100%;height:auto;display:block;}
.article-body{font-size:1.05rem;line-height:1.8;color:#232523;}
.article-body p{margin:0 0 1.4rem;}
.article-body h2{font-family:var(--f-head);font-size:1.5rem;letter-spacing:-.02em;margin:2.4rem 0 1rem;}
.article-body h3{font-family:var(--f-head);font-size:1.2rem;letter-spacing:-.01em;margin:2rem 0 .8rem;}
.article-body ul,.article-body ol{margin:0 0 1.4rem;padding-left:1.4rem;}
.article-body li{margin-bottom:.5rem;}
.article-body a{color:var(--purple);text-decoration:underline;text-underline-offset:2px;}
.article-body a:hover{color:var(--cyan);}
.article-body blockquote{
  border-left:2px solid var(--cyan);
  padding-left:1.4rem;
  margin:1.6rem 0;
  color:#5a5f5b;
  font-style:italic;
}
.article-body img{max-width:100%;height:auto;border-radius:1rem;margin:.6rem 0 1.6rem;}
.article-body pre{background:var(--ink);color:var(--cyan);padding:1.2rem;border-radius:.8rem;overflow-x:auto;font-family:var(--f-mono);font-size:.85rem;}
.article-body code{font-family:var(--f-mono);background:var(--tertiary);padding:.15rem .4rem;border-radius:.3rem;font-size:.9em;}
.article-cta{
  margin-top:3.5rem;
  padding:2.4rem;
  background:var(--ink);
  color:#fff;
  border-radius:1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  flex-wrap:wrap;
}
.article-cta p{font-family:var(--f-head);font-size:1.15rem;letter-spacing:-.01em;max-width:34ch;}
.article-empty{color:#5a5f5b;padding:3rem 0;}
@media (max-width:640px){
  .article-wrap{padding-top:7.5rem;}
  .article-cta{flex-direction:column;align-items:flex-start;}
}