/* ==========================================================================
   KredosAI design tokens + component styles
   Premium minimal, light. Cobalt + Poppins. Styles native Gutenberg blocks
   via utility classNames so every section stays editable in the block editor.
   ========================================================================== */
:root{
  --k-bg:#ffffff; --k-mist:#f5f8fd; --k-panel:#ffffff;
  --k-ink:#0c1424; --k-mut:#54617a; --k-faint:#8a96ad;
  --k-line:rgba(12,20,36,.10); --k-line2:rgba(12,20,36,.17);
  --k-cobalt:#0447a8; --k-blue:#2f7bff; --k-sky:#a5caff;
  --k-grad:linear-gradient(100deg,#0447a8,#2f7bff);
}

body{background:var(--k-bg);color:var(--k-mut);line-height:1.65;-webkit-font-smoothing:antialiased}
.wp-site-blocks{overflow-x:clip}
h1,h2,h3,h4{color:var(--k-ink);letter-spacing:-.02em}
:where(h1,h2){font-weight:300}
a{text-decoration:none}

/* gradient accent for headline fragments (kept in pattern markup) */
.k-accent{background:var(--k-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* eyebrow + kicker */
.k-eyebrow{font-size:.78rem!important;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--k-cobalt)!important;margin-bottom:1.1rem}

/* ---------- buttons (core block) ---------- */
.wp-block-button__link{font-weight:500;font-size:.92rem;padding:.8rem 1.5rem;border-radius:8px;transition:.18s;border:1px solid transparent}
.wp-block-button:not(.is-style-outline) .wp-block-button__link{background:var(--k-cobalt);color:#fff}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{background:#06367f;transform:translateY(-1px)}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;border-color:var(--k-line2);color:var(--k-ink)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--k-cobalt);color:var(--k-cobalt)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.80);backdrop-filter:blur(14px);border-bottom:1px solid var(--k-line);padding:0}
.site-header__inner{max-width:1180px;margin:0 auto;padding:13px 30px;align-items:center;gap:2rem}
.site-header .wp-block-site-logo img{height:30px;width:auto}
.site-nav{gap:2.2rem;flex:1}
.site-nav .wp-block-navigation-item__content{font-size:.92rem;font-weight:400;color:var(--k-mut)}
.site-nav .wp-block-navigation-item__content:hover{color:var(--k-ink)}
.site-header__cta{gap:.9rem;flex-wrap:nowrap}
.site-header__cta .wp-block-button__link{padding:.6rem 1.1rem}

/* ---------- hero ---------- */
.k-hero{position:relative;text-align:center;padding:116px 30px 128px;overflow:hidden;
  background:radial-gradient(ellipse 900px 520px at 50% -8%,rgba(47,123,255,.10),transparent 60%)}
.k-hero>*{position:relative;z-index:2;max-width:820px;margin-left:auto;margin-right:auto}
.k-hero>.k-waves{max-width:none;width:100%}
.k-hero h1{font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.1;margin-bottom:1.5rem}
.k-hero .k-sub{font-size:1.18rem;color:var(--k-mut);font-weight:300;max-width:34rem;margin:0 auto 2.2rem}
.k-hero .wp-block-buttons{justify-content:center;align-items:center;gap:1.1rem}
.k-tlink a,a.k-tlink{color:var(--k-cobalt);font-weight:500;font-size:.92rem}

/* hero waves (decorative svg, single html block) */
.k-waves{position:absolute;left:0;right:0;bottom:36px;width:100%;height:330px;z-index:1;pointer-events:none;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.k-waves svg{width:200%;height:100%;animation:k-drift 24s linear infinite}
@keyframes k-drift{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.k-waves svg{animation:none}}

/* hero message chip */
.k-chip{position:relative;z-index:2;margin:60px auto 0;max-width:320px;background:var(--k-panel);border:1px solid var(--k-line);border-radius:16px;padding:18px 20px;text-align:left;box-shadow:0 24px 60px rgba(12,20,36,.12)}
.k-chip .k-chip__top{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:.74rem;color:var(--k-faint)}
.k-chip .k-chip__dot{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#0a2a63,#2f7bff);display:inline-grid;place-items:center;font-size:.7rem;color:#fff;font-weight:700}
.k-chip p{color:var(--k-ink);font-size:.98rem;font-weight:300;margin:0}
.k-chip strong{font-weight:500;color:var(--k-cobalt)}

/* ---------- generic section ---------- */
.k-band{padding:100px 30px;border-top:1px solid var(--k-line)}
.k-band.k-mist{background:var(--k-mist)}
.k-shead{max-width:660px;margin:0 auto 60px;text-align:center}
.k-shead h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:1rem}
.k-shead p{font-size:1.05rem;color:var(--k-mut);font-weight:300}

/* ---------- numbered feature rows (list or group) ---------- */
.k-rows{max-width:880px;margin:0 auto;border-top:1px solid var(--k-line)}
.k-row{display:grid;grid-template-columns:64px 1fr;gap:30px;padding:28px 8px;border-bottom:1px solid var(--k-line);transition:.2s;margin:0}
.k-row:hover{background:rgba(4,71,168,.025)}
.k-row .k-num{font-size:.95rem;color:var(--k-cobalt);font-weight:500;padding-top:.2rem}
.k-row h3{font-size:1.3rem;font-weight:400;margin:0 0 .35rem}
.k-row p{font-size:.98rem;color:var(--k-mut);font-weight:300;margin:0;max-width:46rem}

/* ---------- markets grid (columns) ---------- */
.k-markets{max-width:1180px;margin-inline:auto;border:1px solid var(--k-line);border-radius:14px;overflow:hidden;gap:0!important;background:var(--k-bg)}
.k-markets .wp-block-column{padding:38px 34px;border-right:1px solid var(--k-line);transition:.22s;margin:0}
.k-markets .wp-block-column:last-child{border-right:0}
.k-markets .wp-block-column:hover{background:var(--k-mist)}
.k-markets .k-kk{font-size:.78rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--k-cobalt)!important;margin-bottom:1rem}
.k-markets h3{font-size:1.32rem;font-weight:400;margin:0 0 .6rem}
.k-markets p{font-size:.95rem;color:var(--k-mut);font-weight:300;margin:0}

/* ---------- stats (columns) ---------- */
.k-stats{max-width:1180px;margin-inline:auto;border:1px solid var(--k-line);border-radius:14px;overflow:hidden;gap:0!important;background:var(--k-bg)}
.k-stats .wp-block-column{padding:40px 22px;text-align:center;border-right:1px solid var(--k-line);margin:0}
.k-stats .wp-block-column:last-child{border-right:0}
.k-stats .k-n{font-size:2.6rem!important;font-weight:300;color:var(--k-ink)!important;line-height:1;letter-spacing:-.03em;margin:0}
.k-stats .k-n .k-accent{font-weight:300}
.k-stats .k-t{font-size:.9rem!important;color:var(--k-mut)!important;font-weight:300;margin:.65rem 0 0}
.k-trust{text-align:center;margin:40px auto 0;color:var(--k-faint);font-size:.86rem;letter-spacing:.04em}
.k-trust strong{color:var(--k-mut);font-weight:500}

/* ---------- cta band ---------- */
.k-cta{position:relative;text-align:center;padding:116px 30px;border-top:1px solid var(--k-line);overflow:hidden;
  background:radial-gradient(ellipse 760px 420px at 50% 50%,rgba(47,123,255,.10),transparent 64%)}
.k-cta>*{position:relative;z-index:2;max-width:760px;margin-left:auto;margin-right:auto}
.k-cta h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:1.1rem}
.k-cta p{color:var(--k-mut);font-weight:300;font-size:1.08rem;max-width:34rem;margin:0 auto 2rem}
.k-cta .wp-block-buttons{justify-content:center}

/* ---------- footer ---------- */
.site-footer{padding:62px 30px 34px;border-top:1px solid var(--k-line)}
.site-footer__grid{max-width:1180px;margin:0 auto;gap:38px;padding-bottom:38px;border-bottom:1px solid var(--k-line)}
.site-footer .wp-block-site-logo img{height:30px;width:auto}
.site-footer__tag{font-size:.92rem;color:var(--k-mut);font-weight:300;margin:14px 0 0;max-width:24rem}
.site-footer__badges{margin:18px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.site-footer__badges span{font-size:.7rem;font-weight:500;color:var(--k-mut);border:1px solid var(--k-line2);border-radius:6px;padding:.34rem .6rem}
.site-footer h4{color:var(--k-ink);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 1rem;font-weight:500}
.site-footer__links{list-style:none;margin:0;padding:0}
.site-footer__links li{margin:0}
.site-footer__links a{display:block;padding:.3rem 0;font-size:.92rem;color:var(--k-mut);font-weight:300}
.site-footer__links a:hover{color:var(--k-cobalt)}
.site-footer__bot{max-width:1180px;margin:24px auto 0;font-size:.82rem;color:var(--k-faint)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .site-nav,.site-header__cta .is-style-outline{display:none}
  .k-markets,.k-stats{display:block}
  .k-markets .wp-block-column,.k-stats .wp-block-column{border-right:0;border-bottom:1px solid var(--k-line)}
  .k-row{grid-template-columns:44px 1fr;gap:18px}
}

/* ---------- browser frame for product screenshots (chrome drawn in CSS) ---------- */
.k-frame{position:relative;max-width:1020px;margin:0 auto;padding-top:40px;border:1px solid var(--k-line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 90px rgba(12,20,36,.16)}
.k-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:40px;background:var(--k-mist);border-bottom:1px solid var(--k-line)}
.k-frame::after{content:"";position:absolute;top:15px;left:18px;width:10px;height:10px;border-radius:50%;background:#ccd4e0;box-shadow:17px 0 0 #ccd4e0,34px 0 0 #ccd4e0}
.k-frame img{display:block;width:100%;height:auto}
.k-frame .wp-block-image,.k-frame figure{margin:0}
.k-product{position:relative;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse 1000px 460px at 50% 0%,rgba(47,123,255,.08),transparent 60%)}

/* ---------- pinned horizontal-scroll gallery ---------- */
.k-hscroll{position:relative;height:300vh;background:var(--k-mist);border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line)}
.k-hscroll__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.k-hscroll__head{text-align:center;padding:0 30px 34px}
.k-hscroll__head .k-eyebrow{display:block;margin-bottom:1rem}
.k-hscroll__head h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.k-hscroll__track{display:flex;gap:30px;align-items:center;padding:0 max(30px,calc(50vw - 430px));width:max-content;will-change:transform;transition:transform .08s linear}
.k-hscroll__item{flex:0 0 auto;width:min(78vw,860px)}
.k-hscroll__item .k-cap{margin-top:16px;text-align:center;color:var(--k-mut);font-weight:300;font-size:.95rem}
.k-hscroll__hint{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:var(--k-faint);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:880px){
  .k-hscroll{height:auto}
  .k-hscroll__sticky{position:static;height:auto;padding:80px 0}
  .k-hscroll__track{flex-direction:column;width:auto;padding:0 24px;transform:none!important;gap:40px}
  .k-hscroll__item{width:100%}
  .k-hscroll__hint{display:none}
}
