/**
 * Creatio Hero Block — Styles
 * All cre-* shared tokens + hero-specific rules
 *
 * @package AloraAlkemia
 */

/* ── Shared design tokens ─────────────────────────────────── */
.cre-root,.crh-block,.crc-block,.crd-block,.crr-block,.crct-block{
    font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif;
    color:#0B1530;
}

.cre-section{
    position:relative;
    isolation:isolate;
    padding:120px 0;
    overflow:hidden;
}
/* First section (intro) needs extra top padding to clear the fixed header (88px) */
.cre-section.cre-section-intro{
    padding-top: calc(88px + 120px);
}
.cre-section-bg{position:absolute;inset:0;z-index:-1}
.cre-shell{max-width:1240px;margin:0 auto;padding:0 32px;position:relative}

/* Backgrounds */
.cre-bg-light{background:radial-gradient(900px 600px at 85% 10%,rgba(255,90,40,.10),transparent 60%),radial-gradient(700px 500px at 5% 95%,rgba(0,28,89,.08),transparent 60%),linear-gradient(180deg,#FBFAF7 0%,#F2F4F9 100%)}
.cre-bg-soft{background:radial-gradient(600px 400px at 50% 0%,rgba(0,28,89,.06),transparent 65%),linear-gradient(180deg,#F4F5F9 0%,#EDEFF5 100%)}
.cre-bg-dark{background:radial-gradient(800px 500px at 80% 15%,rgba(255,20,0,.18),transparent 60%),radial-gradient(700px 500px at 10% 90%,rgba(0,28,89,.45),transparent 65%),linear-gradient(180deg,#050B18 0%,#060D1F 100%)}
.cre-bg-platform{background:radial-gradient(900px 600px at 85% 0%,rgba(255,90,40,.18),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(255,180,80,.14),transparent 65%),radial-gradient(500px 400px at 50% 50%,rgba(255,255,255,.6),transparent 70%),linear-gradient(180deg,#FFFDF9 0%,#FAF5EE 50%,#F4F0E9 100%)}
.cre-bg-final{background:radial-gradient(900px 600px at 50% 0%,rgba(255,20,0,.22),transparent 60%),radial-gradient(700px 500px at 50% 100%,rgba(0,28,89,.55),transparent 70%),linear-gradient(180deg,#050B18 0%,#080F22 100%)}

/* Grid overlay (diff section) */
.cre-diff-grid-overlay{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,rgba(11,21,48,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(11,21,48,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 95%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 95%)}

/* Eyebrow */
.cre-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.28em;margin-bottom:28px}
.cre-eyebrow-bar{width:28px;height:1.5px;background:#FF1400;flex-shrink:0}
.cre-eyebrow-bar-orange{background:linear-gradient(90deg,#FF1400,#FF8A3D)!important}
.cre-eyebrow-x{color:#FF1400;padding:0 4px;font-weight:700}
.cre-eyebrow-dark{color:rgba(11,21,48,.55)}
.cre-eyebrow-light{color:rgba(255,255,255,.55)}

/* Typography */
.cre-h1{font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.035em;font-weight:800;color:#0B1530;margin:0 0 28px}
.cre-h1-accent{background:linear-gradient(95deg,#FF1400 0%,#FF5C2B 60%,#FF8A3D 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cre-h2{font-size:clamp(30px,3.6vw,50px);line-height:1.08;letter-spacing:-.028em;font-weight:800;color:#fff;margin:0 0 20px}
.cre-h2-dark{color:#0B1530}
.cre-h2-accent{background:linear-gradient(95deg,#FF1400 0%,#FF6A35 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cre-lede{font-size:17px;line-height:1.7;color:rgba(11,21,48,.7);margin:0 0 16px;max-width:540px}
.cre-lede-dim{color:rgba(11,21,48,.55)}

/* ── Hero intro grid ────────────────────────────────────────── */
.cre-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:80px;align-items:center}
.cre-lockup{margin-top:40px;display:inline-flex;align-items:center;gap:18px;padding:14px 22px;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border:1px solid rgba(0,28,89,.08);box-shadow:0 12px 40px -20px rgba(0,28,89,.25)}
.cre-lockup-mark{font-weight:800;letter-spacing:.32em;font-size:12px;color:#0B1530}
.cre-lockup-sep{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(11,21,48,.4);font-weight:700}
.cre-lockup-logo{height:22px;width:auto;display:block}

/* Hero stage */
.cre-hero-stage{position:relative;width:100%;aspect-ratio:1 / 0.92;min-height:520px}
.cre-hero-glow{position:absolute;inset:0;background:radial-gradient(60% 60% at 70% 30%,rgba(255,90,40,.22),transparent 65%),radial-gradient(50% 50% at 30% 80%,rgba(0,28,89,.18),transparent 70%);filter:blur(20px);pointer-events:none}
.cre-hero-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(0,28,89,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,28,89,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 65% 60% at 50% 50%,black 30%,transparent 100%);pointer-events:none}

/* Floating cards base */
.cre-card{position:absolute;background:#fff;border:1px solid rgba(0,28,89,.08);border-radius:14px;box-shadow:0 30px 60px -28px rgba(11,21,48,.35),0 8px 20px -12px rgba(255,90,40,.12),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(12px)}
.cre-card-main{top:8%;left:4%;width:78%;padding:0;animation:cre-float 8s ease-in-out infinite}
.cre-card-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(0,28,89,.06)}
.cre-card-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.cre-card-bar-label{margin-left:10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(11,21,48,.4);font-weight:600}
.cre-card-body{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:16px}
.cre-card-side{display:flex;flex-direction:column;gap:8px}
.cre-side-tile{display:block;height:16px;border-radius:4px;background:rgba(0,28,89,.05)}
.cre-side-active{background:linear-gradient(90deg,#FF1400,#FF6A35)}
.cre-card-main-area{min-width:0}
.cre-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.cre-kpi{padding:10px 12px;border-radius:8px;background:linear-gradient(180deg,#FAFBFD,#F2F4F9);border:1px solid rgba(0,28,89,.06);display:flex;flex-direction:column;gap:2px}
.cre-kpi-label{font-size:9px;letter-spacing:.22em;color:rgba(11,21,48,.45);font-weight:700;text-transform:uppercase}
.cre-kpi-val{font-size:18px;font-weight:800;color:#0B1530;letter-spacing:-.02em}
.cre-kpi-trend{font-size:10px;font-weight:700}
.cre-kpi-trend.up{color:#1F9D6A}
.cre-kpi-trend.down{color:#C44B2B}
.cre-chart{height:80px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,rgba(255,90,40,.04),transparent)}
.cre-chart svg{width:100%;height:100%;display:block}
.cre-rows{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.cre-row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:12px;padding:8px 10px;border-radius:6px;background:rgba(0,28,89,.025);font-size:11px;color:rgba(11,21,48,.8)}
.cre-row-name{font-weight:700}
.cre-row-stage{color:rgba(11,21,48,.55)}
.cre-row-amt{font-weight:800;color:#FF1400}

.cre-card-copilot{right:-2%;bottom:14%;width:52%;padding:16px;animation:cre-float 9s -2s ease-in-out infinite}
.cre-copilot-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cre-copilot-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#FF1400,#001C59);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:1px}
.cre-copilot-title{display:flex;flex-direction:column}
.cre-copilot-title strong{font-size:12px;color:#0B1530}
.cre-copilot-title span{font-size:9.5px;color:rgba(11,21,48,.5);letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.cre-copilot-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.2em;color:#1F9D6A}
.cre-copilot-live i{width:6px;height:6px;border-radius:50%;background:#1F9D6A;box-shadow:0 0 10px #1F9D6A;animation:cre-pulse 1.6s ease-in-out infinite;font-style:normal;display:inline-block}
.cre-copilot-msg{font-size:11.5px;line-height:1.5;padding:9px 12px;border-radius:10px;margin-bottom:8px;max-width:90%}
.cre-copilot-msg.user{background:#F2F4F9;color:rgba(11,21,48,.85)}
.cre-copilot-msg.bot{background:linear-gradient(135deg,rgba(255,20,0,.10),rgba(255,90,40,.06));color:#0B1530;margin-left:auto;border:1px solid rgba(255,20,0,.18)}
.cre-copilot-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cre-copilot-chips span{font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(0,28,89,.05);color:rgba(11,21,48,.7);border:1px solid rgba(0,28,89,.08)}
.cre-card-flow{left:2%;bottom:4%;width:38%;padding:14px;animation:cre-float 10s -4s ease-in-out infinite}
.cre-flow-label{font-size:9px;letter-spacing:.24em;color:rgba(11,21,48,.4);font-weight:800;margin-bottom:6px;text-transform:uppercase}
.cre-flow-svg{width:100%;height:auto;display:block}
.cre-card-badge{top:-2%;right:2%;padding:10px 14px;animation:cre-float 11s -6s ease-in-out infinite}
.cre-card-badge img{display:block;height:36px;width:auto}

/* ── Section head (shared) ───────────────────────────────── */
.cre-section-head{max-width:760px;margin:0 0 64px}
.cre-section-lede{font-size:16px;line-height:1.7;color:rgba(11,21,48,.65);margin-top:18px}

/* ── Capability grid ─────────────────────────────────────── */
.cre-cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cre-cap{background:linear-gradient(180deg,#ffffff 0%,#F8FAFD 100%);border:1px solid rgba(0,28,89,.08);border-radius:16px;padding:28px;box-shadow:0 20px 50px -30px rgba(11,21,48,.25);transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;display:flex;flex-direction:column;gap:24px}
.cre-cap:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(255,90,40,.25),0 20px 50px -30px rgba(11,21,48,.3);border-color:rgba(255,20,0,.25)}
.cre-cap-visual{aspect-ratio:16/11;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#F5F7FB 0%,#E9EDF5 100%);border:1px solid rgba(0,28,89,.05);display:grid;place-items:center}
.cv-svg{width:100%;height:100%;display:block}
.cre-cap-content{display:flex;flex-direction:column;gap:10px}
.cre-cap-num{font-size:11px;letter-spacing:.3em;font-weight:800;color:#FF1400;text-transform:uppercase}
.cre-cap-title{font-size:22px;font-weight:800;color:#0B1530;letter-spacing:-.02em;margin:0}
.cre-cap-body{font-size:14.5px;line-height:1.7;color:rgba(11,21,48,.65);margin:0}

/* ── Diff flow ───────────────────────────────────────────── */
.cre-diff-flow{display:flex;flex-direction:column;gap:100px;position:relative;z-index:1}
.cre-diff-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.cre-diff-block.is-reverse .cre-diff-text{order:2}
.cre-diff-block.is-reverse .cre-diff-visual{order:1}
.cre-diff-num{font-size:11px;letter-spacing:.32em;font-weight:800;color:#FF1400;display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.cre-diff-num::before{content:"";width:22px;height:1.5px;background:linear-gradient(90deg,#FF1400,#FF8A3D)}
.cre-diff-title{font-size:clamp(24px,2.6vw,36px);font-weight:800;color:#0B1530;letter-spacing:-.025em;line-height:1.15;margin:0 0 18px}
.cre-diff-body{font-size:15.5px;line-height:1.8;color:rgba(11,21,48,.7);margin:0 0 22px}
.cre-diff-tags{display:flex;gap:8px;flex-wrap:wrap}
.cre-diff-tag{font-size:11px;font-weight:700;letter-spacing:.06em;padding:7px 14px;border-radius:999px;background:#fff;color:#0B1530;border:1px solid rgba(11,21,48,.1);box-shadow:0 6px 16px -10px rgba(11,21,48,.2);transition:border-color .2s ease,color .2s ease}
.cre-diff-tag:hover{border-color:rgba(255,20,0,.45);color:#FF1400}
.cre-diff-visual{aspect-ratio:9/7;min-height:320px;background:radial-gradient(ellipse at top right,rgba(255,90,40,.16),transparent 65%),linear-gradient(180deg,#FFFFFF 0%,#F7F9FD 100%);border:1px solid rgba(11,21,48,.08);border-radius:18px;padding:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 70px -30px rgba(11,21,48,.18),0 14px 40px -20px rgba(255,90,40,.18)}
.cre-diff-visual-inner{width:100%;height:100%;display:grid;place-items:center}
.cre-diff-visual-inner svg{width:100%;height:100%;display:block}

/* ── Recognition grid ────────────────────────────────────── */
.cre-rec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cre-rec-card{background:#fff;border:1px solid rgba(0,28,89,.08);border-radius:14px;padding:24px;box-shadow:0 14px 40px -28px rgba(11,21,48,.25);display:flex;flex-direction:column;gap:12px;transition:transform .35s ease,box-shadow .35s ease}
.cre-rec-card:hover{transform:translateY(-3px);box-shadow:0 22px 60px -28px rgba(255,90,40,.3)}
.cre-rec-head{display:flex;justify-content:space-between;align-items:center}
.cre-rec-firm{font-size:12px;font-weight:800;color:#001C59;letter-spacing:.06em}
.cre-rec-label{font-size:9.5px;letter-spacing:.22em;color:rgba(11,21,48,.45);font-weight:700;text-transform:uppercase}
.cre-rec-badge{font-size:13px;font-weight:800;letter-spacing:.1em;background:linear-gradient(95deg,#FF1400,#FF6A35);-webkit-background-clip:text;background-clip:text;color:transparent;padding:6px 0;border-top:1px solid rgba(0,28,89,.08);border-bottom:1px solid rgba(0,28,89,.08)}
.cre-rec-note{font-size:13px;color:rgba(11,21,48,.7);font-weight:600}
.cre-rec-stars{display:flex;gap:3px;margin-top:auto}

/* ── Final CTA ───────────────────────────────────────────── */
.cre-final-wrap{text-align:center;max-width:820px;margin:0 auto;padding:40px 0}
.cre-final-wrap .cre-eyebrow{justify-content:center}
.cre-final-title{margin-bottom:32px}
.cre-final-body{font-size:17px;line-height:1.7;color:rgba(255,255,255,.75);margin:0 0 16px}
.cre-final-body-dim{color:rgba(255,255,255,.55)}
.cre-final-actions{margin-top:44px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.cre-cta{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(95deg,#FF1400 0%,#FF6A35 100%);color:#fff;padding:16px 32px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.04em;text-decoration:none;box-shadow:0 20px 50px -18px rgba(255,20,0,.55);transition:transform .3s ease,box-shadow .3s ease}
.cre-cta span{transition:transform .3s ease;display:inline-block}
.cre-cta:hover{transform:translateY(-2px);box-shadow:0 26px 60px -18px rgba(255,20,0,.7)}
.cre-cta:hover span{transform:translateX(4px)}
.cre-final-partner{display:inline-flex;align-items:center;gap:12px;padding:10px 20px;background:rgba(255,255,255,.95);border-radius:10px;box-shadow:0 14px 40px -20px rgba(255,255,255,.25)}
.cre-final-partner img{display:block;height:32px;width:auto}
.cre-final-partner-text{display:flex;flex-direction:column;line-height:1.2}
.cre-final-partner-name{font-size:13px;font-weight:800;color:#0B1530;letter-spacing:-.01em}
.cre-final-partner-level{font-size:10px;font-weight:600;color:rgba(11,21,48,.5);letter-spacing:.05em}
.cre-final-foot{margin-top:64px;display:flex;align-items:center;justify-content:center;gap:18px;padding-top:32px;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.cre-foot-logo{height:22px;width:auto;opacity:.85}
.cre-foot-sep{width:1px;height:18px;background:rgba(255,255,255,.2)}
.cre-foot-mark{font-size:12px;font-weight:800;letter-spacing:.32em;color:rgba(255,255,255,.85)}
.cre-foot-tag{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;font-weight:600}

/* ── Scroll reveal ───────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].is-in{opacity:1;transform:translateY(0)}

/* ── Animations ──────────────────────────────────────────── */
@keyframes cre-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes cre-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
@keyframes cv-pop{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-3px);opacity:.9}}
@keyframes cv-dash{to{stroke-dashoffset:-40}}
@keyframes cv-rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes cv-orbit{to{transform:rotate(360deg)}}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1024px){
    .cre-intro-grid{grid-template-columns:1fr;gap:56px}
    .cre-cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cre-rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cre-diff-block{grid-template-columns:1fr;gap:36px}
    .cre-diff-block.is-reverse .cre-diff-text,
    .cre-diff-block.is-reverse .cre-diff-visual{order:0}
    .cre-diff-visual{min-height:280px}
}

@media(max-width:640px){
    .cre-section{padding:80px 0}
    .cre-section.cre-section-intro{padding-top:calc(80px + 64px)}
    .cre-shell{padding:0 20px}
    .cre-cap-grid{grid-template-columns:1fr}
    .cre-rec-grid{grid-template-columns:1fr}
    .cre-hero-stage{min-height:460px}
    .cre-card-main{width:92%;left:4%}
    .cre-card-copilot{right:2%;width:78%;bottom:8%}
    .cre-card-flow{width:62%}
    .cre-card-badge{right:4%;top:0}
    .cre-final-actions{flex-direction:column;gap:20px}
}

@media(prefers-reduced-motion:reduce){
    .cre-card,.cre-copilot-live i,[style*="animation"]{animation:none!important}
    [data-reveal]{opacity:1;transform:none;transition:none}
}