.web-hero {
    position: relative;
    min-height: 700px;
    overflow: hidden;
    padding: calc(var(--header-height) + 72px) 0 88px;
    background:
        radial-gradient(circle at 77% 42%, rgba(0,150,255,.18), transparent 29%),
        radial-gradient(circle at 64% 100%, rgba(0,91,184,.11), transparent 32%),
        linear-gradient(120deg, #010711 0%, #020b18 55%, #01060e 100%);
}

.web-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .30;
    background-image:
        linear-gradient(rgba(77,189,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77,189,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.55) 50%, #000);
}

.web-hero__inner {
    position: relative;
    z-index: 2;
    min-height: 520px;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: 52px;
}

.eyebrow {
    margin: 0 0 12px;
    color: #6dcfff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
}

.breadcrumb {
    margin: 0 0 24px;
    color: #66849e;
    font-size: 11px;
}

.breadcrumb a { color: #8ca8bd; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb span { margin: 0 8px; }

.web-hero h1 {
    margin: 0;
    font-size: clamp(54px, 6.8vw, 90px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.web-hero__lead {
    margin: 26px 0 0;
    color: #e5f3ff;
    font-size: clamp(24px, 3vw, 37px);
    font-weight: 600;
    line-height: 1.5;
}

.web-hero__text {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.web-hero__visual {
    position: relative;
    height: 500px;
}

.web-browser {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(87,190,255,.30);
    border-radius: 8px;
    background: rgba(3,17,31,.82);
    box-shadow: 0 30px 70px rgba(0,0,0,.32), 0 0 32px rgba(0,151,255,.08);
}

.web-browser--back {
    top: 88px;
    left: 2%;
    width: 72%;
    height: 310px;
    opacity: .38;
    transform: rotate(-7deg);
}

.web-browser--main {
    z-index: 2;
    top: 78px;
    right: 0;
    width: 84%;
    height: 360px;
    transform: rotate(3deg);
}

.web-browser__bar {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border-bottom: 1px solid rgba(75,176,238,.18);
    background: rgba(7,34,59,.90);
}

.web-browser__bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(91,197,255,.48);
}

.web-browser__bar span {
    width: 46%;
    height: 8px;
    margin-left: 14px;
    border-radius: 10px;
    background: rgba(76,183,241,.13);
}

.web-browser__screen {
    height: calc(100% - 34px);
    padding: 18px 22px;
    background:
        radial-gradient(circle at 78% 35%, rgba(27,140,213,.13), transparent 28%),
        rgba(2,12,24,.90);
}

.web-browser__nav {
    display: flex;
    align-items: center;
    gap: 13px;
    height: 28px;
}

.web-browser__nav b {
    width: 70px;
    height: 7px;
    margin-right: auto;
    background: rgba(111,211,255,.45);
}

.web-browser__nav em {
    width: 31px;
    height: 5px;
    background: rgba(122,175,207,.22);
}

.web-browser__hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 21px;
    align-items: center;
    min-height: 170px;
    margin-top: 11px;
    padding: 22px;
    border: 1px solid rgba(77,186,249,.14);
    background: linear-gradient(130deg, rgba(4,32,55,.78), rgba(2,16,29,.58));
}

.web-browser__hero > div:first-child strong,
.web-browser__hero > div:first-child span,
.web-browser__hero > div:first-child small {
    display: block;
}

.web-browser__hero strong {
    width: 84%;
    height: 11px;
    margin-bottom: 10px;
    background: rgba(106,207,255,.48);
}

.web-browser__hero strong:nth-child(2) { width: 60%; }

.web-browser__hero span {
    width: 92%;
    height: 6px;
    margin-top: 18px;
    background: rgba(164,194,216,.17);
}

.web-browser__hero small {
    width: 70px;
    height: 18px;
    margin-top: 18px;
    border: 1px solid rgba(70,190,255,.35);
    border-radius: 20px;
    background: rgba(36,180,255,.07);
}

.web-browser__visualbox {
    height: 116px;
    border: 1px solid rgba(75,188,250,.24);
    background:
        linear-gradient(135deg, transparent 40%, rgba(34,172,245,.13) 41% 60%, transparent 61%),
        radial-gradient(circle, rgba(70,195,255,.22), transparent 55%),
        rgba(7,35,59,.54);
}

.web-browser__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 13px;
}

.web-browser__cards i {
    height: 58px;
    border: 1px solid rgba(69,179,241,.14);
    background: rgba(8,37,62,.42);
}

.web-orbit {
    position: absolute;
    z-index: 1;
    top: 30px;
    right: 4%;
    width: 410px;
    height: 410px;
    border: 1px solid rgba(41,178,255,.12);
    border-radius: 50%;
    transform: rotate(-22deg);
}

.web-orbit::before,
.web-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(41,178,255,.11);
    border-radius: 50%;
}

.web-orbit::before { inset: 50px; }
.web-orbit::after { inset: 105px; }

.web-label {
    position: absolute;
    z-index: 5;
    padding: 10px 14px;
    border: 1px solid rgba(78,188,255,.25);
    border-radius: 999px;
    background: rgba(3,17,31,.86);
    color: #8fd6fb;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}

.web-label--design { top: 42px; right: 24%; }
.web-label--seo { bottom: 34px; left: 9%; }
.web-label--operation { bottom: 55px; right: 2%; }

.web-intro {
    overflow: hidden;
    background: linear-gradient(180deg, #030b16, #051321);
}

.web-intro::after {
    content: "";
    position: absolute;
    right: -160px;
    top: 50%;
    width: 500px;
    height: 500px;
    transform: translateY(-50%);
    background: url("../img/symbol_crossgear.png") center / contain no-repeat;
    opacity: .024;
}

.web-intro__inner {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 95px;
}

.web-intro__body {
    position: relative;
    z-index: 2;
    max-width: 650px;
    color: var(--muted);
}

.web-intro__body p { margin: 0 0 18px; }

.web-intro__lead {
    color: #e8f4ff;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 600;
    line-height: 1.6;
}

.web-types {
    background:
        radial-gradient(circle at 50% 0, rgba(0,126,219,.10), transparent 28%),
        #03101d;
}

.web-types__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.web-type-card {
    position: relative;
    min-height: 365px;
    padding: 36px 38px 34px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(6,27,48,.68), rgba(2,11,23,.82));
    transition: transform .25s ease, background .25s ease;
}

.web-type-card:hover {
    z-index: 2;
    transform: translateY(-4px);
    background: linear-gradient(145deg, rgba(7,37,65,.94), rgba(3,17,31,.96));
}

.web-type-card__number {
    color: rgba(78,176,239,.50);
    font-size: 20px;
    font-weight: 700;
}

.web-type-card__icon {
    position: relative;
    width: 58px;
    height: 46px;
    margin: 25px 0 18px;
    border: 1px solid rgba(75,191,255,.58);
    box-shadow: inset 0 0 18px rgba(36,180,255,.06);
}

.web-type-card__icon::before,
.web-type-card__icon::after {
    content: "";
    position: absolute;
}

.web-type-card__icon--corporate::before {
    top: 8px;
    left: 9px;
    width: 38px;
    height: 5px;
    background: rgba(77,198,255,.50);
    box-shadow: 0 11px 0 rgba(77,198,255,.20), 0 22px 0 rgba(77,198,255,.20);
}

.web-type-card__icon--service::before {
    top: 9px;
    left: 8px;
    width: 17px;
    height: 27px;
    background: rgba(55,175,240,.28);
}

.web-type-card__icon--service::after {
    top: 9px;
    right: 8px;
    width: 20px;
    height: 6px;
    background: rgba(91,206,255,.48);
    box-shadow: 0 11px 0 rgba(91,206,255,.18), 0 21px 0 rgba(91,206,255,.18);
}

.web-type-card__icon--lp::before {
    top: 7px;
    left: 7px;
    right: 7px;
    height: 12px;
    background: rgba(75,194,251,.28);
}

.web-type-card__icon--lp::after {
    top: 25px;
    left: 14px;
    width: 28px;
    height: 11px;
    border: 1px solid rgba(87,203,255,.40);
    border-radius: 10px;
}

.web-type-card__icon--renewal::before {
    width: 24px;
    height: 24px;
    top: 9px;
    left: 16px;
    border: 2px solid rgba(76,198,255,.42);
    border-right-color: transparent;
    border-radius: 50%;
}

.web-type-card__icon--renewal::after {
    top: 7px;
    right: 11px;
    border-left: 6px solid rgba(76,198,255,.52);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transform: rotate(35deg);
}

.web-type-card h3 {
    margin: 0 0 14px;
    font-size: clamp(22px, 2.3vw, 30px);
}

.web-type-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.web-type-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.web-type-card li {
    padding: 6px 11px;
    border: 1px solid rgba(76,184,255,.18);
    border-radius: 999px;
    color: #b8d3e6;
    font-size: 11px;
}

.web-points { background: #020914; }

.web-points__list {
    border-top: 1px solid var(--line);
}

.web-points__list article {
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 34px;
    padding: 42px 12px 42px 0;
    border-bottom: 1px solid var(--line);
}

.web-points__list article > span {
    color: var(--blue);
    font-size: 13px;
    font-weight: 800;
}

.web-points__list h3 {
    margin: 0 0 10px;
    font-size: 22px;
}

.web-points__list p {
    max-width: 780px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.web-flow {
    background:
        radial-gradient(circle at 80% 50%, rgba(0,126,219,.10), transparent 30%),
        #04111f;
}

.web-flow__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    list-style: none;
}

.web-flow__list li {
    min-height: 240px;
    padding: 28px 24px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.web-flow__list li > span {
    color: #59c7ff;
    font-size: 12px;
    font-weight: 800;
}

.web-flow__list h3 {
    margin: 30px 0 10px;
    font-size: 17px;
}

.web-flow__list p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.web-related {
    overflow: hidden;
    background: #020914;
}

.web-related__inner {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.web-related h2 {
    margin: 0 0 18px;
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.35;
}

.web-related p:not(.section-heading__en) {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
}

.web-related__card {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px;
    border: 1px solid rgba(66,183,255,.27);
    background:
        radial-gradient(circle at 85% 25%, rgba(25,152,236,.18), transparent 35%),
        linear-gradient(135deg, rgba(5,30,52,.92), rgba(2,13,25,.94));
    transition: transform .25s ease, border-color .25s ease;
}

.web-related__card:hover {
    transform: translateY(-4px);
    border-color: rgba(76,202,255,.55);
}

.web-related__card small {
    color: #67c9fa;
    font-weight: 700;
    letter-spacing: .16em;
}

.web-related__card strong {
    margin-top: 10px;
    font-size: clamp(26px, 3vw, 38px);
}

.web-related__card span {
    margin-top: 34px;
    color: #7fd5ff;
    font-size: 13px;
    font-weight: 700;
}

.contact-cta {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    border-top: 1px solid rgba(50,172,255,.16);
    background:
        radial-gradient(circle at 20% 50%, rgba(0,159,255,.16), transparent 28%),
        linear-gradient(105deg, #061a2d, #03101e 62%, #020a14);
}

.contact-cta::after {
    content: "";
    position: absolute;
    right: -70px;
    top: 50%;
    width: 390px;
    height: 390px;
    background: url("../img/symbol_crossgear.png") center / contain no-repeat;
    opacity: .035;
    transform: translateY(-50%);
}

.contact-cta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.contact-cta h2 {
    margin: 0 0 14px;
    font-size: clamp(34px, 4.3vw, 54px);
    line-height: 1.3;
}

.contact-cta p:not(.section-heading__en) {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 1050px) {
    .web-flow__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
    .web-hero__inner,
    .web-intro__inner,
    .web-related__inner {
        grid-template-columns: 1fr;
    }

    .web-hero__visual {
        max-width: 650px;
        width: 100%;
        margin-inline: auto;
    }

    .web-intro__inner,
    .web-related__inner { gap: 42px; }
}

@media (max-width: 700px) {
    .web-hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + 48px);
        padding-bottom: 55px;
    }

    .web-hero h1 { font-size: clamp(49px, 14vw, 68px); }
    .web-hero__lead { font-size: 24px; }
    .web-hero__text br.pc-only { display: none; }

    .web-hero__visual {
        height: 340px;
        margin-bottom: -30px;
        transform: scale(.9);
        transform-origin: top center;
    }

    .web-types__grid,
    .web-flow__list {
        grid-template-columns: 1fr;
    }

    .web-type-card {
        min-height: 0;
        padding: 32px 26px;
    }

    .web-points__list article {
        grid-template-columns: 48px 1fr;
        gap: 14px;
        padding: 32px 0;
    }

    .web-flow__list li {
        min-height: 0;
        padding: 28px 25px;
    }

    .web-flow__list h3 { margin-top: 18px; }

    .web-related__card {
        min-height: 220px;
        padding: 30px 26px;
    }

    .contact-cta__inner {
        align-items: flex-start;
        flex-direction: column;
    }
}