/* Clover Development page — overrides & additions */

/* Hero: 2-column grid on .container (original clover layout) */
.page-hero .container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.page-hero .hero-content{display:block}
.page-hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem)}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}

/* Floating tags — pull inward so they aren't clipped by overflow:hidden */
.page-hero .floating-tag.t1{top:8px;right:8px}
.page-hero .floating-tag.t2{bottom:-4px;left:8px}

/* Terminal code block */
.terminal{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.08)}
.terminal-bar{display:flex;align-items:center;gap:8px;padding:14px 20px;background:var(--gray-100);border-bottom:1px solid var(--border)}
.terminal-dot{width:10px;height:10px;border-radius:50%}
.terminal-dot.r{background:#ff5f57}
.terminal-dot.y{background:#ffbd2e}
.terminal-dot.g{background:#28c840}
.terminal-title{margin-left:12px;font-size:.75rem;color:var(--gray-600);font-weight:500}
.terminal-body{padding:24px;font-family:'DM Sans',monospace;font-size:.82rem;line-height:1.8;color:var(--gray-600);background:var(--white)}
.terminal-body .comment{color:#b0b8c8}
.terminal-body .keyword{color:var(--teal)}
.terminal-body .string{color:#a855f7}
.terminal-body .method{color:#3b82f6}

/* Stats strip */
.stats-strip{padding:48px 0;position:relative}
.stats-strip::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.5}
.stats-strip .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* Cards (Why Build on Clover / Capabilities) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:56px}
.card{background:rgba(255,255,255,.5);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(45,212,168,.3);box-shadow:0 12px 32px rgba(0,0,0,.06)}
.card .material-icons-outlined.card-ico{color:var(--teal);font-size:1.6rem;margin-bottom:16px;display:block}
.card h4{font-size:1rem;font-weight:600;margin-bottom:10px;color:var(--navy)}
.card p{font-size:.85rem;color:var(--gray-400);line-height:1.6}

/* Section spacing */
.section{padding:100px 0}

/* Ecosystem / bar chart */
.clover-ecosystem{padding:100px 0}
.eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:48px}
.chart-wrapper{background:rgba(255,255,255,.6);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.chart-heading{font-size:.75rem;font-weight:600;color:var(--gray-400);letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px}
.bar-chart{display:flex;flex-direction:column;gap:20px}
.bar-item{display:grid;grid-template-columns:100px 1fr 56px;align-items:center;gap:16px}
.bar-label{font-size:.82rem;color:var(--gray-400);text-align:right;font-weight:500}
.bar-track{height:32px;background:rgba(2,14,40,.04);border-radius:8px;overflow:hidden}
.bar-fill{height:100%;border-radius:8px;transition:width 1.2s cubic-bezier(.22,1,.36,1);width:0}
.bar-fill.clover{background:linear-gradient(90deg,#43b02a,var(--teal))}
.bar-fill.toast{background:linear-gradient(90deg,#ff6b35,#ffa366)}
.bar-fill.square{background:linear-gradient(90deg,#3693ff,#66b2ff)}
.bar-fill.others{background:linear-gradient(90deg,var(--gray-400),#b0b8c8)}
.bar-value{font-size:.82rem;font-weight:700;color:var(--navy)}
.chart-source{font-size:.72rem;color:var(--gray-400);margin-top:16px;text-align:center}
.eco-details h3{font-family:var(--font-display);font-size:1.8rem;font-weight:600;color:var(--navy);margin-bottom:20px;line-height:1.3}
.eco-details p{color:var(--gray-400);line-height:1.75;margin-bottom:16px;font-size:.95rem}
.eco-stat-row{display:flex;gap:32px;margin-top:32px}
.eco-stat{text-align:center}
.eco-stat .num{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--teal)}
.eco-stat .lbl{font-size:.72rem;color:var(--gray-400);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}

/* Use Cases */
.use-cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.use-case{background:rgba(255,255,255,.5);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.use-case:hover{transform:translateY(-4px);border-color:rgba(45,212,168,.3);box-shadow:0 12px 32px rgba(0,0,0,.06)}
.use-case-header{padding:28px 28px 0;display:flex;align-items:center;gap:14px}
.use-case-icon{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.use-case-icon .material-icons-outlined{color:var(--teal);font-size:1.3rem}
.use-case-header h4{font-size:1rem;font-weight:600;color:var(--navy)}
.use-case-body{padding:16px 28px 28px}
.use-case-body p{font-size:.85rem;color:var(--gray-400);line-height:1.6}
.use-case-tag{display:inline-block;margin-top:12px;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);background:var(--teal-soft);padding:4px 12px;border-radius:999px}

/* Experience / Timeline */
.clover-experience{padding:100px 0;position:relative;overflow:hidden}
.clover-experience::before{content:'';position:absolute;bottom:-20%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(45,212,168,.06) 0%,transparent 70%);pointer-events:none}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-top:48px}
.exp-timeline{display:flex;flex-direction:column;gap:0}
.timeline-item{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:28px 0;border-bottom:1px solid rgba(228,231,236,.5)}
.timeline-item:last-child{border-bottom:none}
.timeline-dot-col{display:flex;flex-direction:column;align-items:center}
.timeline-dot{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.8);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,border-color .3s}
.timeline-item:hover .timeline-dot{background:var(--teal);border-color:var(--teal)}
.timeline-dot .material-icons-outlined{font-size:1.1rem;color:var(--teal);transition:color .3s}
.timeline-item:hover .timeline-dot .material-icons-outlined{color:var(--navy)}
.timeline-connector{width:2px;background:rgba(228,231,236,.5);flex:1;min-height:12px;margin-top:8px}
.timeline-item:last-child .timeline-connector{display:none}
.timeline-content h4{font-size:.95rem;font-weight:600;color:var(--navy);margin-bottom:4px}
.timeline-content p{font-size:.85rem;color:var(--gray-400);line-height:1.6}
.exp-right h3{font-family:var(--font-display);font-size:1.8rem;font-weight:600;color:var(--navy);margin-bottom:20px;line-height:1.3}
.exp-right p{color:var(--gray-400);line-height:1.75;margin-bottom:16px;font-size:.95rem}
.exp-highlight{background:rgba(45,212,168,.06);border:1px solid rgba(45,212,168,.15);border-radius:var(--radius);padding:24px;margin-top:24px}
.exp-highlight .big{font-family:var(--font-display);font-size:2.4rem;font-weight:700;color:var(--teal)}
.exp-highlight .desc{font-size:.88rem;color:#3d4455;margin-top:4px;line-height:1.5}

/* Capabilities override */
.capabilities .card-grid{grid-template-columns:repeat(3,1fr)}

/* Resources */
.resources-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.resource-card{background:rgba(255,255,255,.5);border:1px solid var(--border);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s}
.resource-card:hover{transform:translateY(-4px);border-color:rgba(45,212,168,.3);box-shadow:0 12px 32px rgba(0,0,0,.06)}
.resource-card h4{font-size:1.05rem;font-weight:600;margin-bottom:10px;color:var(--navy);display:flex;align-items:center;gap:10px}
.resource-card h4 .material-icons-outlined{color:var(--teal);font-size:1.2rem}
.resource-card p{font-size:.85rem;color:var(--gray-400);line-height:1.6;flex:1}
.resource-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.85rem;font-weight:600;color:var(--teal);transition:gap .2s}
.resource-link:hover{gap:10px}
.resource-link .material-icons-outlined{font-size:1rem}

/* Responsive */
@media(max-width:1024px){
  .page-hero .container{grid-template-columns:1fr}
  .page-hero .hero-visual{display:none}
  .eco-grid,.exp-grid{grid-template-columns:1fr}
  .use-cases-grid{grid-template-columns:1fr 1fr}
  .capabilities .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .section,.clover-ecosystem,.clover-experience{padding:72px 0}
  .stats-strip .stats-row{grid-template-columns:1fr 1fr;gap:16px}
  .use-cases-grid,.resources-grid,.capabilities .card-grid{grid-template-columns:1fr}
  .eco-stat-row{flex-wrap:wrap}
}