/**
 * Homepage hero + stats — matches html/style.css (Section 1).
 * Uses backend design tokens (--oc365-*).
 */

/* Buttons (HTML .btn — not pill style) */
.oc365-html-home .hero .btn,
.oc365-html-home .stats-bar .btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 20px;
font-family:var(--oc365-font-heading);
font-weight:600;
font-size:0.95rem;
line-height:1.2;
border-radius:6px;
transition:0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor:pointer;
border:1px solid transparent;
text-decoration:none;
white-space:nowrap;
}

.oc365-html-home .hero .btn-primary{
background-color:var(--oc365-color-primary, #0f172a);
color:var(--oc365-btn-fg, #fff);
}

.oc365-html-home .hero .btn-primary:hover{
background-color:var(--oc365-color-primary-hover, #1e293b);
color:var(--oc365-btn-fg, #fff);
transform:translateY(-1px);
box-shadow:var(--oc365-shadow-md);
text-decoration:none;
}

.oc365-html-home .hero .btn-primary:active{
transform:scale(0.98);
}

.oc365-html-home .hero .btn-secondary{
background-color:var(--oc365-color-card, #fff);
color:var(--oc365-color-text, #111827);
border-color:var(--oc365-color-border, #e5e7eb);
}

.oc365-html-home .hero .btn-secondary:hover{
border-color:var(--oc365-color-text-muted, #9ca3af);
background-color:#fcfcfc;
color:var(--oc365-color-text, #111827);
transform:translateY(-1px);
box-shadow:var(--oc365-shadow-sm);
text-decoration:none;
}

.oc365-html-home .hero .btn-secondary:active{
transform:scale(0.98);
}

/* Hero section */
.oc365-html-home .hero{
padding:80px 0;
background-color:var(--oc365-color-card, #fff);
position:relative;
overflow:hidden;
border-bottom:1px solid var(--oc365-color-border, #e5e7eb);
text-align:left;
}

.oc365-html-home .hero::before{
content:none;
}

.oc365-html-home .hero .container{
max-width:1280px;
padding-left:24px;
padding-right:24px;
}

.oc365-html-home .hero-grid{
display:grid;
grid-template-columns:1.2fr 0.8fr;
align-items:center;
gap:40px;
}

.oc365-html-home .hero--typographic .hero-grid{
grid-template-columns:1fr;
max-width:820px;
}

.oc365-html-home .hero--typographic .hero-description{
max-width:640px;
}

.oc365-html-home .hero-content{
z-index:2;
position:relative;
max-width:none;
margin:0;
}

.oc365-html-home .hero-overline{
display:inline-block;
font-family:var(--oc365-font-body);
font-size:0.85rem;
text-transform:uppercase;
letter-spacing:0.1em;
font-weight:700;
color:var(--oc365-color-text-muted, #6b7280);
margin:0 0 16px;
line-height:1.4;
}

.oc365-html-home .hero-title{
font-family:var(--oc365-font-heading);
font-size:3.25rem;
font-weight:800;
color:var(--oc365-color-text, #111827);
line-height:1.15;
letter-spacing:-0.02em;
margin:0 0 24px;
max-width:none;
}

.oc365-html-home .hero-description{
font-family:var(--oc365-font-body);
font-size:1.15rem;
font-weight:400;
line-height:1.6;
color:var(--oc365-color-text-muted, #6b7280);
max-width:580px;
margin:0 0 36px;
}

.oc365-html-home .hero-actions{
display:flex;
flex-wrap:wrap;
gap:16px;
justify-content:flex-start;
align-items:center;
}

.oc365-html-home .hero-image-wrapper{
position:relative;
height:100%;
display:flex;
justify-content:flex-end;
align-items:center;
}

.oc365-html-home .hero-image{
display:block;
max-height:460px;
width:auto;
max-width:100%;
border-radius:16px;
object-fit:cover;
box-shadow:var(--oc365-shadow-lg);
animation:oc365-hero-float 6s ease-in-out infinite;
}

.oc365-html-home .hero-shape{
display:none;
}

@keyframes oc365-hero-float{
0%{transform:translateY(0)}
50%{transform:translateY(-8px)}
100%{transform:translateY(0)}
}

/* Stats bar */
.oc365-html-home .stats-bar{
padding:32px 0;
background-color:var(--oc365-color-card, #fff);
border-bottom:1px solid var(--oc365-color-border, #e5e7eb);
}

.oc365-html-home .stats-bar--hidden{
display:none !important;
}

.oc365-html-home .stats-bar .container{
max-width:1280px;
padding-left:24px;
padding-right:24px;
}

.oc365-html-home .stats-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:24px;
}

.oc365-html-home .stat-card{
display:flex;
align-items:center;
gap:16px;
}

.oc365-html-home .stat-icon{
width:48px;
height:48px;
border-radius:6px;
background-color:var(--oc365-color-bg, #fafafa);
display:flex;
align-items:center;
justify-content:center;
color:var(--oc365-color-text, #111827);
flex-shrink:0;
}

.oc365-html-home .stat-icon svg{
display:block;
}

.oc365-html-home .stat-info{
display:flex;
flex-direction:column;
}

.oc365-html-home .stat-number{
font-family:var(--oc365-font-heading);
font-size:1.5rem;
font-weight:800;
color:var(--oc365-color-text, #111827);
line-height:1.1;
}

.oc365-html-home .stat-label{
font-size:0.85rem;
color:var(--oc365-color-text-muted, #6b7280);
font-weight:500;
line-height:1.4;
}

/* Tablet */
@media (max-width:1024px){
.oc365-html-home .hero-grid{
grid-template-columns:1fr;
gap:48px;
text-align:center;
}

.oc365-html-home .hero-content{
display:flex;
flex-direction:column;
align-items:center;
}

.oc365-html-home .hero-description{
margin-left:auto;
margin-right:auto;
}

.oc365-html-home .hero-actions{
justify-content:center;
}

.oc365-html-home .hero-image-wrapper{
justify-content:center;
}

.oc365-html-home .hero-title{
font-size:2.75rem;
}

.oc365-html-home .stats-grid{
grid-template-columns:repeat(2, 1fr);
gap:28px;
}
}

/* Mobile */
@media (max-width:768px){
.oc365-html-home .hero{
padding:60px 0;
}

.oc365-html-home .hero-title{
font-size:2.25rem;
margin-bottom:20px;
}

.oc365-html-home .hero-description{
font-size:1.05rem;
margin-bottom:28px;
}

.oc365-html-home .hero-actions{
flex-direction:column;
width:100%;
gap:12px;
}

.oc365-html-home .hero-actions .btn{
width:100%;
max-width:320px;
}

.oc365-html-home .stats-grid{
grid-template-columns:1fr;
gap:20px;
}
}

@media (max-width:480px){
.oc365-html-home .hero-title{
font-size:1.85rem;
}
}

/* Scroll reveal (html/style.css) */
.reveal{
opacity:0;
transform:translateY(30px);
transition:opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change:transform, opacity;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

.oc365-html-home .hero-image-wrapper.reveal{
transition-delay:0.15s;
}

.reveal-stagger > *{
opacity:0;
transform:translateY(20px);
transition:opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
will-change:transform, opacity;
}

.reveal-stagger.active > *{
opacity:1;
transform:translateY(0);
}

.reveal-stagger.active > *:nth-child(1){transition-delay:0.05s}
.reveal-stagger.active > *:nth-child(2){transition-delay:0.12s}
.reveal-stagger.active > *:nth-child(3){transition-delay:0.19s}
.reveal-stagger.active > *:nth-child(4){transition-delay:0.26s}
.reveal-stagger.active > *:nth-child(5){transition-delay:0.33s}
.reveal-stagger.active > *:nth-child(6){transition-delay:0.4s}
.reveal-stagger.active > *:nth-child(7){transition-delay:0.47s}
.reveal-stagger.active > *:nth-child(8){transition-delay:0.54s}
.reveal-stagger.active > *:nth-child(9){transition-delay:0.61s}