:root {
    --webdev-ink: #07152f;
    --webdev-night: #09142d;
    --webdev-panel: rgba(18, 31, 62, 0.72);
    --webdev-panel-strong: #111f40;
    --webdev-blue: #5b8cff;
    --webdev-cyan: #67d7ff;
    --webdev-violet: #a27cff;
    --webdev-yellow: #f7bd35;
    --webdev-white: #f5f8ff;
    --webdev-muted: #9aa9c7;
    --webdev-line: rgba(149, 174, 224, 0.17);
    --webdev-radius: 22px;
    --webdev-ease: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.webdev-page {
    overflow: hidden;
    color: var(--webdev-white);
    background: var(--webdev-night);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.webdev-page *,
.webdev-page *::before,
.webdev-page *::after {
    box-sizing: border-box;
}

.webdev-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.webdev-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.webdev-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.webdev-reveal-delay-one { transition-delay: 100ms; }
.webdev-reveal-delay-two { transition-delay: 180ms; }
.webdev-reveal-delay-three { transition-delay: 260ms; }

.webdev-hero {
    position: relative;
    min-height: 690px;
    display: flex;
    align-items: center;
    isolation: isolate;
    background: radial-gradient(circle at 78% 37%, rgba(53, 107, 240, 0.18), transparent 29%), linear-gradient(135deg, #07132c 0%, #0b1940 52%, #101538 100%);
}

.webdev-hero-grid,
.webdev-cta-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.35;
    background-image: linear-gradient(rgba(110, 148, 221, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 148, 221, 0.12) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
    animation: webdevGridMove 18s linear infinite;
}

.webdev-hero::after,
.webdev-cta-section::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 180px;
    z-index: -1;
    background: linear-gradient(transparent, var(--webdev-night));
}

.webdev-hero-orb,
.webdev-cta-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.webdev-hero-orb-one { top: 14%; right: 8%; width: 180px; height: 180px; border: 1px solid rgba(103, 215, 255, 0.2); box-shadow: 0 0 80px rgba(91, 140, 255, 0.17); }
.webdev-hero-orb-two { right: 31%; bottom: 8%; width: 12px; height: 12px; background: var(--webdev-yellow); box-shadow: 0 0 30px var(--webdev-yellow); animation: webdevFloat 5s ease-in-out infinite; }

.webdev-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(500px, 1.12fr);
    align-items: center;
    gap: 54px;
    padding: 86px 0 100px;
}

.webdev-hero-copy { position: relative; z-index: 2; }
.webdev-eyebrow,
.webdev-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--webdev-yellow);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.webdev-eyebrow i { font-size: 10px; }
.webdev-hero h1 { max-width: 620px; margin: 22px 0 24px; color: #fff; font-size: clamp(44px, 5.1vw, 75px); font-weight: 900; letter-spacing: -0.04em; line-height: 0.99; }
.webdev-hero h1 span { color: transparent; background: linear-gradient(100deg, #8eb9ff, #b889ff 74%); -webkit-background-clip: text; background-clip: text; }
.webdev-hero-intro { max-width: 520px; margin: 0; color: var(--webdev-muted); font-size: 16px; line-height: 1.75; }
.webdev-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.webdev-hero .webdev-actions { margin-top: 32px; }
.webdev-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 21px; border: 1px solid transparent; border-radius: 13px; font-size: 13px; font-weight: 850; text-decoration: none; transition: transform var(--webdev-ease), box-shadow var(--webdev-ease), border-color var(--webdev-ease), background var(--webdev-ease); }
.webdev-button i { font-size: 12px; transition: transform var(--webdev-ease); }
.webdev-button:hover { transform: translateY(-3px); }
.webdev-button:hover i { transform: translate(3px, -3px); }
.webdev-button-primary { color: #101d38; background: var(--webdev-yellow); box-shadow: 0 15px 30px rgba(247, 189, 53, 0.18); }
.webdev-button-primary:hover { background: #ffd15a; box-shadow: 0 18px 34px rgba(247, 189, 53, 0.28); }
.webdev-button-ghost { color: #d9e4ff; border-color: rgba(157, 180, 231, 0.28); background: rgba(255, 255, 255, 0.04); }
.webdev-button-ghost:hover { border-color: rgba(126, 174, 255, 0.68); background: rgba(96, 138, 255, 0.12); }
.webdev-hero-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 25px; color: #91a5ca; font-size: 11px; font-weight: 700; }
.webdev-hero-proof i { margin-right: 5px; color: #78d4b4; }

.webdev-hero-visual { position: relative; min-height: 470px; display: grid; place-items: center; }
.webdev-dashboard-glow { position: absolute; width: 72%; height: 72%; border-radius: 50%; background: rgba(70, 112, 245, 0.27); filter: blur(70px); }
.webdev-browser { position: relative; z-index: 1; width: min(100%, 630px); overflow: hidden; border: 1px solid rgba(171, 198, 255, 0.27); border-radius: 18px; background: #111d3b; box-shadow: 0 35px 70px rgba(0, 0, 0, 0.32), 0 0 0 8px rgba(114, 154, 255, 0.04); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); }
.webdev-browser-bar { height: 43px; display: flex; align-items: center; gap: 14px; padding: 0 15px; color: #7388b0; background: #0b1631; border-bottom: 1px solid rgba(173, 198, 248, 0.13); font-size: 11px; }
.webdev-browser-dots { display: flex; gap: 6px; }
.webdev-browser-dots i { width: 7px; height: 7px; display: block; border-radius: 50%; background: #f06371; }
.webdev-browser-dots i:nth-child(2) { background: var(--webdev-yellow); }
.webdev-browser-dots i:nth-child(3) { background: #63dba4; }
.webdev-browser-url { flex: 1; padding: 6px 11px; border-radius: 6px; background: rgba(255,255,255,0.05); }
.webdev-browser-url i { margin-right: 5px; color: #6ed7b4; font-size: 9px; }
.webdev-browser-body { min-height: 370px; padding: 22px 27px 27px; background: linear-gradient(140deg, #152650, #111d3a 73%); }
.webdev-preview-nav { display: flex; align-items: center; gap: 16px; color: #7590bf; font-size: 8px; }
.webdev-preview-nav b { margin-right: auto; color: #fff; font-size: 13px; letter-spacing: -0.03em; }
.webdev-preview-nav b span:first-child { display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: middle; border-radius: 5px; background: var(--webdev-yellow); }
.webdev-preview-nav .webdev-preview-dot { color: var(--webdev-yellow); }
.webdev-preview-nav > span { width: 32px; height: 4px; border-radius: 5px; background: #6177a9; }
.webdev-preview-nav em { width: 50px; height: 16px; border-radius: 5px; background: var(--webdev-yellow); }
.webdev-preview-content { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 22px; align-items: center; margin-top: 40px; }
.webdev-preview-text small { display: block; color: var(--webdev-cyan); font-size: 7px; font-weight: 900; letter-spacing: 0.18em; }
.webdev-preview-text strong { display: block; margin: 13px 0; color: #fff; font-size: 28px; line-height: 1.03; letter-spacing: -0.05em; }
.webdev-preview-text em { color: #a87dff; font-style: normal; }
.webdev-preview-text > span { display: block; width: 85%; height: 5px; margin: 7px 0; border-radius: 5px; background: #5c719f; }
.webdev-preview-text > span:nth-of-type(2) { width: 63%; }
.webdev-preview-text b { display: block; width: 54px; height: 18px; margin-top: 18px; border-radius: 5px; background: var(--webdev-yellow); }
.webdev-preview-art { position: relative; min-height: 185px; border: 1px solid rgba(161, 193, 255, 0.24); border-radius: 14px; background: linear-gradient(145deg, #3975ed, #7251bb 54%, #e8aa37); overflow: hidden; }
.webdev-preview-art::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; }
.webdev-preview-art div { position: absolute; right: 12%; bottom: 16%; width: 44%; height: 57%; border-radius: 50% 50% 12% 12%; background: linear-gradient(135deg, #152758, #273d7e); transform: rotate(-16deg); }
.webdev-preview-art i { position: absolute; top: 17%; left: 18%; width: 30px; height: 30px; border-radius: 50%; background: #f6c354; box-shadow: 0 0 30px #f6c354; }
.webdev-preview-art b { position: absolute; left: 9%; bottom: 12%; width: 55px; height: 12px; border-radius: 20px; background: #b8d6ff; transform: rotate(-14deg); }
.webdev-preview-art span { position: absolute; top: 18%; right: 12%; width: 9px; height: 9px; border-radius: 50%; background: #d3c0ff; }
.webdev-code-lines { display: flex; flex-direction: column; gap: 7px; margin-top: 32px; }
.webdev-code-lines i { display: block; width: 72%; height: 3px; border-radius: 5px; background: linear-gradient(90deg, #5a8eff 0 25%, #6c7fae 25% 80%, transparent 80%); animation: webdevPulse 2.4s ease-in-out infinite; }
.webdev-code-lines i:nth-child(2) { width: 92%; animation-delay: 180ms; }
.webdev-code-lines i:nth-child(3) { width: 57%; animation-delay: 360ms; }
.webdev-code-lines i:nth-child(4) { width: 81%; animation-delay: 540ms; }
.webdev-code-lines i:nth-child(5) { width: 40%; animation-delay: 720ms; }
.webdev-float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; min-width: 154px; padding: 11px 12px; border: 1px solid rgba(183, 207, 255, 0.27); border-radius: 12px; color: #dce6ff; background: rgba(14, 30, 66, 0.88); box-shadow: 0 16px 35px rgba(0, 0, 0, 0.22); backdrop-filter: blur(14px); animation: webdevFloat 5s ease-in-out infinite; }
.webdev-float-card > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border-radius: 9px; color: #9ec1ff; background: rgba(91, 140, 255, 0.16); }
.webdev-float-card b { display: block; font-size: 10px; line-height: 1.25; }
.webdev-float-card small { display: block; margin-top: 3px; color: #8ea2c7; font-size: 8px; font-weight: 600; }
.webdev-float-card strong { margin-left: auto; color: #68dca5; font-size: 13px; }
.webdev-performance-card { top: 7%; left: -3%; }
.webdev-ready-card { right: -3%; bottom: 17%; animation-delay: 1.1s; }
.webdev-seo-card { bottom: 2%; left: 14%; animation-delay: 2.1s; }
.webdev-seo-card > span { color: #f6c359; background: rgba(247, 189, 53, 0.15); }
.webdev-seo-card strong { color: #a3bbff; }

.webdev-trust-strip { position: relative; z-index: 2; border-top: 1px solid var(--webdev-line); border-bottom: 1px solid var(--webdev-line); background: rgba(17, 32, 66, 0.72); }
.webdev-trust-items { display: grid; grid-template-columns: repeat(4, 1fr); }
.webdev-trust-items span { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 70px; padding: 8px 16px; color: #bdcbe5; border-right: 1px solid var(--webdev-line); font-size: 11px; font-weight: 800; text-align: center; }
.webdev-trust-items span:last-child { border-right: 0; }
.webdev-trust-items i { color: var(--webdev-yellow); font-size: 14px; }

.webdev-section { position: relative; padding: 116px 0; background: var(--webdev-night); }
.webdev-section:nth-of-type(even) { background: #0b1836; }
.webdev-section-heading { max-width: 630px; margin-bottom: 45px; }
.webdev-section-heading h2 { margin: 13px 0 14px; color: #fff; font-size: clamp(32px, 4vw, 51px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.03; }
.webdev-section-heading p { max-width: 590px; margin: 0; color: var(--webdev-muted); font-size: 15px; line-height: 1.75; }

.webdev-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.webdev-service-card { position: relative; min-height: 285px; padding: 24px; overflow: hidden; border: 1px solid var(--webdev-line); border-radius: var(--webdev-radius); background: linear-gradient(145deg, rgba(22, 42, 84, 0.82), rgba(12, 27, 60, 0.7)); transition: transform var(--webdev-ease), border-color var(--webdev-ease), box-shadow var(--webdev-ease); }
.webdev-service-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: linear-gradient(135deg, rgba(91, 140, 255, 0.18), transparent 52%, rgba(162, 124, 255, 0.12)); transition: opacity var(--webdev-ease); }
.webdev-service-card:hover { transform: translateY(-7px); border-color: rgba(107, 160, 255, 0.58); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.2); }
.webdev-service-card:hover::before { opacity: 1; }
.webdev-card-number { position: absolute; top: 22px; right: 23px; color: #7591c2; font-size: 11px; font-weight: 900; letter-spacing: 0.1em; }
.webdev-service-icon { position: relative; width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 13px; font-size: 17px; transition: transform var(--webdev-ease); }
.webdev-service-card:hover .webdev-service-icon { transform: translateY(-4px) rotate(-5deg); }
.webdev-icon-blue { color: #9abaff; background: rgba(91, 140, 255, 0.18); }
.webdev-icon-yellow { color: #ffd776; background: rgba(247, 189, 53, 0.16); }
.webdev-icon-violet { color: #c3a6ff; background: rgba(162, 124, 255, 0.17); }
.webdev-icon-green { color: #8ce4c0; background: rgba(65, 203, 151, 0.15); }
.webdev-icon-coral { color: #ffac9e; background: rgba(240, 108, 102, 0.15); }
.webdev-icon-sky { color: #8ddfff; background: rgba(103, 215, 255, 0.15); }
.webdev-service-card h3 { position: relative; margin: 0 0 11px; color: #f7f9ff; font-size: 17px; font-weight: 850; }
.webdev-service-card p { position: relative; min-height: 66px; margin: 0 0 18px; color: #94a7cb; font-size: 12px; line-height: 1.65; }
.webdev-service-card a { position: relative; display: inline-flex; align-items: center; gap: 8px; color: #9ec0ff; font-size: 11px; font-weight: 850; text-decoration: none; }
.webdev-service-card a i { transition: transform var(--webdev-ease); }
.webdev-service-card a:hover i { transform: translateX(4px); }

.webdev-process-section { background: #0b1836; }
.webdev-process-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.webdev-process-grid::before { content: ""; position: absolute; top: 23px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(102, 157, 255, 0.68), rgba(166, 126, 255, 0.68), transparent); }
.webdev-process-step { position: relative; z-index: 1; }
.webdev-process-node { width: 47px; height: 47px; display: grid; place-items: center; margin-bottom: 25px; border: 1px solid rgba(116, 170, 255, 0.64); border-radius: 50%; color: #b5ceff; background: #0b1836; box-shadow: 0 0 0 7px #0b1836, 0 0 25px rgba(91, 140, 255, 0.3); font-size: 12px; font-weight: 900; }
.webdev-process-step:nth-child(2) .webdev-process-node { border-color: rgba(166, 126, 255, 0.7); color: #d1baff; }
.webdev-process-step:nth-child(3) .webdev-process-node { border-color: rgba(103, 215, 255, 0.7); color: #a4eaff; }
.webdev-process-step:nth-child(4) .webdev-process-node { border-color: rgba(247, 189, 53, 0.75); color: #ffd778; }
.webdev-process-step h3 { margin: 0 0 8px; color: #f9fbff; font-size: 16px; }
.webdev-process-step p { max-width: 220px; margin: 0; color: #91a4c7; font-size: 12px; line-height: 1.65; }

.webdev-bento-grid { display: grid; grid-template-columns: 1.15fr 0.85fr 0.85fr; grid-template-rows: 1fr 0.75fr; gap: 15px; }
.webdev-bento-feature, .webdev-bento-item, .webdev-bento-wide { position: relative; overflow: hidden; border: 1px solid var(--webdev-line); border-radius: var(--webdev-radius); background: linear-gradient(145deg, rgba(22, 43, 88, 0.84), rgba(14, 28, 62, 0.68)); }
.webdev-bento-feature { grid-row: span 2; min-height: 390px; padding: 29px; background: radial-gradient(circle at 100% 0, rgba(91, 140, 255, 0.35), transparent 43%), linear-gradient(145deg, #172f65, #111f43); }
.webdev-bento-label { display: inline-flex; align-items: center; gap: 7px; color: #b4c9f4; font-size: 10px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.webdev-bento-label i { color: var(--webdev-yellow); }
.webdev-bento-mark { width: 62px; height: 62px; display: grid; place-items: center; margin: 56px 0 25px; border: 1px solid rgba(158, 196, 255, 0.28); border-radius: 18px; color: #a7c5ff; background: rgba(119, 163, 255, 0.13); font-size: 25px; box-shadow: 0 0 35px rgba(100, 154, 255, 0.2); }
.webdev-bento-feature h3 { margin: 0 0 14px; color: #fff; font-size: 27px; line-height: 1.1; letter-spacing: -0.03em; }
.webdev-bento-feature p { max-width: 310px; margin: 0; color: #9db1d3; font-size: 13px; line-height: 1.7; }
.webdev-bento-line { position: absolute; right: 0; bottom: 28px; left: 29px; height: 1px; background: linear-gradient(90deg, rgba(127, 172, 255, 0.7), transparent); }
.webdev-bento-item { min-height: 184px; padding: 24px; transition: transform var(--webdev-ease), border-color var(--webdev-ease); }
.webdev-bento-item:hover, .webdev-bento-wide:hover { transform: translateY(-5px); border-color: rgba(111, 163, 255, 0.55); }
.webdev-bento-item > i, .webdev-bento-wide > div > i { color: var(--webdev-yellow); font-size: 20px; }
.webdev-bento-item h3 { margin: 22px 0 8px; color: #fff; font-size: 15px; }
.webdev-bento-item p, .webdev-bento-wide p { margin: 0; color: #94a8cb; font-size: 11px; line-height: 1.6; }
.webdev-bento-wide { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; transition: transform var(--webdev-ease), border-color var(--webdev-ease); }
.webdev-bento-wide h3 { display: inline-block; margin: 0 0 8px 11px; color: #fff; font-size: 15px; vertical-align: middle; }
.webdev-bento-wide p { padding-left: 31px; }
.webdev-bento-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.webdev-bento-tags span { padding: 7px 9px; border: 1px solid rgba(124, 162, 225, 0.24); border-radius: 7px; color: #a9c0e7; font-size: 8px; font-weight: 850; letter-spacing: 0.08em; }

.webdev-stack-section { background: #f4f7fc; }
.webdev-stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.webdev-stack-badge { display: flex; align-items: center; gap: 13px; min-height: 86px; padding: 15px; border: 1px solid #dce5f4; border-radius: 999px; background: #ffffff; box-shadow: 0 8px 22px rgba(24, 51, 99, 0.06); transition: transform var(--webdev-ease), border-color var(--webdev-ease), background var(--webdev-ease); }
.webdev-stack-badge:hover { transform: translateY(-5px); border-color: rgba(108, 163, 255, 0.58); background: rgba(31, 57, 111, 0.76); }
.webdev-stack-badge > b { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 37px; border: 1px solid rgba(129, 172, 255, 0.29); border-radius: 10px; color: #a5c2ff; background: rgba(91, 140, 255, 0.13); font-size: 12px; }
.webdev-stack-badge:nth-child(2n) > b { color: #f8cf6a; background: rgba(247, 189, 53, 0.12); }
.webdev-stack-badge strong { display: block; color: #12213f; font-size: 12px; }
.webdev-stack-badge small { display: block; margin-top: 4px; color: #71809e; font-size: 10px; font-weight: 600; }
.webdev-stack-badge:hover strong { color: #ffffff; }
.webdev-stack-badge:hover small { color: #d7e4ff; }

.webdev-showcase-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 55px; }
.webdev-showcase-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.webdev-showcase-labels span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid var(--webdev-line); border-radius: 8px; color: #b6c7e5; background: rgba(255, 255, 255, 0.035); font-size: 10px; font-weight: 800; }
.webdev-showcase-labels i { color: var(--webdev-yellow); }
.webdev-devices { position: relative; min-height: 360px; }
.webdev-device-desktop { position: absolute; top: 17px; left: 3%; width: 76%; }
.webdev-device-screen { position: relative; overflow: hidden; border: 7px solid #1b2e58; border-radius: 11px; background: linear-gradient(135deg, #edf4ff, #8eb7f4 50%, #7e58bc); box-shadow: 0 20px 45px rgba(0,0,0,0.27); }
.webdev-device-desktop .webdev-device-screen { height: 220px; }
.webdev-device-screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 30%, rgba(255,255,255,0.42) 30% 33%, transparent 33% 59%, rgba(255,255,255,0.26) 59% 62%, transparent 62%); }
.webdev-device-screen span { position: absolute; top: 14%; left: 10%; width: 28%; height: 9px; border-radius: 8px; background: #20376c; }
.webdev-device-screen b { position: absolute; top: 27%; left: 10%; width: 42%; height: 7px; border-radius: 8px; background: rgba(32, 55, 108, 0.55); }
.webdev-device-screen i { position: absolute; top: 42%; left: 10%; width: 29%; height: 25%; border-radius: 8px; background: rgba(255,255,255,0.72); }
.webdev-device-screen em { position: absolute; right: 10%; bottom: 15%; width: 34%; height: 39%; border-radius: 50% 50% 10% 10%; background: #233d7a; transform: rotate(-14deg); }
.webdev-device-stand { width: 35%; height: 16px; margin: 0 auto; border-radius: 0 0 7px 7px; background: #1b2d54; }
.webdev-device-tablet { position: absolute; right: 7%; bottom: 20px; width: 30%; padding: 7px; border: 4px solid #1b2e58; border-radius: 15px; background: #263b6d; transform: rotate(5deg); box-shadow: 0 22px 42px rgba(0,0,0,0.25); }
.webdev-device-tablet .webdev-device-screen { height: 194px; border-width: 0; border-radius: 8px; }
.webdev-device-mobile { position: absolute; right: 1%; bottom: 11px; width: 16%; padding: 5px; border: 3px solid #17294d; border-radius: 15px; background: #2d4373; transform: rotate(-4deg); box-shadow: 0 22px 42px rgba(0,0,0,0.32); }
.webdev-device-mobile .webdev-device-screen { height: 155px; border-width: 0; border-radius: 10px; }
.webdev-device-mobile .webdev-device-screen span { top: 14%; left: 13%; width: 55%; height: 5px; }
.webdev-device-mobile .webdev-device-screen b { top: 25%; left: 13%; width: 67%; height: 4px; }
.webdev-device-mobile .webdev-device-screen i { top: 39%; left: 13%; width: 74%; height: 20%; }
.webdev-device-mobile .webdev-device-screen em { right: 13%; bottom: 14%; width: 52%; height: 28%; }

.webdev-faq-section { background: #0b1836; }
.webdev-faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 75px; align-items: start; }
.webdev-text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 25px; color: #9ec0ff; font-size: 12px; font-weight: 850; text-decoration: none; }
.webdev-text-link i { transition: transform var(--webdev-ease); }
.webdev-text-link:hover i { transform: translateX(4px); }
.webdev-faq-list { border-top: 1px solid var(--webdev-line); }
.webdev-faq-item { border-bottom: 1px solid var(--webdev-line); }
.webdev-faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; border: 0; color: #edf3ff; background: transparent; font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
.webdev-faq-item button i { color: #91addd; font-size: 12px; transition: transform var(--webdev-ease), color var(--webdev-ease); }
.webdev-faq-item.is-open button i { color: var(--webdev-yellow); transform: rotate(45deg); }
.webdev-faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms ease; }
.webdev-faq-answer p { min-height: 0; overflow: hidden; margin: 0; color: #91a6c9; font-size: 12px; line-height: 1.7; }
.webdev-faq-item.is-open .webdev-faq-answer { grid-template-rows: 1fr; }
.webdev-faq-item.is-open .webdev-faq-answer p { padding: 0 42px 20px 0; }

.webdev-cta-section { position: relative; isolation: isolate; overflow: hidden; padding: 105px 0; background: linear-gradient(125deg, #111f4a, #102a62 60%, #172450); }
.webdev-cta-inner { position: relative; z-index: 1; text-align: center; }
.webdev-cta-inner .webdev-kicker { justify-content: center; }
.webdev-cta-inner h2 { max-width: 700px; margin: 15px auto; color: #fff; font-size: clamp(34px, 4.5vw, 57px); line-height: 1.02; letter-spacing: -0.045em; }
.webdev-cta-inner p { max-width: 540px; margin: 0 auto; color: #aebede; font-size: 15px; line-height: 1.7; }
.webdev-cta-inner .webdev-actions { justify-content: center; margin-top: 28px; }
.webdev-cta-orb-one { top: -100px; left: -70px; width: 270px; height: 270px; border: 1px solid rgba(103, 215, 255, 0.23); box-shadow: 0 0 100px rgba(103, 215, 255, 0.15); }
.webdev-cta-orb-two { right: -50px; bottom: -125px; width: 300px; height: 300px; border: 1px solid rgba(247, 189, 53, 0.22); box-shadow: 0 0 90px rgba(247, 189, 53, 0.11); }

@keyframes webdevGridMove { from { background-position: 0 0; } to { background-position: 54px 54px; } }
@keyframes webdevFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes webdevPulse { 0%, 100% { opacity: 0.48; } 50% { opacity: 1; } }

@media (max-width: 1050px) {
    .webdev-hero-layout { grid-template-columns: minmax(0, 0.9fr) minmax(410px, 1.1fr); gap: 25px; }
    .webdev-float-card { transform: scale(0.9); }
    .webdev-performance-card { left: -7%; }
    .webdev-ready-card { right: -7%; }
}

@media (max-width: 820px) {
    .webdev-hero { min-height: auto; }
    .webdev-hero-layout, .webdev-showcase-layout, .webdev-faq-layout { grid-template-columns: 1fr; }
    .webdev-hero-layout { padding: 72px 0 82px; }
    .webdev-hero-copy { max-width: 650px; }
    .webdev-hero-visual { min-height: 435px; margin-top: 12px; }
    .webdev-service-grid { grid-template-columns: repeat(2, 1fr); }
    .webdev-process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 38px; }
    .webdev-process-grid::before { top: 23px; left: 12%; right: 12%; }
    .webdev-bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .webdev-bento-feature { grid-row: auto; grid-column: 1 / -1; min-height: 330px; }
    .webdev-bento-wide { grid-column: 1 / -1; }
    .webdev-faq-layout { gap: 42px; }
    .webdev-showcase-layout { gap: 20px; }
}

@media (max-width: 560px) {
    .webdev-shell { width: min(100% - 30px, 1180px); }
    .webdev-hero-layout { padding: 54px 0 55px; }
    .webdev-hero h1 { margin-top: 18px; font-size: clamp(39px, 12vw, 56px); }
    .webdev-hero-intro { font-size: 14px; line-height: 1.65; }
    .webdev-actions { align-items: stretch; flex-direction: column; }
    .webdev-button { width: 100%; }
    .webdev-hero-proof { gap: 9px; flex-direction: column; }
    .webdev-hero-visual { min-height: 335px; margin: 5px -8px 0; }
    .webdev-browser { transform: none; }
    .webdev-browser-bar { height: 37px; padding: 0 10px; }
    .webdev-browser-url { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .webdev-browser-body { min-height: 280px; padding: 16px 17px 18px; }
    .webdev-preview-content { gap: 10px; margin-top: 28px; }
    .webdev-preview-text strong { font-size: 20px; }
    .webdev-preview-art { min-height: 135px; }
    .webdev-code-lines { margin-top: 20px; }
    .webdev-float-card { min-width: 126px; padding: 8px; gap: 6px; transform: scale(0.78); transform-origin: center; }
    .webdev-float-card > span { width: 25px; height: 25px; flex-basis: 25px; font-size: 11px; }
    .webdev-performance-card { top: 0; left: -10px; }
    .webdev-ready-card { right: -10px; bottom: 16%; }
    .webdev-seo-card { bottom: 0; left: 12%; }
    .webdev-trust-items { grid-template-columns: 1fr 1fr; }
    .webdev-trust-items span { min-height: 60px; padding: 7px 8px; font-size: 10px; }
    .webdev-trust-items span:nth-child(2) { border-right: 0; }
    .webdev-trust-items span:nth-child(-n+2) { border-bottom: 1px solid var(--webdev-line); }
    .webdev-section { padding: 76px 0; }
    .webdev-section-heading { margin-bottom: 30px; }
    .webdev-section-heading h2 { font-size: 34px; }
    .webdev-section-heading p { font-size: 13px; }
    .webdev-service-grid, .webdev-stack-grid { grid-template-columns: 1fr; }
    .webdev-service-card { min-height: 0; padding: 19px; }
    .webdev-service-icon { margin-bottom: 17px; }
    .webdev-service-card p { min-height: 0; margin-bottom: 15px; }
    .webdev-process-grid { grid-template-columns: 1fr; gap: 0; padding-left: 22px; }
    .webdev-process-grid::before { top: 23px; bottom: 23px; left: 22px; right: auto; width: 1px; height: auto; background: linear-gradient(transparent, rgba(102, 157, 255, 0.72), rgba(166, 126, 255, 0.72), transparent); }
    .webdev-process-step { display: grid; grid-template-columns: 47px 1fr; gap: 20px; min-height: 125px; }
    .webdev-process-node { margin: 0; }
    .webdev-process-step p { max-width: none; }
    .webdev-bento-grid { grid-template-columns: 1fr; }
    .webdev-bento-feature, .webdev-bento-wide { grid-column: auto; }
    .webdev-bento-feature { min-height: 340px; padding: 23px; }
    .webdev-bento-mark { margin-top: 40px; }
    .webdev-bento-wide { display: block; padding: 20px; }
    .webdev-bento-tags { justify-content: flex-start; margin-top: 18px; }
    .webdev-devices { min-height: 275px; margin: 0 -18px; transform: scale(0.86); transform-origin: top center; }
    .webdev-device-desktop { left: 1%; width: 80%; }
    .webdev-device-desktop .webdev-device-screen { height: 180px; }
    .webdev-device-tablet { right: 5%; }
    .webdev-device-tablet .webdev-device-screen { height: 155px; }
    .webdev-device-mobile { right: 0; }
    .webdev-device-mobile .webdev-device-screen { height: 130px; }
    .webdev-faq-item button { padding: 18px 0; font-size: 13px; }
    .webdev-cta-section { padding: 75px 0; }
    .webdev-cta-inner p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .webdev-page *,
    .webdev-page *::before,
    .webdev-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .webdev-reveal { opacity: 1; transform: none; }
}

/* =========================================================
   2026 SECTION RHYTHM
   Keep each page band visually distinct without touching the
   global header, navigation, or footer behavior.
========================================================= */

.webdev-page {
    --webdev-light-bg: #f6f8fc;
    --webdev-light-panel: #ffffff;
    --webdev-dark-text: #17233f;
    --webdev-light-muted: #71809e;
    --webdev-light-border: #dce5f4;
    background: #f4f7fc;
}

.webdev-hero {
    min-height: 700px;
    background:
        radial-gradient(circle at 79% 33%, rgba(71, 119, 255, 0.24), transparent 27%),
        radial-gradient(circle at 12% 86%, rgba(255, 181, 27, 0.11), transparent 22%),
        linear-gradient(135deg, #06112b 0%, #0b1b43 56%, #171b4a 100%);
}

.webdev-hero::after {
    background: linear-gradient(transparent, #0b2046);
}

.webdev-trust-strip {
    background: #eef3fa;
    border-top: 1px solid #dce5f4;
    border-bottom: 1px solid #dce5f4;
}

.webdev-trust-items span {
    min-height: 76px;
    color: #536783;
    border-right-color: #dce5f4;
    transition: color var(--webdev-ease), background var(--webdev-ease), transform var(--webdev-ease);
}

.webdev-trust-items span:hover {
    color: #12213f;
    background: #ffffff;
    transform: translateY(-2px);
}

.webdev-section.webdev-services {
    color: var(--webdev-dark-text);
    background: #f6f8fc;
    border-top: 1px solid #e5ebf5;
    border-bottom: 1px solid #dce5f4;
}

.webdev-services .webdev-section-heading h2,
.webdev-services .webdev-section-heading p {
    color: var(--webdev-dark-text);
}

.webdev-services .webdev-section-heading p {
    color: var(--webdev-light-muted);
}

.webdev-services .webdev-kicker,
.webdev-why-section .webdev-kicker {
    color: #d58b00;
}

.webdev-service-card {
    min-height: 292px;
    padding: 25px;
    border-color: #dce5f4;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(18, 40, 83, 0.07);
}

.webdev-service-card::before {
    inset: 0 0 auto;
    height: 4px;
    border-radius: var(--webdev-radius) var(--webdev-radius) 0 0;
    opacity: 1;
    background: linear-gradient(90deg, #315fce, #9270e8, #ffb51b);
}

.webdev-service-card:hover {
    border-color: #b9cdef;
    box-shadow: 0 22px 42px rgba(23, 52, 108, 0.14);
}

.webdev-service-card h3 {
    color: var(--webdev-dark-text);
}

.webdev-service-card p {
    color: var(--webdev-light-muted);
}

.webdev-service-card a {
    color: #315fce;
}

.webdev-card-number {
    color: #a2aec1;
}

.webdev-section.webdev-process-section {
    color: #f5f8ff;
    background: linear-gradient(135deg, #102653 0%, #172f68 58%, #222557 100%);
    border-top: 1px solid rgba(130, 166, 235, 0.2);
    border-bottom: 1px solid rgba(130, 166, 235, 0.28);
}

.webdev-process-section .webdev-section-heading h2,
.webdev-process-section .webdev-section-heading p {
    color: #ffffff;
}

.webdev-process-section .webdev-section-heading p,
.webdev-process-step p {
    color: #b4c4e1;
}

.webdev-process-grid::before {
    background: linear-gradient(90deg, transparent, #6d91df, #a886e8, transparent);
}

.webdev-process-node {
    color: #b9d0ff;
    background: #102653;
    border-color: #6b8fdf;
    box-shadow: 0 0 0 7px #102653, 0 0 25px rgba(91, 140, 255, 0.28);
}

.webdev-process-step h3 {
    color: #ffffff;
}

.webdev-process-step:nth-child(2) .webdev-process-node {
    color: #d1baff;
    background: #142a5d;
    border-color: #a886e8;
    box-shadow: 0 0 0 7px #142a5d, 0 0 25px rgba(132, 90, 215, 0.25);
}

.webdev-process-step:nth-child(3) .webdev-process-node {
    color: #9ce6ca;
    background: #12345a;
    border-color: #55bea1;
    box-shadow: 0 0 0 7px #12345a, 0 0 25px rgba(47, 170, 134, 0.25);
}

.webdev-process-step:nth-child(4) .webdev-process-node {
    color: #ffd778;
    background: #273259;
    border-color: #eab34e;
    box-shadow: 0 0 0 7px #273259, 0 0 25px rgba(234, 179, 78, 0.25);
}

.webdev-why-section {
    background-color: #ffffff;
    background-image: radial-gradient(#dce5f4 0.8px, transparent 0.8px);
    background-size: 24px 24px;
    border-bottom: 1px solid #dce5f4;
}

.webdev-why-section .webdev-section-heading h2,
.webdev-why-section .webdev-section-heading p {
    color: var(--webdev-dark-text);
}

.webdev-why-section .webdev-section-heading p {
    color: var(--webdev-light-muted);
}

.webdev-bento-feature,
.webdev-bento-item,
.webdev-bento-wide {
    border-color: #dce5f4;
    box-shadow: 0 14px 32px rgba(20, 43, 84, 0.07);
}

.webdev-bento-feature {
    background: linear-gradient(145deg, #e8f0ff, #dce8ff 58%, #f1eaff);
}

.webdev-bento-feature h3,
.webdev-bento-item h3,
.webdev-bento-wide h3 {
    color: var(--webdev-dark-text);
}

.webdev-bento-feature p,
.webdev-bento-item p,
.webdev-bento-wide p {
    color: var(--webdev-light-muted);
}

.webdev-bento-label {
    color: #315fce;
}

.webdev-bento-mark {
    color: #315fce;
    background: rgba(49, 95, 206, 0.1);
    border-color: rgba(49, 95, 206, 0.22);
}

.webdev-bento-item:nth-child(2) {
    background: #f1eaff;
}

.webdev-bento-item:nth-child(3) {
    background: #e5f8f1;
}

.webdev-bento-item > i,
.webdev-bento-wide > div > i {
    color: #d58b00;
}

.webdev-bento-wide {
    background: #fff1d8;
}

.webdev-bento-tags span {
    color: #82621b;
    border-color: #e8c976;
    background: rgba(255, 255, 255, 0.42);
}

.webdev-section.webdev-stack-section {
    color: #12213f;
    background: #f4f7fc;
    border-top: 1px solid #dce5f4;
    border-bottom: 1px solid #dce5f4;
}

.webdev-stack-section .webdev-section-heading h2 {
    color: #12213f;
}
.webdev-stack-section .webdev-section-heading p {
    color: #6c7c99;
}

.webdev-stack-section .webdev-kicker {
    color: #d58b00;
}

.webdev-stack-badge {
    border-radius: 999px;
    border-color: #dce5f4;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(24, 51, 99, 0.06);
}

.webdev-stack-badge > b {
    border-color: #c8d7ef;
    color: #315fce;
    background: #edf3ff;
}

.webdev-stack-badge:nth-child(2n) > b {
    color: #b97900;
    background: #fff1d8;
}

.webdev-stack-badge:hover {
    transform: translateY(-5px);
    border-color: rgba(108, 163, 255, 0.58);
    background: rgba(31, 57, 111, 0.76);
}

.webdev-stack-badge strong {
    display: block;
    color: #12213f;
    font-size: 12px;
}

.webdev-stack-badge small {
    color: #71809e;
}

.webdev-stack-badge:hover strong {
    color: #ffffff;
}

.webdev-stack-badge:hover {
    background: rgba(31, 57, 111, 0.76);
}

.webdev-stack-badge:hover small {
    color: #d7e4ff;
}

.webdev-stack-badge:hover > b {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.14);
}

.webdev-showcase-section {
    color: #12213f;
    background: #ffffff;
    border-top: 1px solid #e5ebf5;
    border-bottom: 1px solid #dce5f4;
}

.webdev-showcase-section .webdev-section-heading h2 {
    color: #12213f;
}

.webdev-showcase-section .webdev-section-heading p {
    color: #6c7c99;
}

.webdev-showcase-labels span {
    color: #526684;
    border-color: #dce5f4;
    background: #f4f7fc;
    box-shadow: 0 7px 18px rgba(24, 51, 99, 0.05);
}

.webdev-section.webdev-faq-section {
    color: #12213f;
    background: #ffffff;
    border-top: 1px solid #e5ebf5;
    border-bottom: 1px solid #dce5f4;
}

.webdev-faq-section .webdev-section-heading h2 {
    color: #12213f;
}

.webdev-faq-section .webdev-section-heading p,
.webdev-faq-section .webdev-faq-item button {
    color: #6c7c99;
}

.webdev-faq-section .webdev-faq-list {
    border-top-color: #dce5f4;
}

.webdev-faq-section .webdev-faq-item {
    border-bottom-color: #dce5f4;
}

.webdev-faq-section .webdev-faq-item button i {
    color: #315fce;
}

.webdev-faq-section .webdev-faq-answer p {
    color: #6c7c99;
}

.webdev-cta-section {
    border-top: 1px solid rgba(160, 190, 255, 0.26);
    background: linear-gradient(120deg, #203f9b 0%, #533d9b 62%, #7b456b 100%);
}

.webdev-cta-section::after {
    background: linear-gradient(transparent, #07142f);
}

.webdev-page ~ .site-footer {
    position: relative;
    border-top: 1px solid rgba(126, 161, 222, 0.22);
    background: #030a1d;
}

.webdev-page ~ .site-footer .footer-column,
.webdev-page ~ .site-footer .footer-contact {
    border-left-color: rgba(140, 170, 226, 0.15);
}

.webdev-page ~ .site-footer .footer-socials a {
    border: 1px solid rgba(140, 170, 226, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 560px) {
    .webdev-page ~ .site-footer .footer-column,
    .webdev-page ~ .site-footer .footer-contact {
        border-left: 0;
        border-top-color: rgba(140, 170, 226, 0.15);
    }
}

/* =========================================================
   FAQ AND FINAL CTA SEPARATION
========================================================= */

.webdev-section.webdev-faq-section {
    padding: 104px 0 112px;
    background: #f4f7fc;
    border-top: 1px solid #e0e8f4;
    border-bottom: 0;
}

.webdev-faq-section .webdev-faq-layout {
    gap: 70px;
    align-items: center;
}

.webdev-faq-section .webdev-section-heading {
    margin-bottom: 0;
}

.webdev-faq-section .webdev-kicker {
    color: #d58b00;
}

.webdev-faq-section .webdev-section-heading h2 {
    color: #12213f;
}

.webdev-faq-section .webdev-section-heading p,
.webdev-faq-section .webdev-faq-answer p {
    color: #6c7c99;
}

.webdev-faq-section .webdev-faq-list {
    padding: 10px 18px;
    border: 1px solid #dce5f4;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 20px 46px rgba(20, 48, 97, 0.1);
}

.webdev-faq-section .webdev-faq-item {
    margin: 5px 0;
    border: 1px solid transparent;
    border-bottom-color: #e3eaf4;
    border-radius: 13px;
    transition: background var(--webdev-ease), border-color var(--webdev-ease), box-shadow var(--webdev-ease);
}

.webdev-faq-section .webdev-faq-item:last-child {
    border-bottom-color: transparent;
}

.webdev-faq-section .webdev-faq-item:hover,
.webdev-faq-section .webdev-faq-item.is-open {
    border-color: #d7e2f3;
    background: #f7faff;
    box-shadow: 0 8px 18px rgba(38, 78, 143, 0.06);
}

.webdev-faq-section .webdev-faq-item button {
    padding: 20px 16px;
    color: #12213f;
}

.webdev-faq-section .webdev-faq-item button i {
    color: #315fce;
    transition: transform var(--webdev-ease), color var(--webdev-ease);
}

.webdev-faq-section .webdev-faq-item.is-open button i {
    color: #d58b00;
    transform: rotate(45deg) scale(1.08);
}

.webdev-faq-section .webdev-faq-item.is-open .webdev-faq-answer p {
    padding: 0 16px 20px;
}

.webdev-cta-section {
    width: min(1240px, calc(100% - 40px));
    margin: 88px auto 0;
    padding: 108px 0 112px;
    border: 1px solid rgba(129, 170, 247, 0.28);
    border-bottom: 0;
    border-radius: 32px 32px 0 0;
    background:
        radial-gradient(circle at 10% 15%, rgba(82, 145, 255, 0.26), transparent 28%),
        radial-gradient(circle at 88% 84%, rgba(255, 181, 27, 0.13), transparent 24%),
        linear-gradient(135deg, #07152f 0%, #102653 58%, #202454 100%);
    box-shadow: 0 -16px 50px rgba(18, 47, 104, 0.11);
}

.webdev-cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    opacity: 0.28;
    background-image: linear-gradient(rgba(136, 174, 244, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(136, 174, 244, 0.16) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.webdev-cta-section::after {
    inset: 0;
    height: auto;
    z-index: -3;
    border-radius: inherit;
    background: transparent;
}

.webdev-cta-section .webdev-cta-inner {
    max-width: 760px;
}

.webdev-cta-section .webdev-cta-inner h2 {
    color: #ffffff;
}

.webdev-cta-section .webdev-cta-inner p {
    color: #b8c9e7;
}

.webdev-cta-section .webdev-cta-orb-one {
    top: 10%;
    left: 7%;
    width: 110px;
    height: 110px;
    border-color: rgba(103, 215, 255, 0.34);
    box-shadow: 0 0 65px rgba(103, 215, 255, 0.22);
}

.webdev-cta-section .webdev-cta-orb-two {
    right: 8%;
    bottom: 13%;
    width: 150px;
    height: 150px;
    border-color: rgba(255, 181, 27, 0.28);
    box-shadow: 0 0 70px rgba(255, 181, 27, 0.16);
}

.webdev-cta-section .webdev-cta-inner::before,
.webdev-cta-section .webdev-cta-inner::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #67d7ff;
    box-shadow: 0 0 18px #67d7ff;
    animation: webdevCtaDot 4s ease-in-out infinite;
}

.webdev-cta-section .webdev-cta-inner::before {
    top: 16%;
    left: 0;
}

.webdev-cta-section .webdev-cta-inner::after {
    right: 2%;
    bottom: 15%;
    background: #ffb51b;
    box-shadow: 0 0 18px #ffb51b;
    animation-delay: 1.2s;
}

@keyframes webdevCtaDot {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50% { transform: translateY(-12px); opacity: 1; }
}

@media (max-width: 820px) {
    .webdev-section.webdev-faq-section {
        padding: 82px 0 88px;
    }

    .webdev-faq-section .webdev-faq-layout {
        gap: 38px;
    }
}

@media (max-width: 560px) {
    .webdev-section.webdev-faq-section {
        padding: 70px 0 78px;
    }

    .webdev-faq-section .webdev-faq-list {
        padding: 8px 10px;
        border-radius: 18px;
    }

    .webdev-faq-section .webdev-faq-item button {
        padding: 17px 12px;
        font-size: 13px;
    }

    .webdev-faq-section .webdev-faq-item.is-open .webdev-faq-answer p {
        padding: 0 12px 17px;
    }

    .webdev-cta-section {
        width: calc(100% - 24px);
        margin-top: 70px;
        padding: 76px 15px 82px;
        border-radius: 24px 24px 0 0;
    }

    .webdev-cta-section .webdev-cta-orb-one {
        left: -35px;
    }

    .webdev-cta-section .webdev-cta-orb-two {
        right: -45px;
    }

    .webdev-cta-section .webdev-cta-inner::before {
        left: 4%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webdev-cta-section .webdev-cta-inner::before,
    .webdev-cta-section .webdev-cta-inner::after {
        animation: none;
    }
}

/* =========================================================
   FULL-WIDTH HOME-STYLE CTA
========================================================= */

.webdev-cta-section {
    width: 100%;
    margin: 0;
    padding: 85px 0;
    border: 0;
    border-top: 1px solid rgba(132, 171, 244, 0.28);
    border-bottom: 1px solid rgba(132, 171, 244, 0.22);
    border-radius: 0;
    box-shadow: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(77, 141, 255, 0.2), transparent 25%),
        radial-gradient(circle at 88% 82%, rgba(255, 181, 27, 0.08), transparent 22%),
        linear-gradient(135deg, #07152f 0%, #102653 58%, #142e67 100%);
}

.webdev-cta-section::before {
    inset: 0;
    border-radius: 0;
    opacity: 0.2;
    background-size: 52px 52px;
}

.webdev-cta-section .webdev-cta-inner {
    max-width: 760px;
}

.webdev-cta-section .webdev-cta-inner h2 {
    max-width: 680px;
    margin: 14px auto 13px;
    color: #ffffff;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.05;
}

.webdev-cta-section .webdev-cta-inner p {
    max-width: 520px;
    color: #b8c7e5;
    font-size: 15px;
    line-height: 1.65;
}

.webdev-cta-section .webdev-cta-inner .webdev-actions {
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

.webdev-cta-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 26px;
    margin-top: 25px;
    color: #b8c7e5;
    font-size: 11px;
    font-weight: 750;
}

.webdev-cta-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.webdev-cta-trust i {
    color: #ffb51b;
    font-size: 11px;
}

.webdev-cta-section .webdev-cta-orb-one {
    top: 18%;
    left: 8%;
    width: 105px;
    height: 105px;
    border-color: rgba(103, 215, 255, 0.24);
    box-shadow: 0 0 55px rgba(103, 215, 255, 0.14);
}

.webdev-cta-section .webdev-cta-orb-two {
    right: 9%;
    bottom: 14%;
    width: 125px;
    height: 125px;
    border-color: rgba(255, 181, 27, 0.2);
    box-shadow: 0 0 58px rgba(255, 181, 27, 0.1);
}

.webdev-page ~ .site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: #030a1d;
}

@media (max-width: 560px) {
    .webdev-cta-section {
        width: 100%;
        padding: 55px 0;
        border-radius: 0;
    }

    .webdev-cta-section .webdev-cta-inner .webdev-actions {
        margin-top: 23px;
    }

    .webdev-cta-trust {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        width: max-content;
        margin: 22px auto 0;
        text-align: left;
    }
}

/* Final toolkit contrast states. */
.webdev-stack-badge {
    background: #ffffff !important;
}

.webdev-stack-badge strong {
    color: #12213f !important;
}

.webdev-stack-badge small {
    color: #71809e !important;
}

.webdev-stack-badge:hover {
    background: rgba(31, 57, 111, 0.76) !important;
}

.webdev-stack-badge:hover strong {
    color: #ffffff !important;
}

.webdev-stack-badge:hover small {
    color: #d7e4ff !important;
}