/* ===== Inner pages (AI solutions + Website Designing) — loads after dreamtree-home.css ===== */

/* Breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:#9fb0cb;margin-bottom:18px}
.crumbs a{color:#cfd9ea}
.crumbs a:hover{color:var(--amber)}
.crumbs b{color:#fff;font-weight:600}
.crumbs span{opacity:.5}

/* Hero extras */
.stats.stats-3{grid-template-columns:repeat(3,1fr);max-width:520px}
.stats.stats-3 b{font-size:1.25rem}
.page-hero .hero-visual{padding:20px 0 34px}
.vis-card{position:relative;background:#fff;color:var(--text);border-radius:18px;padding:18px;box-shadow:0 40px 70px rgba(0,0,0,.4);transform:rotate(-1.5deg)}

/* Hero visual: video player */
.vp-screen{position:relative;aspect-ratio:16/9;border-radius:12px;background:radial-gradient(circle at 30% 30%,#2a63b8,var(--navy) 70%);display:grid;place-items:center;overflow:hidden}
.vp-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(245,158,11,.18),transparent 55%)}
.vp-play{position:relative;z-index:1;width:60px;height:60px;border-radius:50%;background:var(--amber);color:var(--navy-2);display:grid;place-items:center;font-size:1.3rem;padding-left:4px;box-shadow:0 10px 30px rgba(245,158,11,.5)}
.vp-badge{position:absolute;z-index:1;left:12px;top:12px;background:rgba(255,255,255,.14);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.12em;padding:5px 10px;border-radius:999px}
.vp-bar{height:6px;border-radius:6px;background:#e6ecf5;margin:14px 0 10px;overflow:hidden}
.vp-bar span{display:block;height:100%;background:var(--amber);border-radius:6px}
.vp-meta{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--muted)}
.vp-meta b{color:var(--navy)}

/* Hero visual: autopilot social */
.vs-row{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--light)}
.vs-ic{flex:none;width:40px;height:40px;border-radius:10px;background:#fff4de;display:grid;place-items:center;font-size:1.2rem}
.vs-row small{display:block;font-size:.65rem;letter-spacing:.12em;color:var(--amber);font-weight:800}
.vs-row b{font-size:.9rem;color:var(--navy);line-height:1.3}
.vs-img{margin:12px 0;aspect-ratio:16/8;border-radius:12px;background:linear-gradient(135deg,var(--navy),#2a63b8);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.9rem}
.vs-posts{display:flex;flex-wrap:wrap;gap:8px}
.vs-posts .p{padding:7px 14px;border-radius:999px;color:#fff;font-weight:700;font-size:.78rem}
.vs-posts .fb{background:#1877f2}
.vs-posts .ig{background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888)}
.vs-posts .in{background:#0a66c2}
.vs-posts .yt{background:#e62117}
.vs-time{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.82rem;color:var(--muted);font-weight:600}
.vs-time i{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2)}

/* Hero visual: youtube queue */
.vq{display:grid;gap:8px;margin-top:14px}
.vq li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--light);font-size:.82rem;color:var(--navy);font-weight:600}
.vq .st{font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.04em}
.st.done{background:#dcfce7;color:#15803d}
.st.sched{background:#fff4de;color:#b45309}
.st.make{background:#dbeafe;color:#1d4ed8}

/* Hero visual: chatbot */
.chat{padding:0;overflow:hidden}
.ch-head{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--navy);color:#fff}
.ch-av{width:38px;height:38px;border-radius:50%;background:var(--amber);display:grid;place-items:center;font-size:1.2rem}
.ch-head b{display:block;font-size:.92rem}
.ch-head small{color:#8fe3a8;font-size:.72rem}
.ch-body{padding:16px;display:grid;gap:10px;background:#f7f9fc}
.bub{max-width:82%;padding:10px 14px;border-radius:14px;font-size:.85rem;line-height:1.45}
.bub.in{background:#fff;border:1px solid var(--line);border-top-left-radius:4px;color:var(--text)}
.bub.out{background:var(--amber);color:var(--navy-2);font-weight:600;border-top-right-radius:4px;justify-self:end}
.ch-input{margin:0 16px 16px;padding:12px 16px;border-radius:999px;border:1.5px solid var(--line);color:var(--muted);font-size:.85rem;background:#fff}

/* Hero visual: website preview */
.sp-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 4px 12px;font-size:.7rem;color:var(--muted)}
.sp-nav strong{color:var(--navy);letter-spacing:.08em;font-size:.75rem}
.sp-hero small{display:block;color:var(--amber);font-weight:700;letter-spacing:.12em;font-size:.62rem;margin-bottom:8px}
.sp-hero h3{color:#fff;font-size:1.25rem;line-height:1.2;margin-bottom:6px}
.sp-hero p{color:#bcc9de;font-size:.78rem}
.sp-btn{display:inline-block;margin-top:12px;background:var(--amber);color:var(--navy-2);font-weight:700;font-size:.7rem;padding:7px 14px;border-radius:999px}

/* Flow (how it works) */
.flow{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:26px;counter-reset:f;margin-top:10px}
.flow li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 20px 24px;text-align:center;counter-increment:f}
.flow li::before{content:counter(f);position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--amber);color:var(--navy-2);font-weight:800;font-size:.85rem;display:grid;place-items:center;box-shadow:0 6px 14px rgba(245,158,11,.4)}
.flow li:not(:last-child)::after{content:"\2192";position:absolute;right:-22px;top:50%;transform:translateY(-50%);color:var(--amber);font-size:1.4rem;font-weight:800;z-index:2}
.flow .fi{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:#fff4de;font-size:1.5rem;margin:0 auto 14px}
.flow h3{color:var(--navy);font-size:1.05rem;margin-bottom:6px}
.flow p{color:var(--muted);font-size:.9rem}

/* Cards grid variants */
.cards-4{grid-template-columns:repeat(4,1fr)}
.card .num{display:block;font-size:1.9rem;font-weight:800;color:var(--amber);line-height:1;margin-bottom:12px}

/* Dark section extras */
.section.dark .h2{color:#fff}
.section.dark .chips span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feat-grid p.muted-light{margin-bottom:24px;font-size:1.02rem}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:600;font-size:.95rem}
.check span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--amber);color:var(--navy-2);font-weight:800;display:grid;place-items:center;font-size:.8rem}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price-card{display:flex;flex-direction:column;position:relative;padding:34px 28px 28px}
.price-card h3{font-size:1.25rem}
.price{margin:18px 0 20px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price small{display:block;color:var(--muted);font-size:.8rem;font-weight:600}
.price strong{font-size:2.4rem;font-weight:800;color:var(--navy);line-height:1.25}
.plist{display:grid;gap:10px;margin-bottom:26px}
.plist li{position:relative;padding-left:28px;font-size:.94rem}
.plist li::before{content:"\2713";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:#fff4de;color:#b45309;font-size:.7rem;font-weight:800;display:grid;place-items:center}
.price-card .btn{margin-top:auto}
.price-card.popular{background:linear-gradient(180deg,var(--navy),var(--navy-2));border:2px solid var(--amber);box-shadow:0 26px 54px rgba(11,36,71,.3);color:#fff}
.price-card.popular h3,.price-card.popular .price strong{color:#fff}
.price-card.popular p,.price-card.popular .price small{color:#b6c4dc}
.price-card.popular .price{border-color:rgba(255,255,255,.18)}
.price-card.popular .plist li::before{background:rgba(245,158,11,.2);color:var(--amber)}
.ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--navy-2);font-weight:800;font-size:.72rem;letter-spacing:.1em;padding:6px 16px;border-radius:999px;white-space:nowrap}
.pnote{text-align:center;color:var(--muted);font-size:.88rem;margin-top:26px}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .flow{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .flow[style*="--n:4"]{grid-template-columns:repeat(2,1fr)}
  .flow li:nth-child(3n)::after{display:none}
  .flow[style*="--n:4"] li:nth-child(2n)::after{display:none}
  .flow[style*="--n:4"] li:nth-child(3)::after{display:block}
}
@media (max-width:992px){
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;row-gap:34px}
  .feat-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:640px){
  .stats.stats-3{grid-template-columns:repeat(3,1fr);gap:10px}
  .stats.stats-3 b{font-size:1.05rem}
  .stats.stats-3 span{font-size:.72rem}
  .cards-4{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .flow,.flow[style*="--n:4"]{grid-template-columns:1fr;row-gap:40px}
  .flow li:not(:last-child)::after,.flow[style*="--n:4"] li:not(:last-child)::after{display:block !important;content:"\2193";right:auto;left:50%;top:auto;bottom:-34px;transform:translateX(-50%)}
  .vis-card{padding:14px}
  .vp-play{width:50px;height:50px}
}

/* Hero chips sit below the card so they never cover its text */
.page-hero .hero-visual{padding-bottom:50px}
.page-hero .chip-2{bottom:4px;left:4%}
.page-hero .chip-3{bottom:4px;right:4%}


/* Hero visual */
.hero-visual {
    position: relative;
    padding: 20px 0 30px
}

.browser {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 40px 70px rgba(0,0,0,.4);
    overflow: hidden;
    transform: rotate(-1.5deg)
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: #eef2f8
}

    .browser-bar i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #cbd5e4
    }

        .browser-bar i:nth-child(1) {
            background: #ff6b6b
        }

        .browser-bar i:nth-child(2) {
            background: #ffc94d
        }

        .browser-bar i:nth-child(3) {
            background: #4cd37b
        }

    .browser-bar span {
        margin-left: 10px;
        flex: 1;
        background: #fff;
        border-radius: 999px;
        padding: 4px 14px;
        font-size: .72rem;
        color: var(--muted)
    }

.browser-body {
    padding: 18px
}

.mock-hero {
    background: linear-gradient(135deg,var(--navy),#16417d);
    border-radius: 12px;
    padding: 26px 20px
}

.mh-line {
    height: 12px;
    border-radius: 6px;
    background: rgba(255,255,255,.85);
    margin-bottom: 10px
}

    .mh-line.w40 {
        background: rgba(255,255,255,.4)
    }

.w60 {
    width: 60%
}

.w40 {
    width: 40%
}

.mh-btn {
    width: 90px;
    height: 26px;
    border-radius: 999px;
    background: var(--amber);
    margin-top: 14px
}

.mock-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 14px 0
}

    .mock-cards div {
        height: 62px;
        border-radius: 10px;
        background: #eef2f8
    }

.mock-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 90px;
    padding: 10px;
    border-radius: 10px;
    background: #f7f9fc
}

    .mock-chart span {
        flex: 1;
        border-radius: 6px 6px 0 0;
        background: linear-gradient(180deg,var(--amber),#fcd27a)
    }

.chip {
    position: absolute;
    background: #fff;
    color: var(--navy);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    box-shadow: 0 14px 30px rgba(0,0,0,.28);
    animation: float 4s ease-in-out infinite
}

.chip-1 {
    top: 0;
    right: 6%
}

.chip-2 {
    bottom: 12%;
    left: -4%;
    animation-delay: 1s
}

.chip-3 {
    bottom: 0;
    right: 2%;
    animation-delay: 2s
}

@keyframes float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

.flow li
{
    list-style:none;
}


/* Sections */
.section {
    padding: 88px 0
}

    .section.tight {
        padding: 56px 0
    }

    .section.light {
        background: var(--light)
    }

    .section.dark {
        background: var(--navy);
        color: #fff
    }

.section-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 46px
}

    .section-head.sm {
        margin-bottom: 26px
    }

.eyebrow {
    display: inline-block;
    color: var(--amber);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: 10px
}

.section-head h2, .h2 {
    font-size: clamp(1.65rem,3.3vw,2.5rem);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: 12px
}

.section.dark .section-head h2 {
    color: #fff
}

.big {
    font-size: 1.05rem
}

.cards {
    display: grid;
    gap: 24px
}

.cards-3 {
    grid-template-columns: repeat(3,1fr)
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    transition: .3s;
    display: block
}

    .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(11,36,71,.12);
        border-color: var(--amber)
    }

.icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #fff4de;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: 16px
}

.card h3 {
    color: var(--navy);
    margin-bottom: 8px;
    font-size: 1.15rem;
    line-height: 1.3
}

.card p {
    color: var(--muted);
    font-size: .96rem
}

.more {
    display: inline-block;
    margin-top: 14px;
    font-weight: 700;
    color: var(--navy);
    font-size: .92rem;
    transition: color .2s
}

    .more:hover, .card:hover .more {
        color: var(--amber)
    }