/* =========================================================================
   HOMEPAGE REDESIGN — "серьёзная корпорация" (papaisoft.com) — 2026-08-21
   Scope: loaded ONLY by site/index.html (body.home-v2). Does not touch
   style.css, so every other page on the site is unaffected.

   Concept: a disciplined, mostly-monochrome canvas where color is spent
   on maybe three moments per page, not on every card and icon. No pill
   badges, no drop shadows, no rounded corners, no pastel section
   backgrounds. Hairline rules do the work shadows used to do.
   Typography carries the hierarchy — one huge headline, small uppercase
   eyebrows/labels, and a lot of quiet white space instead of boxed
   "features grid" tiles.
   Accent is the brand orange (#FF5A1F / #E04E1B hover), used sparingly
   for restraint and structure, not for the hue.
   ========================================================================= */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibmplexsans-cyrillic-400.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibmplexsans-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibmplexsans-cyrillic-500.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibmplexsans-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibmplexsans-cyrillic-600.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibmplexsans-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibmplexsans-cyrillic-700.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibmplexsans-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibmplexmono-cyrillic-400.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibmplexmono-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibmplexmono-cyrillic-500.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibmplexmono-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibmplexmono-cyrillic-600.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibmplexmono-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

body.home-v2{
  --accent:#FF5A1F;
  --accent-soft:#FF5A1F;
  --accent-hover:#E04E1B;
  --accent-tint:#fff1ea;
  --bg:#ffffff;
  --tint:#f4f4f4;
  --card:#ffffff;
  --border:#d0d0d0;
  --hairline:#e0e0e0;
  --ink:#161616;
  --ink-body:#161616;
  --ink-muted:#525252;
  --ink-faint:#8d8d8d;
  --shadow-card:none;
  --shadow-cta:none;

  background:#ffffff;
  color:#161616;
}

body.home-v2,
body.home-v2 button,
body.home-v2 input,
body.home-v2 textarea{
  font-family:'IBM Plex Sans','Manrope','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

body.home-v2 h1,
body.home-v2 h2,
body.home-v2 h3,
body.home-v2 h4{
  letter-spacing:-0.01em;
  font-weight:500;
}

/* the reference resets every plain <a> to no underline and uses
   border-bottom as its own accent line instead — match that here,
   the mega-menu/footer/nav links already carry their own color+no-underline
   rules so this only affects the new redesign chrome. */
body.home-v2 a{text-decoration:none;}

/* the reference's page-wide wrapper is 1440px / 40px gutters, not the
   site's default 1140px / 24px — every section on this page uses the
   shared .container class, so the narrower default was quietly
   shrinking every single section vs the source design. FAQ and the
   final CTA are the two spots the design itself narrows further. */
body.home-v2 .container{max-width:1440px;padding:0 40px;}
body.home-v2 .faq .container{max-width:920px;}
body.home-v2 .final-cta .container{max-width:1000px;}
@media(max-width:560px){
  body.home-v2 .container{padding:0 20px;}
}

/* the redesign reuses several pre-redesign classes (example-heading,
   step h3, bonus-card-text h3, faq-question already handled above)
   whose base rule in style.css hardcodes the old ink color —
   without an explicit override here they silently keep the old color
   even though everything else on the page moved to #161616. */
body.home-v2 .example-heading,
body.home-v2 .step h3,
body.home-v2 .bonus-card-text h3{color:#161616;}


/* eyebrow / kicker label pattern, reused across the page */
body.home-v2 .eyebrow{
  display:block;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--accent);
  margin-bottom:14px;
}

/* =========================================================================
   RESET. Two shape languages, same as the reference: dense tile grids
   (capability cards) keep a thin border + a small 8px radius; every full-
   bleed band, list row and hairline-divided strip stays perfectly flat.
   ========================================================================= */
body.home-v2 .example-card,
body.home-v2 .trend-item,
body.home-v2 .step,
body.home-v2 .bonus-card,
body.home-v2 .price-card,
body.home-v2 .cover-form input,
body.home-v2 .cta-cover,
body.home-v2 .final-cta,
body.home-v2 .final-cta input,
body.home-v2 .how-it-works-quote,
body.home-v2 .cto-quote,
body.home-v2 .quote-person img,
body.home-v2 .cto-info img,
body.home-v2 .step-num,
body.home-v2 .tg-link,
body.home-v2 .back-to-top,
body.home-v2 .project-card-img,
body.home-v2 .project-card-img svg{
  border-radius:0!important;
}
body.home-v2 .example-card,
body.home-v2 .trend-item,
body.home-v2 .step,
body.home-v2 .bonus-card,
body.home-v2 .price-card{
  box-shadow:none!important;
  background:transparent;
  border:none;
}

/* =========================================================================
   UTILITY STRIP — a thin dark bar above the nav, reading as "product
   suite", not "landing page".
   ========================================================================= */
body.home-v2 .home-utility-bar{height:4px;background:#161616;}

/* =========================================================================
   HEADER
   ========================================================================= */
body.home-v2 .site-header{
  background:#ffffff;
  border-bottom:1px solid var(--hairline);
}
/* base .nav-inner is capped at 1140px — with the phone/email block, full
   mega-menu nav and both CTA buttons all visible at once, that leaves the
   row sitting right at its content width with ~0px to spare, so it
   randomly wraps "Компания" onto a second line. Match the header to the
   rest of the page's 1440px rhythm instead of narrowly patching the fit. */
body.home-v2 .nav-inner{max-width:1440px;}
/* the sitewide stage badge (site.css) is white text sized for the dark
   header on every other page — this header is white, so match its own
   ink/accent instead of inheriting invisible white-on-white text. */
body.home-v2 .site-header.stage-mode .nav-logo::after{
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  vertical-align:middle;
}
body.home-v2 .nav-logo img{
  transition:filter .15s ease;
}
body.home-v2 .nav-logo:hover img{filter:none;}
body.home-v2 .nav-logo--text{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:#161616;
}
body.home-v2 .nav-logo--text .nav-logo-accent{color:var(--accent);}
body.home-v2 .nav-links>li>a{
  color:#161616;
  border-radius:0;
  position:relative;
  padding-bottom:8px;
}
body.home-v2 .nav-links>li>a:hover{background:none;color:var(--accent);}
body.home-v2 .nav-dropdown .dropdown-menu,
body.home-v2 .mega-menu{
  background:#ffffff;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  border-left:none;border-right:none;
  box-shadow:0 12px 24px rgba(0,0,0,.06);
}
body.home-v2 .dropdown-menu a,
body.home-v2 .mega-col a{color:#161616;}
body.home-v2 .dropdown-menu a:hover,
body.home-v2 .mega-col a:hover{background:var(--tint);color:var(--accent);}
body.home-v2 .mega-col-title{
  color:#8d8d8d!important;
  font-weight:700;
  letter-spacing:.1em;
  border-bottom-color:var(--hairline);
}
body.home-v2 .nav-email{color:#161616;}
body.home-v2 .nav-phone{color:var(--accent)!important;}
body.home-v2 .nav-burger span{background:#161616;}
body.home-v2 .mobile-nav{background:#ffffff;border-top:1px solid var(--hairline);}
body.home-v2 .mobile-nav a{color:#161616;}
body.home-v2 .mobile-nav a:hover{background:var(--tint);color:#161616;}

/* =========================================================================
   BUTTONS — small, inline, a hair of radius (matches the reference's own
   buttons), trailing arrow that nudges on hover. Never a full-width block.
   ========================================================================= */
body.home-v2 .btn{
  border-radius:2px!important;
  padding:12px 20px;
  font-size:14px;
  display:inline-flex;
  align-items:center;
}
body.home-v2 .btn-lg{padding:12px 20px;font-size:14px;}
body.home-v2 .btn-outline{border:1px solid #161616;color:#161616;}
body.home-v2 .btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:none;
  letter-spacing:.01em;
}
body.home-v2 .btn-primary:hover{background:var(--accent-hover);opacity:1;}
body.home-v2 .btn-link{
  background:none;
  color:#161616;
  border:1px solid #c6c6c6;
  padding:11px 19px;
}
body.home-v2 .btn-link:hover{border-color:#161616;opacity:1;transform:none;}
body.home-v2 .btn-primary::after,
body.home-v2 .btn-link::after{content:'→';margin-left:10px;display:inline-block;transition:transform .15s ease;}
body.home-v2 .btn-primary:hover::after,
body.home-v2 .btn-link:hover::after{transform:translateX(3px);}
body.home-v2 .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
body.home-v2 .hero-facts{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--hairline);
  font-size:13px;
  color:#525252;
}

/* =========================================================================
   HERO — asymmetric two-column layout: copy left, real product visual
   right (the single biggest structural gap in the previous pass — a
   text-only hero reads as a marketing splash page no matter how the
   type is styled; the reference always pairs the headline with a real
   picture of the product).
   ========================================================================= */
body.home-v2 .hero-section{
  background:#ffffff;
  padding:88px 40px 64px;
}
body.home-v2 .hero-inner{max-width:1440px;}
body.home-v2 .hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;
  align-items:center;
}
body.home-v2 .eyebrow{margin-bottom:16px;}
body.home-v2 .hero-section h1{
  font-weight:700;
  font-size:clamp(34px,4.2vw,52px);
  line-height:1.08;
  color:#161616;
  letter-spacing:-0.02em;
}
body.home-v2 .hero-section .hero-sub{
  color:#525252;
  max-width:560px;
  font-size:16px;
  line-height:1.65;
  margin-top:18px;
}
body.home-v2 .hero-visual{max-width:520px;}
body.home-v2 .hero-visual-caption{
  margin-top:14px;
  font-size:13px;
  color:#8d8d8d;
}
body.home-v2 .hero-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:520px;
  background:#161616;
  overflow:hidden;
  border-radius:2px;
}
body.home-v2 .hero-video-frame::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 55%, rgba(255,90,31,0.14), transparent 62%);
  pointer-events:none;
  z-index:2;
}
body.home-v2 .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  z-index:1;
}
body.home-v2 .hero-video.is-active{opacity:1;}
@media(max-width:960px){
  body.home-v2 .hero-grid{grid-template-columns:1fr;gap:36px;}
  body.home-v2 .hero-visual{max-width:100%;order:2;}
  body.home-v2 .hero-copy{order:1;}
}

/* =========================================================================
   STAT STRIP (price-bar) — big thin numbers, hairline dividers, no cards
   ========================================================================= */
body.home-v2 .price-bar{
  background:#ffffff;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:0 40px!important;
}
body.home-v2 .price-bar-inner{max-width:1440px;gap:0!important;}
body.home-v2 .price-card{
  background:none;
  border-left:1px solid var(--hairline);
  padding:36px 28px!important;
}
body.home-v2 .price-card:first-child{border-left:none;}
body.home-v2 .price-card .price-num,
body.home-v2 .price-card--compact .price-num{
  color:#161616;
  font-weight:600;
  font-size:34px;
  font-family:'IBM Plex Mono',monospace;
}
body.home-v2 .price-card .price-label,
body.home-v2 .price-card--compact .price-label{color:#525252;font-size:14px;}

/* =========================================================================
   MID-PAGE LEAD FORM — a modest bordered panel inside the normal content
   column, not a full-bleed hero-sized slab competing with the actual
   hero. Business still needs the lead form; it just shouldn't shout.
   ========================================================================= */
body.home-v2 .cta-cover{
  background:#ffffff!important;
  border-radius:0!important;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  margin:0!important;
  width:100%!important;
  max-width:none!important;
  padding:64px 40px!important;
}
body.home-v2 .cta-cover-content{max-width:1440px!important;align-items:flex-start!important;}
/* base style.css collapses .cta-cover-content to a column at 860px so
   the text block and form stack full-width — but that rule has no
   !important and lower specificity than the override above, so on
   mobile it would lose and the column's children would stay
   flex-start/shrink-to-content instead of stretching edge to edge. */
@media(max-width:860px){
  body.home-v2 .cta-cover-content{align-items:stretch!important;}
}
body.home-v2 .cta-cover h2{
  color:#161616!important;
  font-weight:700;
  font-size:clamp(24px,2.8vw,32px);
  letter-spacing:-0.01em;
  margin-bottom:28px;
}
body.home-v2 .cover-points{display:flex;flex-direction:column;gap:14px;}
body.home-v2 .cover-point{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#525252;line-height:1.5;}
body.home-v2 .cover-point span:first-child{color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:13px;margin-top:3px;}
body.home-v2 .cover-form{
  background:#ffffff;
  border:1px solid var(--hairline);
  border-radius:0;
  padding:28px;
}
body.home-v2 .cover-form input{border:1px solid #8d8d8d;border-radius:4px;}
body.home-v2 .cover-form .btn-primary{background:#161616;color:#fff;}
body.home-v2 .cover-form .btn-primary:hover{background:#000;}

body.home-v2 .final-cta{
  background:#161616!important;
  border-radius:0!important;
  margin:0!important;
  width:100%!important;
  max-width:none!important;
  padding:80px 40px!important;
}
body.home-v2 .final-cta h2{color:#ffffff!important;font-weight:400;}
body.home-v2 .final-cta input{
  background:#ffffff!important;
  border:1px solid #6f6f6f!important;
  border-radius:0!important;
}
body.home-v2 .final-cta .btn-primary{background:var(--accent-soft)!important;}
body.home-v2 .final-cta .btn-primary:hover{background:var(--accent)!important;}
body.home-v2 .final-cta .form-consent,
body.home-v2 .final-cta .form-consent a{color:rgba(255,255,255,.75)!important;}

/* =========================================================================
   SECTION RHYTHM — quiet white canvas, hairline separators instead of
   pastel background blocks. Color spent only where it earns its keep.
   ========================================================================= */
body.home-v2 .section,
body.home-v2 .what-ai,
body.home-v2 .capabilities,
body.home-v2 .examples,
body.home-v2 .faq,
body.home-v2 .bonuses,
body.home-v2 .try-ai,
body.home-v2 .methodology,
body.home-v2 .trends,
body.home-v2 .realized-title,
body.home-v2 .projects-grid,
body.home-v2 .cto-quote{
  background:#ffffff!important;
}
body.home-v2 .section{
  padding:96px 40px;
  border-top:1px solid var(--hairline);
}
body.home-v2 .section:first-of-type{border-top:none;}
body.home-v2 .realized-title{
  padding-top:96px;
  border-top:1px solid var(--hairline);
}
body.home-v2 .how-it-works{background:#ffffff;border-top:1px solid var(--hairline);}
@media(max-width:768px){
  body.home-v2 .section,
  body.home-v2 .realized-title{padding:56px 20px;}
}

/* section titles: smaller, restrained, not giant bold shouty headings */
body.home-v2 .section-title,
body.home-v2 .capabilities h2,
body.home-v2 .examples h2,
body.home-v2 .faq h2,
body.home-v2 .trends h2,
body.home-v2 .how-to-get h2,
body.home-v2 .bonuses h2,
body.home-v2 .try-ai h2,
body.home-v2 .methodology h2,
body.home-v2 .realized-title h2{
  font-weight:700;
  font-size:clamp(26px,2.8vw,34px);
  color:#161616;
}

/* =========================================================================
   TILE GRID — small bordered tiles with a hairline, gentle radius, icon
   bottom-left / arrow bottom-right. This is the reference's own "product
   grid" pattern (compact, dense, mostly whitespace, not a features-with-
   paragraphs marketing block).
   ========================================================================= */
body.home-v2 .cap-grid{gap:16px;}
body.home-v2 .cap-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:24px!important;
  min-height:168px;
  transition:border-color .15s ease;
}
body.home-v2 .cap-card:hover{border-color:#8d8d8d;}
body.home-v2 .cap-card-top{display:flex;flex-direction:column;gap:8px;}
body.home-v2 .cap-card h3{font-weight:500;font-size:16px;order:-1;}
body.home-v2 .cap-card p{font-size:13.5px;color:#525252;}
body.home-v2 .cap-card-icon{
  width:auto;height:auto;
  background:none;
  order:2;
}
body.home-v2 .cap-card-icon svg{width:22px;height:22px;stroke:#161616!important;}
body.home-v2 .cap-card-arrow{
  align-self:flex-end;
  color:#161616;
  font-size:16px;
}

body.home-v2 .example-cards{gap:0;border-top:1px solid var(--hairline);}
body.home-v2 .example-card{
  border-top:none!important;
  border-bottom:1px solid var(--hairline);
  padding:0;
}
body.home-v2 .example-card-body{padding:40px 0;}
body.home-v2 .example-card .check-item:last-child{
  background:none;
  padding:0;
  margin:12px 0 0;
  border-top:1px solid var(--hairline);
  padding-top:14px!important;
}
@media(min-width:769px){
  body.home-v2 .example-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
  body.home-v2 .example-card{border-bottom:none;border-right:1px solid var(--hairline);}
  body.home-v2 .example-card:last-child{border-right:none;}
  body.home-v2 .example-card-body{padding:8px 36px;}
  body.home-v2 .example-card:first-child .example-card-body{padding-left:0;}
  body.home-v2 .example-card:last-child .example-card-body{padding-right:0;}
}

body.home-v2 .trend-items{gap:0;border-top:1px solid var(--hairline);}
body.home-v2 .trend-item{
  background:none;
  border-bottom:1px solid var(--hairline);
  padding:28px 0;
  align-items:center;
}
body.home-v2 .trend-icon svg{stroke:#161616!important;}

/* design's PROCESS section is white cards (padding 32px, radius 2px) on
   a #f4f4f4 section background, with big orange IBM Plex Mono numbers —
   not the hairline-divided/thin-number treatment used elsewhere on the
   page. Overrides the blanket "every .section is white" rule below it. */
body.home-v2 .how-to-get{background:var(--tint)!important;border-top:1px solid var(--hairline);}
body.home-v2 .steps-grid{gap:24px;}
body.home-v2 .step{
  background:#ffffff;
  border:none;
  padding:32px!important;
  border-radius:2px;
}
body.home-v2 .step-num{
  background:none;
  color:var(--accent);
  font-family:'IBM Plex Mono',monospace;
  font-size:32px;
  font-weight:600;
  width:auto;height:auto;
  margin-bottom:20px;
}
body.home-v2 .step h3{font-size:18px;font-weight:600;margin-bottom:10px;}
body.home-v2 .step p{font-size:14px;color:#525252;line-height:1.6;}
@media(max-width:768px){
  body.home-v2 .step{padding:28px!important;}
}

body.home-v2 .bonus-cards{gap:0;border-top:1px solid var(--hairline);}
body.home-v2 .bonus-card{
  border-bottom:1px solid var(--hairline);
  padding:32px 0;
}
body.home-v2 .bonus-card img{border-radius:0;filter:grayscale(1);}
@media(min-width:769px){
  body.home-v2 .bonus-card{border-bottom:none;border-left:1px solid var(--hairline);padding:8px 36px;}
  body.home-v2 .bonus-card:first-child{border-left:none;padding-left:0;}
  body.home-v2 .bonus-card:last-child{padding-right:0;}
}

/* =========================================================================
   ARCHITECTURE — dark platform diagram (LLMs → PapAI.Core → modules →
   channels), matches the Claude Design layout.
   ========================================================================= */
body.home-v2 .arch-section{background:#161616;color:#fff;padding:96px 40px;}
body.home-v2 .arch-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
  align-items:start;
}
body.home-v2 .arch-text h2{
  color:#fff;
  font-size:clamp(26px,2.8vw,34px);
  font-weight:700;
  line-height:1.18;
  margin:0 0 20px;
  letter-spacing:-0.01em;
}
body.home-v2 .arch-lead{font-size:15px;line-height:1.7;color:#c6c6c6;margin:0 0 24px;}
body.home-v2 .arch-points{display:flex;flex-direction:column;gap:13px;}
body.home-v2 .arch-point{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#e0e0e0;line-height:1.5;}
body.home-v2 .arch-point span:first-child{color:var(--accent-soft);font-family:'IBM Plex Mono',monospace;font-size:13px;margin-top:2px;}
body.home-v2 .arch-diagram{
  position:relative;
  border:1px solid #333;
  background:#1a1a1a;
  padding:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  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:28px 28px;
}
body.home-v2 .arch-diagram-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#f4f4f4;
  margin-bottom:16px;
}
body.home-v2 .arch-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px;}
body.home-v2 .arch-pill{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:500;
  color:#e0e0e0;
  border:1px solid #4a4a4a;
  background:#242424;
  padding:7px 13px;
}
body.home-v2 .arch-connector{width:1px;height:30px;background:#4a4a4a;}
body.home-v2 .arch-core{
  text-align:center;
  padding:22px 44px;
  background:var(--accent-soft);
  margin-bottom:8px;
}
body.home-v2 .arch-core-title{font-family:'IBM Plex Mono',monospace;font-size:16px;color:#161616;font-weight:700;}
body.home-v2 .arch-core-sub{font-size:12px;color:rgba(22,22,22,.65);margin-top:4px;font-weight:500;}
body.home-v2 .arch-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px;width:100%;}
body.home-v2 .arch-module{
  font-size:13px;
  font-weight:500;
  color:#e0e0e0;
  border:1px solid #4a4a4a;
  background:#242424;
  padding:11px 10px;
  text-align:center;
}
@media(max-width:960px){
  body.home-v2 .arch-grid{grid-template-columns:1fr;}
  body.home-v2 .arch-modules{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================================
   CAPABILITIES (num style) — matches the Claude Design tile grid
   ========================================================================= */
body.home-v2 .cap-grid--num{grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hairline);}
body.home-v2 .cap-card--num{
  display:block;
  border:none;
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  border-radius:0!important;
  padding:32px 28px!important;
}
body.home-v2 .cap-card--num:last-child{border-right:none;}
body.home-v2 .cap-num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent);margin-bottom:24px;}
body.home-v2 .cap-card--num h3{font-size:18px;font-weight:600;margin:0 0 10px;color:#161616;}
body.home-v2 .cap-card--num p{font-size:14px;color:#525252;line-height:1.55;margin:0;}
@media(max-width:768px){
  body.home-v2 .cap-grid--num{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  body.home-v2 .cap-grid--num{grid-template-columns:1fr;}
  body.home-v2 .cap-card--num{border-right:none!important;}
}

/* =========================================================================
   TRY-AI BAR — split kicker/heading + button strip
   ========================================================================= */
body.home-v2 .try-ai-bar{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--tint);
  padding:48px 40px;
}
body.home-v2 .try-ai-bar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
body.home-v2 .try-ai-bar-heading{font-size:21px;font-weight:600;max-width:640px;line-height:1.4;color:#161616;}
body.home-v2 .btn-dark{background:#161616;color:#fff;white-space:nowrap;}
body.home-v2 .btn-dark:hover{background:var(--accent);}

/* =========================================================================
   INDUSTRIES — 4-col bordered link grid
   ========================================================================= */
body.home-v2 .industries-section{background:var(--tint);padding:96px 40px;border-top:1px solid var(--hairline);}
body.home-v2 .industries-section .eyebrow,
body.home-v2 .industries-section h2{max-width:1440px;margin-left:auto;margin-right:auto;}
body.home-v2 .industries-section h2{margin-bottom:48px;}
body.home-v2 .industries-grid{
  max-width:1440px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
  background:#fff;
}
body.home-v2 .industry-tile{
  padding:24px;
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  color:#161616;
  font-size:15px;
  font-weight:500;
  display:flex;
  align-items:center;
  min-height:80px;
}
body.home-v2 .industry-tile:hover{background:#161616;color:#fff;}
@media(max-width:768px){body.home-v2 .industries-grid{grid-template-columns:repeat(2,1fr);}}

/* =========================================================================
   QUOTES — merged CMO/CTO into one dark 2-col editorial block
   ========================================================================= */
body.home-v2 .quotes-section{background:#161616;color:#fff;padding:96px 40px;}
body.home-v2 .quotes-grid{max-width:1200px;display:grid;grid-template-columns:1fr 1fr;gap:64px;}
body.home-v2 .quote-block blockquote{
  font-size:24px;
  line-height:1.5;
  font-weight:500;
  letter-spacing:-0.01em;
  color:#fff;
  margin:0 0 28px;
}
body.home-v2 .quote-block-rule{width:32px;height:1px;background:var(--accent);margin-bottom:12px;}
body.home-v2 .quote-block-author{font-size:14px;color:#8d8d8d;}
@media(max-width:768px){body.home-v2 .quotes-grid{grid-template-columns:1fr;gap:40px;}}

/* trends without icons — plain hairline-divided list, matches design */
body.home-v2 .trend-items--plain{display:grid!important;flex-direction:unset;grid-template-columns:repeat(3,1fr);gap:24px;border-top:none;}
body.home-v2 .trend-item--plain{
  border-top:2px solid #161616;
  border-bottom:none!important;
  padding:24px 0 0!important;
}
body.home-v2 .trend-item--plain p{font-size:15px;color:#161616;line-height:1.6;margin:0;}
@media(max-width:768px){body.home-v2 .trend-items--plain{grid-template-columns:1fr;}}

/* =========================================================================
   CASE CARDS — redesigned realized-projects section: tag badge over the
   dashboard mockup, before→after stat in accent, pull-quote with a left
   rule, author + case link footer. Matches the Claude Design layout.
   ========================================================================= */
body.home-v2 .case-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
body.home-v2 .case-section-head .section-title{margin:0;max-width:600px;}
body.home-v2 .case-section-all{
  font-size:14px;
  font-weight:600;
  color:#161616;
  border-bottom:1px solid #161616;
  white-space:nowrap;
}
body.home-v2 .case-section-all:hover{color:var(--accent);border-color:var(--accent);}
body.home-v2 .case-cards{
  display:flex;
  flex-direction:column;
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
}
body.home-v2 .case-card{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:0;
  background:#fff;
}
body.home-v2 .case-card-visual{
  position:relative;
  background:#f4f4f4;
  display:flex;
  align-items:center;
  padding:20px;
}
body.home-v2 .case-card-visual-inner{width:100%;}
body.home-v2 .case-card-visual-inner svg{border-radius:0;}
body.home-v2 .case-card-tag{
  position:absolute;
  top:20px;
  left:20px;
  z-index:1;
  background:#161616;
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 12px;
}
body.home-v2 .case-card-body{
  padding:44px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.home-v2 .case-card-body h3{
  font-size:21px;
  font-weight:600;
  margin:0 0 20px;
  letter-spacing:-0.01em;
}
body.home-v2 .case-card-stat{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
body.home-v2 .case-before{
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  color:#8d8d8d;
  text-decoration:line-through;
}
body.home-v2 .case-arrow{color:#8d8d8d;}
body.home-v2 .case-after{
  font-family:'IBM Plex Mono',monospace;
  font-size:22px;
  font-weight:700;
  color:var(--accent);
}
body.home-v2 .case-quote{
  font-size:16px;
  line-height:1.6;
  color:#161616;
  margin:0 0 16px;
  padding-left:18px;
  border-left:2px solid var(--accent);
  font-style:normal;
}
body.home-v2 .case-card-detail{
  font-size:14px;
  line-height:1.6;
  color:#525252;
  margin:0 0 24px;
}
body.home-v2 .case-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
body.home-v2 .case-author{font-size:13px;color:#8d8d8d;}
body.home-v2 .case-link{
  font-size:14px;
  font-weight:600;
  color:#161616;
  border-bottom:1px solid #161616;
  white-space:nowrap;
}
body.home-v2 .case-link:hover{color:var(--accent);border-color:var(--accent);}
@media(max-width:860px){
  body.home-v2 .case-card{grid-template-columns:1fr;}
  body.home-v2 .case-card-body{padding:32px 24px;}
}

/* =========================================================================
   QUOTES — editorial: big glyph, thin rule, monochrome portrait
   ========================================================================= */
body.home-v2 .how-it-works-quote,
body.home-v2 .cto-quote-inner{
  background:none;
  border-left:none;
  border-top:2px solid #161616;
  padding:28px 0 0!important;
  position:relative;
}
body.home-v2 blockquote{
  font-size:22px;
  font-style:normal;
  color:#161616;
  font-weight:400;
}
body.home-v2 .quote-person img,
body.home-v2 .cto-info img{filter:grayscale(1);}
body.home-v2 .quote-person-name,
body.home-v2 .cto-info .quote-person-name{font-weight:600;}
body.home-v2 .quote-person-role,
body.home-v2 .cto-info .quote-person-role{
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.08em;
  color:#8d8d8d;
}

/* =========================================================================
   ARCHITECTURE DIAGRAM — neutralize the last warm pastel background
   ========================================================================= */
body.home-v2 .how-it-works-arch svg rect[fill="#fff7ee"],
body.home-v2 .case-card-visual-inner svg rect[fill="#fff7ee"]{fill:#f4f4f4;}

/* =========================================================================
   DEMO WALL — the reference's actual client-logo strip: a quiet grey
   band, uppercase 12px kicker, one flowing left-aligned row of uniform
   16px/600/#6f6f6f names. The old markup is a deliberate "font zoo"
   (serif/mono/small-caps per company, centered, 20-30px, some in accent
   colour) — every one of those choices has to be neutralized, not just
   the color, or the section keeps reading as the old design.
   ========================================================================= */
body.home-v2 .demo-wall{
  background:#f4f4f4;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:36px 0;
}
body.home-v2 .demo-wall-kicker{
  color:#8d8d8d!important;
  font-weight:600!important;
  font-size:12px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  margin:0 0 20px!important;
  text-align:left!important;
}
body.home-v2 .demo-wall-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start!important;
  align-items:baseline;
  gap:16px 40px!important;
  max-width:none!important;
  margin:0!important;
}
body.home-v2 .dw{
  font-family:'IBM Plex Sans','Manrope',sans-serif!important;
  font-weight:600!important;
  font-style:normal!important;
  font-variant:normal!important;
  text-transform:none!important;
  letter-spacing:-0.01em!important;
  font-size:16px!important;
  color:#6f6f6f!important;
}
body.home-v2 .dw:hover{color:var(--accent)!important;transform:none;}
body.home-v2 .dw-accent{color:#6f6f6f!important;}

/* =========================================================================
   PROJECTS — tighten, remove leftover color-card language
   ========================================================================= */
body.home-v2 .project-result{
  color:var(--accent)!important;
  font-weight:400;
}
body.home-v2 .project-card{border-bottom:1px solid var(--hairline);}
body.home-v2 .project-card-content ul li::before{color:var(--accent);}

/* =========================================================================
   FAQ — hairline list, accent restricted to the number
   ========================================================================= */
body.home-v2 .faq-num{color:var(--accent)!important;font-weight:400;}
body.home-v2 .faq-item{border-bottom:1px solid var(--hairline);}
body.home-v2 .faq-icon{color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:18px;}
body.home-v2 .faq-question{font-weight:500;color:#161616;}

/* =========================================================================
   ALL-SOLUTIONS DIRECTORY — one neutral tint block is enough
   ========================================================================= */
body.home-v2 #all-solutions{background:var(--tint)!important;border-top:1px solid var(--hairline);}
body.home-v2 #all-solutions p[style*="border-bottom:2px solid"]{
  border-bottom-color:#161616!important;
  font-weight:600!important;
}
body.home-v2 #all-solutions p[style*="text-transform:uppercase"]{
  color:#8d8d8d!important;
}
body.home-v2 #all-solutions a[style*="color:#333"]{color:#161616!important;}
body.home-v2 #all-solutions a[style*="color:#333"]:hover{color:var(--accent)!important;}

/* =========================================================================
   FOOTER — dense, disciplined, small caps labels, thin dividers
   ========================================================================= */
body.home-v2 .site-footer{background:#161616;padding:64px 40px 28px;}

body.home-v2 .footer-nav-label,
body.home-v2 .footer-nav-title{
  color:#ffffff;
  font-weight:600;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
body.home-v2 .footer-nav-col ul li a{color:#8d8d8d;font-size:14px;}
body.home-v2 .footer-nav-col ul li a:hover{color:var(--accent);}
body.home-v2 .tg-bar{background:#ffffff;border-top:1px solid var(--hairline);}
body.home-v2 .tg-link{border-radius:0;}

/* =========================================================================
   MISC BRAND CHROME
   ========================================================================= */
body.home-v2 .back-to-top{background:var(--accent);border-radius:0!important;}
body.home-v2 .back-to-top:hover{background:var(--accent-hover);}
body.home-v2 .back-to-top svg{stroke:#fff;}
body.home-v2 .glossary-term{text-decoration-color:rgba(255,90,31,.5);}
body.home-v2 main a:not([class]){color:var(--accent);}
body.home-v2 main p a:not([class]),
body.home-v2 main li a:not([class]){
  color:var(--accent);
  border-bottom-color:rgba(255,90,31,.35);
}
body.home-v2 main p a:not([class]):hover,
body.home-v2 main li a:not([class]):hover{color:var(--accent-hover);border-color:var(--accent-hover);}
body.home-v2 .papai-toast{background:var(--accent);border-radius:0;box-shadow:none;}

/* the dark "brand philosophy" band already exists once — keep it as the
   one deliberate dark punctuation mark on the page, no change needed. */

/* Mobile sticky header CTAs — hidden until the hero's own CTA buttons
   scroll out of view (2026-08-29), shown only on mobile where the hero
   buttons aren't otherwise reachable without scrolling back up. */
body.home-v2 .header-mobile-cta{display:none;gap:8px;}
@media(max-width:768px){
  body.home-v2.hero-cta-hidden .header-mobile-cta{display:flex;}
}
body.home-v2 .btn-mini{font-size:13px;font-weight:600;padding:8px 12px;border-radius:6px;text-decoration:none;white-space:nowrap;line-height:1.2;}
body.home-v2 .btn-mini-outline{border:1px solid var(--accent);color:var(--accent);}
body.home-v2 .btn-mini-primary{background:var(--accent);color:#fff;}