/* Modern homepage sections — hero intentionally lives in home-hero.css */
.home-modern {
    position: relative;
    overflow: hidden;
}

.home-modern::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .65;
    background:
        radial-gradient(circle at 12% 15%, rgba(49,104,255,.07), transparent 22%),
        radial-gradient(circle at 86% 43%, rgba(139,92,246,.08), transparent 24%),
        radial-gradient(circle at 20% 78%, rgba(168,85,247,.06), transparent 24%);
}

.home-section-wrap {
    position: relative;
    z-index: 1;
    width: min(1240px, calc(100% - 2rem));
    margin-inline: auto;
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6d36f2;
}

.home-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, #3168ff, #8b5cf6);
}

.dark .home-eyebrow { color: #bda4ff; }

.home-heading {
    margin-top: .9rem;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.055em;
    font-weight: 800;
}

.home-copy {
    color: var(--web7-muted);
    line-height: 1.8;
}

/* Capabilities bento */
.capabilities-section { padding: 7.5rem 0 6.5rem; }

.capabilities-head {
    display: grid;
    grid-template-columns: 1.1fr .7fr;
    gap: 3rem;
    align-items: end;
}

.capability-grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 1rem;
}

.capability-card {
    position: relative;
    min-height: 270px;
    grid-column: span 4;
    overflow: hidden;
    border: 1px solid var(--web7-line);
    border-radius: 30px;
    padding: 1.55rem;
    background: rgba(255,255,255,.72);
    box-shadow: 0 24px 70px rgba(64,36,112,.07);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}

.dark .capability-card {
    background: rgba(18,6,34,.76);
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
}

.capability-card:nth-child(1),
.capability-card:nth-child(4) { grid-column: span 6; }

.capability-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(112,66,241,.18), transparent 67%);
    transition: transform .5s ease, opacity .4s ease;
}

.capability-card::after {
    content: "";
    position: absolute;
    left: 1.55rem;
    right: 1.55rem;
    bottom: 0;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg,#3168ff,#7c3aed,#a855f7);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}

.capability-card:hover {
    transform: translateY(-7px);
    border-color: rgba(124,58,237,.28);
    box-shadow: 0 30px 90px rgba(79,40,150,.13);
}
.capability-card:hover::before { transform: scale(1.22); }
.capability-card:hover::after { transform: scaleX(1); }

.capability-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.capability-icon {
    width: 52px;
    height: 52px;
    display:grid;
    place-items:center;
    border-radius: 17px;
    color:#7040ef;
    background: linear-gradient(145deg, rgba(49,104,255,.11), rgba(139,92,246,.14));
    border:1px solid rgba(124,58,237,.10);
}
.dark .capability-icon { color:#c2a8ff; background:linear-gradient(145deg,rgba(49,104,255,.13),rgba(139,92,246,.19)); }
.capability-number { font: 700 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--web7-muted); }
.capability-card h3 { margin-top:1.6rem; font-size:1.35rem; font-weight:800; letter-spacing:-.035em; }
.capability-card p { margin-top:.65rem; max-width:34rem; color:var(--web7-muted); font-size:.91rem; line-height:1.75; }
.capability-link { position:absolute; left:1.55rem; bottom:1.45rem; display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:800; color:#6d36f2; }
.dark .capability-link { color:#bda4ff; }
.capability-link span { transition:transform .25s ease; }
.capability-card:hover .capability-link span { transform:translateX(5px); }

/* Product thinking / code panel */
.product-section { padding: 6rem 0; }
.product-shell {
    display:grid;
    grid-template-columns: .92fr 1.08fr;
    gap:1.2rem;
    border:1px solid var(--web7-line);
    border-radius:36px;
    padding:1rem;
    background:rgba(255,255,255,.46);
    box-shadow:0 30px 90px rgba(64,36,112,.07);
}
.dark .product-shell { background:rgba(12,3,24,.62); box-shadow:0 30px 90px rgba(0,0,0,.25); }

.product-copy-panel { padding:clamp(2rem,5vw,4.3rem); display:flex; flex-direction:column; justify-content:center; }
.product-points { margin-top:2rem; display:grid; gap:.8rem; }
.product-point { display:flex; gap:.85rem; align-items:flex-start; padding:.9rem 0; border-bottom:1px solid var(--web7-line); }
.product-point:last-child{border-bottom:0}
.product-check { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:rgba(109,54,242,.1); color:#6d36f2; font-weight:900; }
.dark .product-check { color:#c4a8ff; background:rgba(139,92,246,.14); }
.product-point strong { display:block; font-size:.94rem; }
.product-point small { display:block; margin-top:.2rem; color:var(--web7-muted); line-height:1.5; }

.dev-window {
    min-height:520px;
    overflow:hidden;
    border-radius:28px;
    color:#eae5ff;
    background:
      radial-gradient(circle at 80% 20%, rgba(120,64,255,.22), transparent 32%),
      linear-gradient(145deg,#10031f,#090112 72%);
    border:1px solid rgba(179,145,255,.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.dev-window-bar { height:54px; display:flex; align-items:center; gap:.45rem; padding:0 1.15rem; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); }
.dev-dot { width:9px;height:9px;border-radius:50%;background:#5b5367; }
.dev-window-title { margin-left:.7rem;font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9e92ac; }
.dev-window-body { padding:clamp(1.5rem,3vw,2.5rem); font:500 clamp(.76rem,1.2vw,.9rem)/1.9 ui-monospace,SFMono-Regular,Menlo,monospace; }
.code-row { display:flex; }
.code-ln { flex:0 0 34px;color:#564d63;user-select:none; }
.code-purple{color:#bc8cff}.code-blue{color:#6ea8ff}.code-green{color:#75d8a4}.code-muted{color:#83778f}.code-white{color:#eee9f5}
.dev-metric-grid { margin-top:2rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.dev-metric { border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1rem; background:rgba(255,255,255,.035); }
.dev-metric b { font-size:1.05rem;color:#fff; }.dev-metric span{display:block;margin-top:.25rem;color:#8f849b;font-size:.7rem;}

/* Process */
.process-section { padding: 6.5rem 0; }
.process-head { max-width:760px; }
.process-grid { margin-top:3rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.process-card { position:relative; min-height:240px; padding:1.5rem; border-top:1px solid var(--web7-line); }
.process-card::before { content:""; position:absolute; left:0; top:-1px; width:44px;height:2px;background:linear-gradient(90deg,#3168ff,#8b5cf6); }
.process-index { font:700 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7c3aed; }
.dark .process-index{color:#bda4ff}
.process-card h3{margin-top:2.2rem;font-size:1.18rem;font-weight:800;letter-spacing:-.025em}.process-card p{margin-top:.7rem;color:var(--web7-muted);font-size:.88rem;line-height:1.7}

/* Work */
.work-section { padding:6.5rem 0 7rem; }
.work-head { display:flex; justify-content:space-between; gap:2rem; align-items:end; }
.work-grid { margin-top:3rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.work-card { position:relative; overflow:hidden; min-height:420px; border-radius:30px; border:1px solid var(--web7-line); background:rgba(255,255,255,.65); transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease; }
.dark .work-card{background:rgba(17,5,31,.72)}
.work-card:hover{transform:translateY(-6px);box-shadow:0 30px 80px rgba(66,37,121,.12)}
.work-visual { height:235px; position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(49,104,255,.16),rgba(124,58,237,.16) 50%,rgba(168,85,247,.10)); }
.work-browser { position:absolute; left:7%; right:7%; top:18%; bottom:-8%; border-radius:18px 18px 0 0; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.72); box-shadow:0 24px 50px rgba(47,26,91,.14); overflow:hidden; }
.dark .work-browser{background:rgba(9,2,18,.70);border-color:rgba(255,255,255,.09)}
.work-browser-bar{height:30px;border-bottom:1px solid var(--web7-line);display:flex;align-items:center;gap:5px;padding:0 10px}.work-browser-bar i{width:5px;height:5px;border-radius:50%;background:#8b7d9b}
.work-browser-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:8px;padding:12px;height:calc(100% - 30px)}.work-browser-grid span{border-radius:9px;background:rgba(124,58,237,.09)}.work-browser-grid span:nth-child(2){background:linear-gradient(145deg,rgba(49,104,255,.13),rgba(139,92,246,.15))}
.work-body{padding:1.5rem}.work-category{font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#6d36f2}.dark .work-category{color:#bca3ff}.work-title{margin-top:.55rem;font-size:1.35rem;font-weight:800;letter-spacing:-.035em}.work-desc{margin-top:.55rem;color:var(--web7-muted);font-size:.88rem;line-height:1.65}.work-arrow{position:absolute;right:1.5rem;bottom:1.5rem;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--web7-line);transition:transform .25s ease,background .25s ease}.work-card:hover .work-arrow{transform:rotate(-35deg);background:rgba(124,58,237,.09)}

/* Tech marquee */
.tech-section { border-block:1px solid var(--web7-line); padding:1.3rem 0; overflow:hidden; background:rgba(255,255,255,.38); }
.dark .tech-section{background:rgba(255,255,255,.018)}
.tech-track{display:flex;width:max-content;gap:.7rem;animation:web7Marquee 26s linear infinite}.tech-item{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border-radius:999px;border:1px solid var(--web7-line);background:rgba(255,255,255,.62);font:700 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}.dark .tech-item{background:rgba(255,255,255,.035)}.tech-item::before{content:"";width:5px;height:5px;border-radius:50%;background:linear-gradient(#3168ff,#8b5cf6)}
@keyframes web7Marquee{to{transform:translateX(-50%)}}
.tech-section:hover .tech-track{animation-play-state:paused}

/* CTA */
.home-cta-section{padding:7rem 0 7.5rem}.home-cta{position:relative;overflow:hidden;border-radius:36px;padding:clamp(2.4rem,6vw,5rem);background:linear-gradient(125deg,#15102d,#2a1051 52%,#401a72);color:#fff;box-shadow:0 35px 100px rgba(50,15,100,.22)}.home-cta::before{content:"";position:absolute;width:430px;height:430px;right:-130px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(151,104,255,.55),transparent 65%)}.home-cta::after{content:"";position:absolute;inset:0;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:38px 38px;mask-image:linear-gradient(to right,transparent 15%,#000 100%)}.home-cta-content{position:relative;z-index:2;max-width:760px}.home-cta h2{font-size:clamp(2.35rem,5vw,4.6rem);line-height:.98;letter-spacing:-.06em;font-weight:800}.home-cta p{margin-top:1.25rem;max-width:600px;color:#cfc5da;line-height:1.8}.home-cta-actions{margin-top:2rem;display:flex;gap:.8rem;flex-wrap:wrap}.home-cta-primary,.home-cta-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;padding:.8rem 1.45rem;font-size:.84rem;font-weight:800}.home-cta-primary{background:#fff;color:#160829}.home-cta-secondary{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.055);color:#fff}

/* Scroll motion */
[data-home-reveal]{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
[data-home-reveal].is-visible{opacity:1;transform:none}
[data-home-reveal][data-delay="1"]{transition-delay:.08s}[data-home-reveal][data-delay="2"]{transition-delay:.16s}[data-home-reveal][data-delay="3"]{transition-delay:.24s}

@media(max-width:960px){
 .capabilities-head,.product-shell{grid-template-columns:1fr}.capability-card,.capability-card:nth-child(1),.capability-card:nth-child(4){grid-column:span 6}.process-grid{grid-template-columns:repeat(2,1fr)}.work-grid{grid-template-columns:1fr}.dev-window{min-height:430px}.work-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
 .home-section-wrap{width:min(100% - 1.2rem,1240px)}.capabilities-section,.process-section,.work-section,.home-cta-section{padding-block:4.5rem}.product-section{padding-block:4rem}.capabilities-head{gap:1.3rem}.capability-grid{grid-template-columns:1fr}.capability-card,.capability-card:nth-child(1),.capability-card:nth-child(4){grid-column:auto;min-height:250px}.process-grid{grid-template-columns:1fr}.process-card{min-height:auto}.product-shell{border-radius:26px}.product-copy-panel{padding:1.5rem}.dev-window{min-height:390px;border-radius:22px}.dev-window-body{padding:1.2rem}.home-cta{border-radius:28px}.work-card{min-height:390px}.work-visual{height:210px}
}
@media(prefers-reduced-motion:reduce){.tech-track{animation:none}[data-home-reveal]{opacity:1;transform:none;transition:none}.capability-card,.work-card{transition:none}}