/* ============================================================
   WEB DEVELOPMENT SERVICES — page extension styles
   Loads AFTER android-app-development.css and reuses its full
   design system (.aad-*). Only page-specific components here.
   ============================================================ */

/* ---- Rich service cards with feature chips ---- */
.wdd-svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.wdd-svc-card{
    display:flex;flex-direction:column;height:100%;padding:26px;
    border:1px solid #e1e5ed;border-radius:22px;background:#fff;
    box-shadow:0 8px 24px rgba(51,65,85,.045);transition:.25s
}
.wdd-svc-card:hover{transform:translateY(-5px);border-color:#b8b6ef;box-shadow:0 22px 46px rgba(79,70,229,.1)}
.wdd-svc-top{display:flex;align-items:center;gap:14px}
.wdd-svc-icon{
    flex:none;width:50px;height:50px;display:grid;place-items:center;
    color:#4f46e5;border-radius:15px;background:#eeedff;font-size:21px
}
.wdd-svc-card h3{margin:0;color:#151c2b;font:750 1.22rem/1.2 var(--font-primary);letter-spacing:-.02em}
.wdd-svc-card>p{margin:14px 0 0;color:#526078;font:400 14px/1.7 var(--font-secondary)}
.wdd-svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;padding-top:0}
.wdd-svc-tags{border-top:1px dashed #e3e8f1;margin-top:18px}
.wdd-svc-card>p+.wdd-svc-tags{margin-top:16px}
.wdd-svc-tags span{
    padding:7px 11px;color:#46566e;border:1px solid #dbe5f3;border-radius:999px;
    background:#f8fbff;font:650 11px/1 var(--font-secondary);transition:.2s
}
.wdd-svc-tags span:hover{color:#fff;border-color:#4f46e5;background:#4f46e5}

/* ---- Compact industry pills ---- */
.wdd-ind-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin-inline:auto}
.wdd-ind-pill{
    display:inline-flex;align-items:center;gap:8px;padding:12px 17px;
    color:#303b4f;border:1px solid #dfe3ec;border-radius:999px;background:#fff;
    box-shadow:0 6px 18px rgba(51,65,85,.04);
    font:650 13px/1 var(--font-secondary);text-decoration:none;transition:.2s
}
.wdd-ind-pill i{color:#4f46e5;font-size:15px}
.wdd-ind-pill:hover{color:#4338ca;border-color:#bbb8ef;background:#f2f1ff;transform:translateY(-2px)}

/* ---- Bento tile label: page-specific wording ---- */
.web-dev-page .aad-intro-tile:nth-child(2):before{content:"Web projects delivered"}
/* shared by shopping-portal page */
.shopping-portal-page .aad-intro-tile:nth-child(2):before{content:"Shopping portals delivered"}
/* shared by software-development page */
.software-dev-page .aad-intro-tile:nth-child(2):before{content:"Software products delivered"}
/* shared by digital-marketing page */
.digital-marketing-page .aad-intro-tile:nth-child(2):before{content:"Campaigns delivered"}
/* shared by social-media-marketing page */
.smm-page .aad-intro-tile:nth-child(2):before{content:"Social campaigns delivered"}
/* shared by brand-design page */
.brand-design-page .aad-intro-tile:nth-child(2):before{content:"Brand identities crafted"}
/* shared by graphic-design page */
.graphic-design-page .aad-intro-tile:nth-child(2):before{content:"Creative projects delivered"}
/* shared by ui-ux page */
.uiux-page .aad-intro-tile:nth-child(2):before{content:"Products designed"}
/* shared by api-development page */
.api-page .aad-intro-tile:nth-child(2):before{content:"APIs & integrations shipped"}
/* shared by ai-agent page */
.ai-agent-page .aad-intro-tile:nth-child(2):before{content:"AI agents deployed"}
/* shared by food-delivery-solution page */
.fds-page .aad-intro-tile:nth-child(2):before{content:"Days to launch"}

/* ---- Responsive ---- */
@media(max-width:1100px){
    .wdd-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
    .wdd-svc-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
    .wdd-svc-card{padding:22px}
    .wdd-ind-pill{padding:11px 14px;font-size:12px}
}

/* V2 — hotel-page visual language, tailored for web development */
.web-dev-page.hbs-page .aad-hero{
    background:
        radial-gradient(circle at 82% 18%,rgba(200,145,60,.18),transparent 24%),
        radial-gradient(circle at 12% 86%,rgba(18,63,50,.12),transparent 30%),
        linear-gradient(128deg,#f8f5ee 0%,#f0ece2 55%,#eaf2ed 100%);
}
.web-dev-page.hbs-page .aad-hero:before{
    opacity:.42;
    background-image:
        linear-gradient(rgba(18,63,50,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(18,63,50,.055) 1px,transparent 1px);
    background-size:64px 64px;
}
.web-dev-page.hbs-page .aad-hero:after{
    background:
        radial-gradient(circle at 78% 48%,rgba(255,255,255,.62),transparent 23%),
        linear-gradient(180deg,transparent 70%,rgba(9,41,31,.08));
}
.web-dev-page.hbs-page .aad-hero-copy{max-width:760px}
.web-dev-page.hbs-page .aad-hero h1{max-width:760px}
.web-dev-page.hbs-page .aad-hero h1 span{
    color:var(--forest);
    background:linear-gradient(transparent 82%,rgba(200,145,60,.62) 82%);
}
.web-dev-page.hbs-page .aad-quote-head{
    background:linear-gradient(135deg,#edf5f0,#f8f5ed);
}
.web-dev-page.hbs-page .aad-quote-mark{color:var(--forest);background:#dfeee5}
.web-dev-page.hbs-page .aad-stats{background:var(--forest-dark)}

/* Keep every content section inside the same cream / forest system. */
.web-dev-page.hbs-page .aad-section:nth-of-type(even){background:#f7f4ed}
.web-dev-page.hbs-page .aad-section:nth-of-type(odd){background:#fff}
.web-dev-page.hbs-page .aad-section.aad-why,
.web-dev-page.hbs-page .aad-section.aad-trends{
    color:#fff;
    background:
        radial-gradient(circle at 88% 8%,rgba(200,145,60,.17),transparent 25%),
        var(--forest-dark);
}
.web-dev-page.hbs-page .aad-why .aad-head h2,
.web-dev-page.hbs-page .aad-why-card h3,
.web-dev-page.hbs-page .aad-trends .aad-head h2{color:#fff}
.web-dev-page.hbs-page .aad-why .aad-head h2 span,
.web-dev-page.hbs-page .aad-trends .aad-head h2 span{color:#f0cf99}
.web-dev-page.hbs-page .aad-why .aad-head p{color:#bfd0c7}
.web-dev-page.hbs-page .aad-why-card{
    border-color:rgba(255,255,255,.13);
    background:rgba(255,255,255,.055);
}
.web-dev-page.hbs-page .aad-why-card>i{color:#f0cf99}
.web-dev-page.hbs-page .aad-why-card p{color:#b8cbc1}
.web-dev-page.hbs-page .aad-why-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.web-dev-page.hbs-page .aad-trend-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}
.web-dev-page.hbs-page .aad-trend-grid article{
    min-height:215px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:22px 20px;
}
.web-dev-page.hbs-page .aad-trend-grid article>i{
    align-self:start;
}
.web-dev-page.hbs-page .aad-trend-grid article>h3{
    min-height:46px;
    display:flex;
    align-items:flex-end;
    margin:26px 0 8px;
    padding:0;
}
.web-dev-page.hbs-page .aad-trend-grid article>p{
    align-self:start;
    margin:0;
}

.web-dev-page.hbs-page .wdd-svc-card{
    border-radius:8px;
    border-color:#deded8;
    box-shadow:none;
}
.web-dev-page.hbs-page .wdd-svc-card:hover{
    border-color:var(--forest);
    box-shadow:0 20px 42px rgba(18,63,50,.08);
}
.web-dev-page.hbs-page .wdd-svc-icon{
    color:var(--forest);
    border-radius:50%;
    background:#e6f0e9;
}
.web-dev-page.hbs-page .wdd-svc-tags span{
    color:#4c5a52;
    border-color:#dce4de;
    background:#f8faf8;
}
.web-dev-page.hbs-page .wdd-svc-tags span:hover{
    color:#fff;border-color:var(--forest);background:var(--forest);
}
.web-dev-page.hbs-page .wdd-ind-pill{
    color:#35443c;
    border-color:#dbe4de;
    border-radius:999px;
    background:#fff;
}
.web-dev-page.hbs-page .wdd-ind-pill i{color:var(--forest)}
.web-dev-page.hbs-page .wdd-ind-pill:hover{
    color:var(--forest);border-color:#9fb9aa;background:#eff6f1;
}

.web-dev-page.hbs-page .aad-tech{
    color:#17211c;
    background:linear-gradient(180deg,#f7f4ed,#eef3ef);
}
.web-dev-page.hbs-page .aad-tech .aad-head h2{color:#17211c}
.web-dev-page.hbs-page .aad-tech .aad-head h2 span{color:var(--forest)}
.web-dev-page.hbs-page .aad-tech .aad-head p{color:#647169}
.web-dev-page.hbs-page .aad-faq summary{color:#17211c}
.web-dev-page.hbs-page .aad-faq p{color:#55635b}
.web-dev-page.hbs-page .aad-tech-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:auto;
    align-items:stretch;
}
.web-dev-page.hbs-page .aad-tech-col{
    min-height:0;
    height:auto;
}
.web-dev-page.hbs-page .aad-tech-card-head{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}
.web-dev-page.hbs-page .aad-tech-card-head .aad-tech-icon{
    width:48px;height:48px;
}
.web-dev-page.hbs-page .aad-tech-card-head h3{
    margin:0;
    padding:0;
    color:#17211c;
    font:720 1.16rem/1.2 "Inter",Arial,sans-serif;
    letter-spacing:-.025em;
}
.web-dev-page.hbs-page .aad-tech-card-head .aad-tech-number{
    justify-self:end;
}
.web-dev-page.hbs-page .aad-tech-col>p{margin-top:0}

.web-dev-page.hbs-page .aad-process-grid{
    grid-auto-rows:auto;
    align-items:stretch;
}
.web-dev-page.hbs-page .aad-step{
    min-height:0;
    height:auto;
    padding:24px;
}
.web-dev-page.hbs-page .aad-step h3{
    margin:38px 0 10px;
    padding:0;
}
.web-dev-page.hbs-page .aad-step p{
    margin:0;
}

.web-dev-page.hbs-page .wd-industries{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:#f4f1e9;
}
.web-dev-page.hbs-page .wd-industries:before{
    content:"";
    position:absolute;
    z-index:-2;
    inset:-22px;
    opacity:.5;
    background:url("../images/web-development-ai-hero.png") center 44%/cover no-repeat;
    filter:blur(7px) saturate(.76);
    transform:scale(1.04);
    pointer-events:none;
}
.web-dev-page.hbs-page .wd-industries:after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:
        linear-gradient(180deg,rgba(248,246,240,.91),rgba(244,241,233,.84)),
        radial-gradient(circle at 50% 45%,rgba(255,255,255,.76),transparent 52%);
    pointer-events:none;
}
.web-dev-page.hbs-page .wd-industries .aad-wrap{
    position:relative;
    z-index:1;
}
.web-dev-page.hbs-page .wd-industries .wdd-ind-pill{
    background:rgba(255,255,255,.82);
    box-shadow:0 8px 20px rgba(9,41,31,.055);
    backdrop-filter:blur(8px);
}

.web-dev-page.hbs-page .aad-cta-inner{
    background:
        radial-gradient(circle at 90% 10%,rgba(234,215,181,.24),transparent 28%),
        linear-gradient(125deg,#0d3026,#174c3c 65%,#286852);
}

@media(max-width:980px){
    .web-dev-page.hbs-page .aad-hero{
        background:
            radial-gradient(circle at 82% 18%,rgba(200,145,60,.14),transparent 26%),
            linear-gradient(145deg,#f8f5ee,#eaf2ed);
    }
}

/* V4 — editorial business-growth introduction */
.web-dev-page.hbs-page .wd-growth{
    position:relative;
    overflow:hidden;
    padding:clamp(82px,8vw,118px) 0;
    background:
        radial-gradient(circle at 92% 8%,rgba(200,145,60,.12),transparent 24%),
        linear-gradient(135deg,#fbfaf7 0%,#f4f1e9 100%);
}
.web-dev-page.hbs-page .wd-growth:before{
    content:"";
    position:absolute;
    width:360px;height:360px;
    left:-220px;bottom:-210px;
    border:1px solid rgba(18,63,50,.1);
    border-radius:50%;
    box-shadow:0 0 0 55px rgba(18,63,50,.025),0 0 0 110px rgba(18,63,50,.02);
    pointer-events:none;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-grid{
    position:relative;
    grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);
    gap:clamp(54px,7vw,104px);
    align-items:center;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-copy{
    position:relative;
    padding-left:28px;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-copy:before{
    content:"";
    position:absolute;
    left:0;top:72px;
    width:3px;height:88px;
    border-radius:99px;
    background:linear-gradient(var(--forest),var(--gold));
}
.web-dev-page.hbs-page .wd-growth .aad-intro-copy h2{
    max-width:650px;
    margin:22px 0 25px!important;
    color:#0b120e;
    font-family:"Inter",Arial,sans-serif!important;
    font-weight:720!important;
    font-size:clamp(2.75rem,4.35vw,4.6rem)!important;
    line-height:.99!important;
    letter-spacing:-.06em;
}
.web-dev-page.hbs-page .wd-growth .wd-growth-title span{
    display:block;
    color:#0a0e0c;
    white-space:nowrap;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-copy>p{
    max-width:620px;
    margin:0 0 15px;
    color:#4a5850;
    font-size:14px;
    line-height:1.82;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:27px;
    counter-reset:intro-benefit;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points li:last-child{grid-column:auto}
.web-dev-page.hbs-page .wd-growth .aad-intro-points li{
    counter-increment:intro-benefit;
    position:relative;
    min-height:54px;
    align-items:center;
    gap:13px;
    padding:13px 16px 13px 51px;
    color:#17231d!important;
    border:1px solid #d8ddd8;
    border-radius:10px;
    background:rgba(255,255,255,.72);
    font-size:11.5px;
    box-shadow:0 8px 24px rgba(18,45,35,.035);
    transition:transform .2s,border-color .2s,background .2s;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points li:before{
    content:"0" counter(intro-benefit);
    position:absolute;
    left:15px;top:50%;
    color:var(--forest);
    font:750 10px/1 "Inter",sans-serif;
    letter-spacing:.06em;
    transform:translateY(-50%);
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points li:hover{
    transform:translateX(4px);
    border-color:#aabcb1;
    background:#fff;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-points i{
    display:none;
}

.web-dev-page.hbs-page .wd-growth .aad-intro-visual{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    padding:18px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    color:#fff;
    background:
        radial-gradient(circle at 95% 5%,rgba(200,145,60,.22),transparent 29%),
        var(--forest-dark);
    box-shadow:0 30px 70px rgba(9,41,31,.2);
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual:after{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:18px;
    pointer-events:none;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual-head{
    position:relative;
    z-index:1;
    grid-column:1/-1;
    min-height:72px;
    padding:16px 17px 20px;
    color:#f0cf99;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual-head span{
    display:flex;
    align-items:center;
    gap:9px;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual-head span:before{
    content:"";
    width:7px;height:7px;
    border-radius:50%;
    background:#f0cf99;
    box-shadow:0 0 0 5px rgba(240,207,153,.1);
}
.web-dev-page.hbs-page .wd-growth .aad-intro-visual-head i{
    color:#f0cf99;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile,
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(even){
    position:relative;
    z-index:1;
    min-height:180px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    gap:0;
    margin:0;
    padding:22px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:15px;
    color:#fff;
    background:rgba(255,255,255,.06)!important;
    box-shadow:none;
    transform:none!important;
    overflow:hidden;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:after{
    content:"↗";
    position:absolute;
    right:19px;top:18px;
    color:#789388;
    font-size:13px;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:hover{
    border-color:rgba(240,207,153,.48);
    background:rgba(255,255,255,.095)!important;
    transform:translateY(-4px)!important;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile i{
    position:static;
    width:42px;height:42px;
    display:grid;
    place-items:center;
    margin-bottom:auto;
    color:#0d3026;
    border-radius:12px;
    background:#f0cf99;
    font-size:17px;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile strong{
    color:#fff;
    font:720 clamp(1.65rem,2.4vw,2.2rem)/1 "Inter",sans-serif;
    letter-spacing:-.04em;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile span{
    margin-top:8px;
    color:#b9ccc2;
    font-size:11px;
    font-weight:550;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(3) i{background:#dcebe2}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(4) i{background:#e4e3df}
.web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(5) i{background:#e7deea}

/* AI visual replaces the former delivery-stat bento panel. */
.web-dev-page.hbs-page .wd-growth .aad-intro-ai-card{
    display:block;
    min-height:510px;
    padding:0;
    overflow:hidden;
    isolation:isolate;
    background:#102d23;
}
.web-dev-page.hbs-page .wd-growth .aad-intro-ai-card:after{
    inset:10px;
    z-index:2;
    border-color:rgba(255,255,255,.18);
    pointer-events:none;
}
.web-dev-page.hbs-page .aad-intro-ai-card>img{
    position:absolute;
    z-index:-2;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:72% center;
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.web-dev-page.hbs-page .aad-intro-ai-card:before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(105deg,rgba(7,27,20,.94) 0%,rgba(8,35,26,.76) 42%,rgba(7,22,17,.11) 82%);
}
.web-dev-page.hbs-page .aad-intro-ai-card:hover>img{transform:scale(1.055)}
.web-dev-page.hbs-page .aad-ai-card-overlay{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    min-height:510px;
    padding:42px;
    color:#fff;
}
.web-dev-page.hbs-page .aad-ai-card-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:auto;
    padding:9px 13px;
    color:#fff0ca;
    border:1px solid rgba(255,224,153,.35);
    border-radius:999px;
    background:rgba(12,42,31,.48);
    backdrop-filter:blur(8px);
    font:700 10px/1 var(--font-secondary);
    letter-spacing:.1em;
    text-transform:uppercase;
}
.web-dev-page.hbs-page .aad-ai-card-kicker i{font-size:13px;color:#f0cf99}
.web-dev-page.hbs-page .aad-ai-card-overlay h3{
    margin:0 0 13px;
    max-width:390px;
    color:#fff;
    font:760 clamp(2rem,3.2vw,3.4rem)/.98 var(--font-primary);
    letter-spacing:-.055em;
}
.web-dev-page.hbs-page .aad-ai-card-overlay p{
    max-width:380px;
    margin:0;
    color:#d6e2db;
    font:400 13px/1.65 var(--font-secondary);
}
.web-dev-page.hbs-page .aad-ai-card-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:24px;
}
.web-dev-page.hbs-page .aad-ai-card-tags span{
    padding:8px 10px;
    color:#fff;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    font:650 10px/1 var(--font-secondary);
}

@media(max-width:980px){
    .web-dev-page.hbs-page .aad-tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .web-dev-page.hbs-page .aad-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .web-dev-page.hbs-page .wd-growth .aad-intro-grid{
        grid-template-columns:1fr;
    }
    .web-dev-page.hbs-page .wd-growth .aad-intro-copy{padding-left:23px}
    .web-dev-page.hbs-page .wd-growth .aad-intro-visual{max-width:720px}
}
@media(max-width:1200px) and (min-width:981px){
    .web-dev-page.hbs-page .aad-trend-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
    .web-dev-page.hbs-page .aad-tech-grid{grid-template-columns:1fr}
    .web-dev-page.hbs-page .aad-why-grid{grid-template-columns:1fr}
    .web-dev-page.hbs-page .wd-growth{padding:68px 0}
    .web-dev-page.hbs-page .wd-growth .aad-intro-copy{padding-left:0}
    .web-dev-page.hbs-page .wd-growth .aad-intro-copy:before{display:none}
    .web-dev-page.hbs-page .wd-growth .aad-intro-copy h2{
        font-size:2.55rem!important;
    }
    .web-dev-page.hbs-page .wd-growth .wd-growth-title{
        font-size:clamp(2.25rem,10.3vw,3.35rem)!important;
    }
    .web-dev-page.hbs-page .wd-growth .aad-intro-visual{
        grid-template-columns:1fr;
        padding:13px;
        border-radius:19px;
    }
    .web-dev-page.hbs-page .wd-growth .aad-intro-ai-card,
    .web-dev-page.hbs-page .aad-ai-card-overlay{min-height:430px}
    .web-dev-page.hbs-page .wd-growth .aad-intro-ai-card{display:block;padding:0}
    .web-dev-page.hbs-page .aad-ai-card-overlay{padding:30px}
    .web-dev-page.hbs-page .wd-growth .aad-intro-visual-head{min-height:62px}
    .web-dev-page.hbs-page .wd-growth .aad-intro-tile,
    .web-dev-page.hbs-page .wd-growth .aad-intro-tile:nth-child(even){
        min-height:145px;
        padding:19px;
    }
}

@media(max-width:420px){
    .web-dev-page.hbs-page .wd-growth .aad-intro-points{grid-template-columns:1fr}
}

/* V5 — AI-generated, softly blurred hero backdrop */
.web-dev-page.hbs-page .aad-hero{
    isolation:isolate;
    background:#f4f1e9;
}
.web-dev-page.hbs-page .aad-hero:before{
    content:"";
    position:absolute;
    z-index:-2;
    inset:-18px;
    opacity:.62;
    background:url("../images/web-development-ai-hero.png") center/cover no-repeat;
    filter:blur(4px) saturate(.82);
    transform:scale(1.035);
    pointer-events:none;
}
.web-dev-page.hbs-page .aad-hero:after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    opacity:1;
    background:
        linear-gradient(90deg,rgba(247,244,236,.96) 0%,rgba(247,244,236,.91) 43%,rgba(247,244,236,.76) 64%,rgba(238,242,235,.68) 100%),
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(9,41,31,.08));
    pointer-events:none;
}
.web-dev-page.hbs-page .aad-hero .aad-wrap{position:relative;z-index:1}

@media(max-width:980px){
    .web-dev-page.hbs-page .aad-hero:before{
        opacity:.38;
        background-position:62% center;
        filter:blur(5px) saturate(.76);
    }
    .web-dev-page.hbs-page .aad-hero:after{
        background:linear-gradient(180deg,rgba(247,244,236,.94),rgba(247,244,236,.84));
    }
}
@media(max-width:640px){
    .web-dev-page.hbs-page .aad-hero:before{
        opacity:.3;
        background-position:68% center;
        filter:blur(6px) saturate(.72);
    }
    .web-dev-page.hbs-page .aad-hero:after{
        background:linear-gradient(180deg,rgba(247,244,236,.95),rgba(247,244,236,.88));
    }
}

/* V6 — compact process cards based on the approved reference */
.web-dev-page.hbs-page .aad-process-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    align-items:stretch;
}
.web-dev-page.hbs-page .aad-step,
.web-dev-page.hbs-page .aad-step:last-child{
    grid-column:span 1;
    min-height:0;
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    grid-template-rows:44px auto;
    align-content:start;
    padding:0;
    color:#101713;
    border:1px solid #d3dbd5;
    border-radius:15px;
    background:#fff;
    box-shadow:none;
    overflow:hidden;
}
.web-dev-page.hbs-page .aad-step:last-child{grid-column:1/-1}
.web-dev-page.hbs-page .aad-step:before,
.web-dev-page.hbs-page .aad-step:last-child:before{
    display:none;
}
.web-dev-page.hbs-page .aad-step:after{display:none}
.web-dev-page.hbs-page .aad-step:hover,
.web-dev-page.hbs-page .aad-step:last-child:hover{
    border-color:#9fb4a8;
    background:#fff;
    box-shadow:0 16px 34px rgba(21,63,51,.08);
    transform:translateY(-3px);
}
.web-dev-page.hbs-page .aad-step .aad-step-num,
.web-dev-page.hbs-page .aad-step:last-child .aad-step-num{
    grid-column:1;
    grid-row:1;
    align-self:stretch;
    justify-self:stretch;
    width:52px;
    height:44px;
    display:grid;
    place-items:center;
    padding:0;
    color:#fff;
    border-radius:0;
    background:#153f33;
    font:800 15px/1 "Inter",Arial,sans-serif;
    letter-spacing:0;
}
.web-dev-page.hbs-page .aad-step h3,
.web-dev-page.hbs-page .aad-step:last-child h3{
    grid-column:2;
    grid-row:1;
    min-width:0;
    display:flex;
    align-items:center;
    margin:0;
    padding:0 14px;
    color:#101713;
    border-bottom:1px solid #d8dfda;
    font:720 15px/1.2 "Inter",Arial,sans-serif;
    letter-spacing:-.02em;
}
.web-dev-page.hbs-page .aad-step p,
.web-dev-page.hbs-page .aad-step:last-child p{
    grid-column:1/-1;
    align-self:start;
    margin:0;
    padding:14px 15px 16px;
    color:#536158;
    font:400 13px/1.62 "Inter",Arial,sans-serif;
}

@media(max-width:980px){
    .web-dev-page.hbs-page .aad-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .web-dev-page.hbs-page .aad-step,
    .web-dev-page.hbs-page .aad-step:last-child{grid-column:span 1}
}
@media(max-width:640px){
    .web-dev-page.hbs-page .aad-process-grid{grid-template-columns:1fr}
    .web-dev-page.hbs-page .aad-step,
    .web-dev-page.hbs-page .aad-step:last-child{
        grid-column:1;
        min-height:0;
        grid-template-columns:50px minmax(0,1fr);
        grid-template-rows:44px auto;
        padding:0;
    }
    .web-dev-page.hbs-page .aad-step .aad-step-num,
    .web-dev-page.hbs-page .aad-step:last-child .aad-step-num{width:50px}
}