:root {
    color-scheme: dark !important;

    --background: #0b1018 !important;
    --surface: #151d2b !important;
    --text: #e7edf7 !important;
    --muted: #a0aec0 !important;
    --border: #2b374a !important;
    --primary: #82adff !important;
    --secondary: #94A3B8 !important;
}

* {
    box-sizing: border-box !important;
}

body {
    margin: 0 !important;
    background: var(--background) !important;
    color: var(--text) !important;
    font-family: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-optical-sizing: auto !important;
    font-variation-settings: "wdth" 100 !important;
    line-height: 1.65 !important;
	text-align: justify !important;
}

a {
    color: var(--primary) !important;
    text-decoration: none !important;
}

a:hover {
    text-decoration: underline !important;
}

button,
input,
textarea,
select {
    font: inherit !important;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--primary) !important;
    outline-offset: 4px !important;
}

[hidden] {
    display: none !important;
}

.container,
.ag,
.av {
    width: min(1120px, calc(100% - 40px)) !important;
    margin-inline: auto !important;
    max-width: none !important;
}

.ag,
.av {
    padding-inline: 0 !important;
}

.site-header {
    border-bottom: 1px solid var(--border) !important;
}

.header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 88px !important;
}

.brand {
    color: var(--text) !important;
    font-size: 28px !important;
    font-weight: 750 !important;
    letter-spacing: -1px !important;
	display: flex !important;
}

.brand span {
    color: var(--primary) !important;
}

.site-menu summary {
    cursor: pointer !important;
    padding: 10px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    list-style: none !important;
}

.site-menu summary::-webkit-details-marker {
    display: none !important;
}

.site-menu nav {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 22px !important;
}

.site-menu nav a,
.nav-button {
    color: var(--text) !important;
    font-size: 14px !important;
}

.site-menu nav a[aria-current="page"] {
    color: var(--primary) !important;
    font-weight: 700 !important;
}

.site-menu form {
    margin: 0 !important;
}

.nav-button {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

.button,
.site-menu nav .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    background: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.button:hover {
    text-decoration: none !important;
    background: #1c489f !important;
}

.hero {
    padding: 72px 0 !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
}

.eyebrow {
    margin: 0 0 16px !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.hero h1 {
    max-width: 750px !important;
    margin: 0 !important;
    font-size: clamp(36px, 5vw, 60px) !important;
    line-height: 1.15 !important;
    letter-spacing: -2px !important;
}

.hero-description {
    max-width: 580px !important;
    margin: 24px 0 30px !important;
    color: var(--muted) !important;
    font-size: 18px !important;
}

.section {
    padding: 48px 0 64px !important;
}

.section-heading {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.section-heading h2 {
    margin: 0 !important;
    font-size: 26px !important;
}

.section-heading p {
    margin: 0 !important;
    color: var(--muted) !important;
}

.empty-state {
    padding: 42px 24px !important;
    border: 1px dashed var(--border) !important;
    border-radius: 12px !important;
    text-align: center !important;
}

.empty-state h3 {
    margin: 0 0 8px !important;
}

.empty-state p {
    margin: 0 !important;
    color: var(--muted) !important;
}

.page-content {
    max-width: 760px !important;
    min-height: 50vh !important;
    margin-inline: auto !important;
    padding-block: 56px !important;
    overflow-wrap: anywhere !important;
}

.page-content h1 {
    font-size: clamp(30px, 4vw, 44px) !important;
    line-height: 1.2 !important;
}

.page-content p {
    color: var(--muted) !important;
}

.post-image {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.load-more-container {
    margin-top: 36px !important;
    text-align: center !important;
}

.load-more-container button {
    border: none !important;
    cursor: pointer !important;
    min-width: 160px !important;
}

.load-more-container button:disabled {
    opacity: 0.65 !important;
    cursor: wait !important;
}

#load-more-status {
    margin-top: 14px !important;
    color: var(--muted) !important;
    font-size: 14px !important;
}

.article-featured-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 28px 0 !important;
    border-radius: 12px !important;
}

.article-content {
    margin-top: 28px !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
    overflow-wrap: anywhere !important;
}

.article-content p {
    margin: 0 0 22px !important;
    color: var(--text) !important;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    margin: 32px 0 16px !important;
    line-height: 1.35 !important;
}

.article-content h2 {
    font-size: 28px !important;
}

.article-content h3 {
    font-size: 23px !important;
}

.article-content h4 {
    font-size: 20px !important;
}

.article-content ul,
.article-content ol {
    padding-left: 28px !important;
    margin: 0 0 22px !important;
}

.article-content li {
    margin-bottom: 8px !important;
}

.article-content img {
    max-width: 100% !important;
    height: auto !important;
}

.article-content blockquote {
    margin: 24px 0 !important;
    padding: 16px 22px !important;
    border-left: 4px solid var(--primary) !important;
    background: var(--surface) !important;
}

.article-content table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
}

.article-content th,
.article-content td {
    border: 1px solid var(--border) !important;
    padding: 12px 16px !important;
    text-align: left !important;
}

.article-content th {
    background: var(--surface) !important;
    font-weight: 700 !important;
}

.article-content pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 18px !important;
    background: var(--surface) !important;
    border-radius: 8px !important;
}

.article-content hr {
    margin: 30px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--border) !important;
}

.site-footer {
    padding: 26px 0 !important;
    border-top: 1px solid var(--border) !important;
}

.footer-inner,
.footer-inner nav {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.footer-inner {
    justify-content: space-between !important;
}

.footer-inner p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
}

.footer-inner a {
    color: var(--secondary) !important;
    font-size: 14px !important;
}

.footer-inner a:hover {
    color: #60A5FA;
}

@media (min-width: 901px) {
    .site-menu summary {
        display: none !important;
    }

    .site-menu > nav {
        display: flex !important;
    }
}

@media (max-width: 900px) {
    .header-inner {
        position: relative !important;
        display: block !important;
        min-height: 88px !important;
        padding-block: 18px !important;
    }

    .brand {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 52px !important;
        max-width: calc(100% - 100px) !important;
    }

    .site-menu {
        width: 100% !important;
        margin: 0 !important;
    }

    .site-menu summary {
        position: absolute !important;
        top: 22px !important;
        right: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 10px 14px !important;
    }

    .site-menu nav {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin-top: 12px !important;
        padding: 12px 0 0 !important;
        background: var(--background) !important;
        border: 0 !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .site-menu:not([open]) nav {
        display: none !important;
    }

    .site-menu nav a,
    .site-menu .nav-button {
        display: block !important;
        width: 100% !important;
        padding: 12px 0 !important;
        text-align: left !important;
    }

    .site-menu nav .button {
        margin-top: 8px !important;
        padding: 10px 16px !important;
        text-align: center !important;
    }

    .hero {
        padding: 48px 0 !important;
    }

    .hero h1 {
        letter-spacing: -1px !important;
    }

    .hero-description {
        font-size: 16px !important;
    }
}

.post-masonry > .post-card {
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--background) !important;
    display: inline-block !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    break-inside: avoid !important;
    vertical-align: top !important;
}

.post-masonry .post-image-link {
    display: block !important;
}

.post-masonry .post-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

.post-masonry .post-image-placeholder {
    display: grid !important;
    place-items: center !important;
    min-height: 180px !important;
    background: var(--surface) !important;
    color: var(--primary) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

.post-masonry .post-card-body {
    padding: 22px !important;
}

.post-masonry h3 {
    margin: 0 0 12px !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.post-masonry h3 a {
    color: var(--text) !important;
}

.post-masonry h3 a:hover {
    color: var(--primary) !important;
}

.post-masonry .post-excerpt {
    margin: 0 !important;
    color: var(--muted) !important;
    overflow-wrap: anywhere !important;
}

.auth-card {
    width: 100% !important;
    max-width: 460px !important;
    margin-inline: auto !important;
    padding: 32px !important;
    background: var(--background) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}

.auth-card h1 {
    text-align: center !important;
    margin: 0 0 16px !important;
    font-size: 28px !important;
    line-height: 1.3 !important;
}

.auth-description {
    margin: 0 0 28px !important;
    color: var(--muted) !important;
}

.auth-field {
    margin-bottom: 20px !important;
}

.auth-card label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

.auth-card input:not([type="checkbox"]):not([type="hidden"]) {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: var(--background) !important;
    color: var(--text) !important;
}

.auth-card input:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

.auth-card .auth-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 400 !important;
}

.auth-checkbox input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: var(--primary) !important;
}

.auth-submit {
    width: 100% !important;
    border: 0 !important;
    cursor: pointer !important;
}

.auth-links {
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 22px !important;
    font-size: 14px !important;
}

.auth-errors,
.auth-status {
    margin-bottom: 22px !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
}

.auth-errors {
    background: #fff1f2 !important;
    color: #9f1239 !important;
}

.auth-errors ul {
    margin: 0 !important;
    padding-left: 20px !important;
}

.auth-status {
    background: #ecfdf5 !important;
    color: #166534 !important;
}

@media (max-width: 600px) {
    .auth-card {
        padding: 24px !important;
    }
}

.home-search {
    margin-bottom: 24px !important;
}

.home-search label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

.home-search-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
}

.home-search-controls input {
    flex: 1 1 240px !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    border: 1px solid #808080 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
}

.home-search-controls input::placeholder {
    color: inherit !important;
    opacity: 0.6 !important;
}

.home-search-controls input:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 3px !important;
}

.home-search-reset {
    color: inherit !important;
    text-underline-offset: 4px !important;
}

.home-search-summary {
    margin-bottom: 24px !important;
}

@media (max-width: 480px) {
    .home-search-controls input {
        flex-basis: 100% !important;
    }
}

.post-masonry {
    display: block !important;
    columns: 3 !important;
    column-gap: 24px !important;
}

.post-masonry > .empty-state {
    column-span: all !important;
}

@media (max-width: 1024px) {
    .post-masonry {
        columns: 2 !important;
    }
}

@media (max-width: 640px) {
    .post-masonry {
        columns: 1 !important;
    }
}

.hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
}

h1 {
    font-size: clamp(28px, 4vw, 42px) !important;
}

.auth-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 24px 0 !important;
}

.av {
    padding-block: 40px !important;
}

.av-panel {
    padding: 24px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #172033 !important;
}

.av h1 {
    margin: 0 0 12px !important;
}

.av label {
    display: block !important;
    margin: 20px 0 8px !important;
    font-weight: 600 !important;
}

.av textarea {
    width: 100% !important;
    min-height: 380px !important;
    padding: 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #172033 !important;
    font: 14px/1.6 monospace !important;
    resize: vertical !important;
}

.av textarea:focus-visible,
.av button:focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: 2px !important;
}

.av-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.av button {
    padding: 11px 18px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #172033 !important;
    font: inherit !important;
    cursor: pointer !important;
}

.av button.av-primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

.av button:disabled {
    opacity: 0.6 !important;
    cursor: wait !important;
}

.av-status {
    margin-top: 20px !important;
    font-weight: 600 !important;
}

.av-pass {
    color: #166534 !important;
}

.av-fail {
    color: #b91c1c !important;
}

.av-errors {
    padding-left: 22px !important;
}

.av-errors li {
    margin: 14px 0 !important;
    overflow-wrap: anywhere !important;
}

.av-errors button {
    margin-bottom: 6px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
}

.av-note {
    color: #526178 !important;
    font-size: 14px !important;
}

.ag {
    padding-block: 32px !important;
    color: #172033 !important;
}

.ag-heading,
.ag-preview-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.ag h1 {
    margin: 8px 0 !important;
}

.ag h2 {
    font-size: 20px !important;
    margin: 0 0 16px !important;
}

.ag-heading p {
    margin: 6px 0 !important;
}

.ag-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ag button {
    font: inherit !important;
    background: #fff !important;
    color: #172033 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
}

.ag button:hover {
    background: #edf2f7 !important;
}

.ag button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.ag button.ag-primary {
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}

.ag button:focus-visible,
.ag input:focus-visible,
.ag textarea:focus-visible,
.ag select:focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: 2px !important;
}

.ag-layout {
    display: grid !important;
    grid-template-columns: minmax(300px, 440px) minmax(0, 1fr) !important;
    gap: 24px !important;
}

.ag-panel {
    background: #fff !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 16px !important;
    padding: 24px !important;
    min-width: 0 !important;
}

.ag label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 12px 0 !important;
}

.ag input,
.ag textarea,
.ag select {
    display: block !important;
    width: 100% !important;
    font: inherit !important;
    color: #172033 !important;
    background: #fff !important;
    padding: 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    margin-top: 6px !important;
}

.ag textarea {
    resize: vertical !important;
}

.ag-colors {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

.ag input[type="color"] {
    height: 42px !important;
    padding: 4px !important;
}

.ag small,
.ag-note {
    color: #526178 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.ag #ag-settings {
    margin-bottom: 28px !important;
}

.ag-add {
    margin-bottom: 20px !important;
}

.ag-block {
    border: 1px solid #dbe3ef !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 16px 0 !important;
}

.ag-block summary {
    cursor: pointer !important;
    font-weight: 700 !important;
}

.ag-block-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 14px !important;
    flex-wrap: wrap !important;
}

.ag-block-actions button {
    padding: 6px 10px !important;
    font-size: 13px !important;
}

.ag-block-actions .ag-delete {
    color: #b91c1c !important;
}

.ag-preview-panel {
    align-self: start !important;
    position: sticky !important;
    top: 20px !important;
}

.ag-preview-scroll {
    overflow: auto !important;
    padding: 14px !important;
    background: #e9eef5 !important;
    border-radius: 12px !important;
}

.ag iframe {
    display: block !important;
    border: 0 !important;
    background: white !important;
    width: 390px !important;
    max-width: 100% !important;
    height: 680px !important;
    margin: auto !important;
    border-radius: 8px !important;
}

.ag iframe.ag-desktop {
    width: 100% !important;
    max-width: none !important;
}

.ag [aria-pressed="true"] {
    background: #172033 !important;
    color: white !important;
}

.ag details > summary {
    cursor: pointer !important;
    margin: 12px 0 !important;
}

.ag #ag-source {
    font-family: monospace !important;
    font-size: 12px !important;
}

.ag #ag-status {
    min-height: 24px !important;
    margin: 14px 0 !important;
}

.ag #ag-issues {
    color: #9a3412 !important;
    font-size: 14px !important;
}

.ag #ag-issues ul {
    padding-left: 20px !important;
}

.ag #ag-issues:empty {
    display: none !important;
}

@media (max-width: 960px) {
    .ag-layout {
        grid-template-columns: 1fr !important;
    }

    .ag-preview-panel {
        position: static !important;
    }
}

@media (max-width: 480px) {
    .ag {
        padding-block: 24px !important;
    }

    .ag-panel {
        padding: 16px !important;
    }

    .ag iframe {
        height: 560px !important;
    }
}

/* Tombol utama */
.button,
.site-menu nav .button,
.av button.av-primary,
.ag button.ag-primary {
    background: #285bc4 !important;
    border-color: #285bc4 !important;
    color: #ffffff !important;
}

.button:hover,
.site-menu nav .button:hover,
.av button.av-primary:hover,
.ag button.ag-primary:hover {
    background: #214da8 !important;
    color: #ffffff !important;
}

/* Generator dan validator */
.ag,
.av-panel {
    color: var(--text) !important;
}

.ag-panel,
.av-panel,
.ag-block {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

.ag button,
.av button {
    background: var(--background) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.ag button:hover,
.av button:hover {
    background: #233047 !important;
}

.ag input,
.ag textarea,
.ag select,
.av textarea {
    background: var(--background) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.ag small,
.ag-note,
.av-note {
    color: var(--muted) !important;
}

.ag-preview-scroll {
    background: var(--background) !important;
}

.ag [aria-pressed="true"] {
    background: #285bc4 !important;
    color: #ffffff !important;
}

.ag-block-actions .ag-delete,
.av-fail {
    color: #fca5a5 !important;
}

.ag #ag-issues {
    color: #fdba74 !important;
}

.av-pass {
    color: #86efac !important;
}

.ag button:focus-visible,
.ag input:focus-visible,
.ag textarea:focus-visible,
.ag select:focus-visible,
.av textarea:focus-visible,
.av button:focus-visible {
    outline-color: var(--primary) !important;
}

/* Form pencarian */
.home-search-controls input {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Pesan pada halaman akun */
.auth-errors {
    background: #351b26 !important;
    color: #fecdd3 !important;
}

.auth-status {
    background: #123028 !important;
    color: #a7f3d0 !important;
}

/* Tempel di bagian paling akhir public.css agar aturan hero ini menang dari CSS lama. */
.hero .home-hero-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr) !important;
    align-items: center !important;
    gap: clamp(32px, 6vw, 80px) !important;
}

.hero .home-hero-copy {
    display: block !important;
    min-width: 0 !important;
    text-align: left !important;
}

.hero .home-hero-visual {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 370px !important;
    place-items: center !important;
    isolation: isolate !important;
}

.hero .home-hero-visual::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 80% !important;
    aspect-ratio: 1 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(37, 99, 235, .24), rgba(34, 211, 238, .07) 48%, transparent 72%) !important;
    filter: blur(10px) !important;
}

.hero .home-amp-code-window {
    position: absolute !important;
    z-index: 0 !important;
    top: 14% !important;
    left: 1% !important;
    display: block !important;
    width: 61% !important;
    min-height: 235px !important;
    overflow: hidden !important;
    border: 1px solid rgba(130, 173, 255, .34) !important;
    border-radius: 16px !important;
    background: rgba(11, 16, 24, .94) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .32) !important;
    transform: rotate(-4deg) !important;
}

.hero .home-amp-window-bar {
    display: flex !important;
    gap: 7px !important;
    padding: 15px 16px !important;
    border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
}

.hero .home-amp-window-bar span {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #60a5fa !important;
}

.hero .home-amp-window-bar span:nth-child(2) { background: #38bdf8 !important; }
.hero .home-amp-window-bar span:nth-child(3) { background: #22d3ee !important; }

.hero .home-amp-code-lines {
    display: grid !important;
    gap: 13px !important;
    padding: 25px 22px !important;
}

.hero .home-amp-code-line {
    display: block !important;
    width: 84% !important;
    height: 7px !important;
    border-radius: 20px !important;
    background: rgba(96, 165, 250, .34) !important;
}

.hero .home-amp-code-line.is-cyan { background: rgba(34, 211, 238, .8) !important; }
.hero .home-amp-code-line.is-blue { width: 68% !important; background: rgba(59, 130, 246, .68) !important; }
.hero .home-amp-code-line.is-short { width: 43% !important; }
.hero .home-amp-code-line.is-medium { width: 74% !important; }

.hero .home-amp-phone {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: min(52%, 245px) !important;
    margin: 0 0 0 24% !important;
    padding: 9px !important;
    border: 1px solid rgba(130, 173, 255, .68) !important;
    border-radius: 30px !important;
    background: #080d15 !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .48), 0 0 35px rgba(59, 130, 246, .18) !important;
    transform: rotate(3deg) !important;
}

.hero .home-amp-phone-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    margin: 0 0 8px !important;
    border-radius: 20px !important;
    background: #172235 !important;
    color: #a0aec0 !important;
    font-size: 9px !important;
}

.hero .home-amp-phone-camera {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 38px !important;
    height: 6px !important;
    border-radius: 0 0 8px 8px !important;
    background: #080d15 !important;
    transform: translateX(-50%) !important;
}

.hero .home-amp-phone-page {
    display: block !important;
    min-height: 250px !important;
    padding: 14px 13px 18px !important;
    border-radius: 20px !important;
    background: #111a29 !important;
    text-align: left !important;
}

.hero .home-amp-preview-label {
    margin: 0 0 8px !important;
    color: #82adff !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.hero .home-amp-phone-page h2 {
    margin: 0 0 12px !important;
    color: #e7edf7 !important;
    font-size: 18px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
}

.hero .home-amp-preview-image {
    display: block !important;
    height: 88px !important;
    margin: 0 0 13px !important;
    border-radius: 9px !important;
    background: linear-gradient(145deg, #2563eb, #22d3ee 55%, #a5b4fc) !important;
}

.hero .home-amp-preview-line {
    display: block !important;
    width: 100% !important;
    height: 6px !important;
    margin: 8px 0 !important;
    border-radius: 8px !important;
    background: #344258 !important;
}

.hero .home-amp-preview-line.is-short { width: 72% !important; }

.hero .home-amp-preview-button {
    display: inline-block !important;
    margin: 8px 0 0 !important;
    padding: 7px 10px !important;
    border-radius: 6px !important;
    background: #2563eb !important;
    color: #fff !important;
    font-size: 8px !important;
    font-weight: 700 !important;
}

.hero .home-amp-valid-badge {
    position: absolute !important;
    z-index: 2 !important;
    top: 44% !important;
    right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(45, 212, 191, .6) !important;
    border-radius: 13px !important;
    background: rgba(6, 78, 75, .96) !important;
    color: #5eead4 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    transform: rotate(3deg) !important;
}

.hero .home-amp-valid-check {
    display: grid !important;
    width: 23px !important;
    height: 23px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #2dd4bf !important;
    color: #062b2b !important;
    font-size: 14px !important;
}

@media (max-width: 900px) {
    .hero .home-hero-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .hero .home-hero-visual {
        width: min(100%, 560px) !important;
        min-height: 330px !important;
        margin-inline: auto !important;
        margin-top: 24px !important;
    }
}

@media (max-width: 480px) {
    .hero .home-hero-visual { min-height: 275px !important; }
    .hero .home-amp-code-window { top: 18% !important; width: 60% !important; min-height: 190px !important; }
    .hero .home-amp-code-lines { gap: 10px !important; padding: 20px 14px !important; }
    .hero .home-amp-phone { width: 48% !important; margin-left: 22% !important; }
    .hero .home-amp-phone-page { min-height: 210px !important; }
    .hero .home-amp-phone-page h2 { font-size: 15px !important; }
    .hero .home-amp-preview-image { height: 65px !important; }
    .hero .home-amp-valid-badge { right: -3px !important; padding: 9px 11px !important; font-size: 10px !important; }
}