/* =========================================================
URBAN EDGE REAL ESTATE
PROPERTY VERIFICATION PAGE
========================================================= */

/* =========================================================
RESET
========================================================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {


scroll-behavior: smooth;


}

body {


font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

background: #06100a;

color: #ffffff;

overflow-x: hidden;


}

a {


color: inherit;

text-decoration: none;


}

button {


font: inherit;


}

/* =========================================================
VARIABLES
========================================================= */

:root {


--green-dark: #06100a;

--green: #0b2415;

--green-light: #123b23;

--gold: #d4af37;

--gold-light: #f3d675;

--white: #ffffff;

--muted: #aab7af;

--border:
    rgba(255,255,255,0.09);

--glass:
    rgba(255,255,255,0.045);

}

/* =========================================================
GLOBAL CONTAINER
========================================================= */

.section-container {


width:
    min(
        1250px,
        90%
    );

margin: auto;


}

/* =========================================================
PAGE LOADER
========================================================= */

.page-loader {


position: fixed;

inset: 0;

z-index: 9999;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background: #06100a;

transition:
    opacity .7s ease,
    visibility .7s ease;


}

.page-loader.hide {


opacity: 0;

visibility: hidden;


}

.loader-logo img {

width: 75px;

height: 75px;

object-fit: contain;

border-radius: 50%;

animation:
    loaderPulse
    1.6s
    ease-in-out
    infinite;


}

.loader-line {

width: 180px;

height: 2px;

margin-top: 30px;

overflow: hidden;

background:
    rgba(255,255,255,.1);

}

.loader-line::after {

content: "";

display: block;

width: 45%;

height: 100%;

background: var(--gold);

animation:
    loaderMove
    1.2s
    ease-in-out
    infinite;

}

.page-loader p {

margin-top: 18px;

font-size: 10px;

letter-spacing: 3px;

color: var(--muted);

}

@keyframes loaderPulse {

0%,
100% {

    transform: scale(1);

}

50% {

    transform: scale(1.08);

}

}

@keyframes loaderMove {

0% {

    transform:
        translateX(-100%);

}

100% {

    transform:
        translateX(450%);

}

}

/* =========================================================
HEADER
========================================================= */

.site-header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

padding: 18px 0;

border-bottom:
    1px solid
    rgba(255,255,255,.05);

background:
    rgba(6,16,10,.65);

backdrop-filter:
    blur(16px);

transition:
    .4s ease;

}

.site-header.scrolled {

padding: 11px 0;

background:
    rgba(6,16,10,.92);

box-shadow:
    0 15px 50px
    rgba(0,0,0,.25);

}

.nav-container {

width:
    min(
        1400px,
        92%
    );

margin: auto;

display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;

}

.brand {

display: flex;

align-items: center;

gap: 12px;

}

.brand img {

width: 48px;

height: 48px;

object-fit: contain;

}

.brand strong {

display: block;

font-size: 14px;

letter-spacing: 1.5px;

}

.brand span {

display: block;

margin-top: 3px;

font-size: 9px;

color: var(--gold);

letter-spacing: 2px;

}

.main-nav {

display: flex;

align-items: center;

gap: 32px;

}

.main-nav a {

position: relative;

color: #b8c3bc;

font-size: 13px;

transition: .3s ease;

}

.main-nav a::after {

content: "";

position: absolute;

left: 0;

bottom: -8px;

width: 0;

height: 2px;

background: var(--gold);

transition: .3s ease;

}

.main-nav a:hover,
.main-nav a.active {

color: #ffffff;

}

.main-nav a:hover::after,
.main-nav a.active::after {

width: 100%;

}

.header-btn {

padding:
    12px
    19px;

border:
    1px solid
    rgba(212,175,55,.5);

color: var(--gold);

font-size: 12px;

border-radius: 7px;

transition: .3s ease;

}

.header-btn:hover {

background: var(--gold);

color: var(--green-dark);

}

.menu-toggle {

display: none;

border: none;

background: transparent;

cursor: pointer;

}

.menu-toggle span {

display: block;

width: 25px;

height: 2px;

margin: 5px;

background: white;

transition: .3s ease;

}

/* =========================================================
HERO
========================================================= */

.verification-hero {

position: relative;

min-height: 100vh;

display: grid;

grid-template-columns:
    1.1fr
    .9fr;

align-items: center;

gap: 50px;

padding:
    160px 7%
    100px;

overflow: hidden;

background:

    radial-gradient(
        circle at 80% 40%,
        rgba(212,175,55,.09),
        transparent 28%
    ),

    linear-gradient(
        135deg,
        #06100a,
        #0b2415,
        #06100a
    );

}

.hero-grid-overlay {

position: absolute;

inset: 0;

opacity: .22;

background-image:

    linear-gradient(
        rgba(255,255,255,.035) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.035) 1px,
        transparent 1px
    );

background-size:
    70px 70px;

mask-image:
    linear-gradient(
        to bottom,
        black,
        transparent
    );

}

.hero-glow {

position: absolute;

width: 500px;

height: 500px;

border-radius: 50%;

filter: blur(100px);

pointer-events: none;

}

.hero-glow-one {

right: -180px;

top: 10%;

background:
    rgba(212,175,55,.08);

}

.hero-glow-two {

left: -250px;

bottom: -250px;

background:
    rgba(17,91,47,.18);

}

.hero-content {

position: relative;

z-index: 2;

max-width: 760px;

}

.eyebrow {

display: inline-flex;

align-items: center;

gap: 10px;

padding:
    10px
    16px;

border:
    1px solid
    rgba(212,175,55,.25);

border-radius: 50px;

color: var(--gold);

background:
    rgba(212,175,55,.07);

font-size: 10px;

font-weight: 700;

letter-spacing: 2px;

}

.status-dot {

width: 7px;

height: 7px;

border-radius: 50%;

background: var(--gold);

box-shadow:
    0 0 0 5px
    rgba(212,175,55,.08);

}

.hero-content h1 {

margin-top: 30px;

font-size:
    clamp(
        3rem,
        6vw,
        6.2rem
    );

line-height: .98;

letter-spacing: -3px;

}

.hero-content h1 span {

display: block;

margin-top: 10px;

background:
    linear-gradient(
        90deg,
        #ffffff,
        var(--gold-light),
        var(--gold),
        #ffffff
    );

background-size: 300%;

background-clip: text;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation:
    goldFlow
    6s
    linear
    infinite;

}

@keyframes goldFlow {

0% {

    background-position: 0%;

}

100% {

    background-position: 300%;

}

}

.hero-description {

max-width: 650px;

margin-top: 30px;

color: var(--muted);

line-height: 1.9;

font-size: 16px;

}

.hero-actions {

display: flex;

flex-wrap: wrap;

gap: 15px;

margin-top: 38px;

}

.primary-btn,
.secondary-btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 15px;

padding:
    16px
    24px;

border-radius: 8px;

font-size: 13px;

font-weight: 700;

transition:
    .35s ease;

}

.primary-btn {

background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

color: var(--green-dark);

}

.primary-btn:hover {

transform:
    translateY(-4px);

box-shadow:
    0 18px 45px
    rgba(212,175,55,.2);

}

.secondary-btn {

border:
    1px solid
    rgba(255,255,255,.15);

color: white;

}

.secondary-btn:hover {

background:
    rgba(255,255,255,.06);

transform:
    translateY(-4px);

}

.hero-trust {

display: flex;

flex-wrap: wrap;

gap: 35px;

margin-top: 60px;

}

.hero-trust strong {

display: block;

font-size: 10px;

color: var(--gold);

letter-spacing: 1.5px;

}

.hero-trust span {

display: block;

margin-top: 6px;

color: #84928a;

font-size: 11px;

}

/* =========================================================
HERO VISUAL
========================================================= */

.hero-visual {

position: relative;

min-height: 620px;

display: flex;

align-items: center;

justify-content: center;

}

.orbit {

position: absolute;

border:
    1px solid
    rgba(212,175,55,.13);

border-radius: 50%;

}

.orbit-one {

width: 550px;

height: 550px;

animation:
    orbitRotate
    25s
    linear
    infinite;

}

.orbit-two {

width: 420px;

height: 420px;

animation:
    orbitRotate
    18s
    linear
    infinite
    reverse;

}

@keyframes orbitRotate {

to {

    transform:
        rotate(360deg);

}

}

.verification-card {

position: relative;

z-index: 5;

width: min(390px, 90%);

min-height: 480px;

padding: 35px;

border:
    1px solid
    rgba(255,255,255,.14);

border-radius: 25px;

background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.1),
        rgba(255,255,255,.025)
    );

backdrop-filter:
    blur(20px);

box-shadow:
    0 40px 100px
    rgba(0,0,0,.4);

overflow: hidden;

transform:
    rotate(-3deg);

animation:
    cardFloat
    5s
    ease-in-out
    infinite;

}

@keyframes cardFloat {

0%,
100% {

    transform:
        rotate(-3deg)
        translateY(0);

}

50% {

    transform:
        rotate(-1deg)
        translateY(-15px);

}

}

.card-shine {

position: absolute;

top: -100px;

right: -100px;

width: 250px;

height: 250px;

border-radius: 50%;

background:
    rgba(212,175,55,.1);

filter: blur(30px);

}

.verification-card-top {

display: flex;

align-items: center;

justify-content: space-between;

}

.verification-card-top span {

color: var(--gold);

font-size: 9px;

letter-spacing: 2px;

font-weight: 700;

}

.verification-icon {

width: 42px;

height: 42px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

color: var(--green-dark);

background: var(--gold);

font-weight: 900;

}

.location-pin {

margin-top: 65px;

font-size: 42px;

}

.verification-card h3 {

margin-top: 20px;

font-size: 38px;

line-height: 1.1;

}

.verification-card p {

margin-top: 20px;

color: var(--muted);

line-height: 1.7;

font-size: 13px;

}

.card-progress {

margin-top: 35px;

width: 100%;

height: 3px;

background:
    rgba(255,255,255,.08);

overflow: hidden;

}

.card-progress span {

display: block;

width: 65%;

height: 100%;

background: var(--gold);

animation:
    progressMove
    3s
    ease-in-out
    infinite alternate;

}

@keyframes progressMove {

from {

    width: 30%;

}

to {

    width: 80%;

}

}

.card-footer {

display: flex;

justify-content: space-between;

margin-top: 30px;

color: #6f7c73;

font-size: 8px;

letter-spacing: 1px;

}

.floating-badge {

position: absolute;

z-index: 8;

display: flex;

align-items: center;

gap: 10px;

padding:
    13px
    17px;

border:
    1px solid
    rgba(212,175,55,.25);

border-radius: 10px;

background:
    rgba(6,16,10,.85);

backdrop-filter:
    blur(15px);

font-size: 11px;

color: #dce3df;

}

.floating-badge span {

width: 20px;

height: 20px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

color: var(--green-dark);

background: var(--gold);

font-size: 10px;

}

.badge-one {

top: 18%;

right: 0;

animation:
    floatBadge
    4s
    ease-in-out
    infinite;

}

.badge-two {

bottom: 17%;

left: 0;

animation:
    floatBadge
    4s
    1s
    ease-in-out
    infinite;

}

@keyframes floatBadge {

0%,
100% {

    transform:
        translateY(0);

}

50% {

    transform:
        translateY(-12px);

}

}

/* =========================================================
SECTION HEADINGS
========================================================= */

.section-heading span,
.support-header > div > span,
.trust-heading span {

color: var(--gold);

font-size: 10px;

font-weight: 700;

letter-spacing: 3px;

}

.section-heading h2,
.support-header h2,
.trust-heading h2 {

margin-top: 15px;

font-size:
    clamp(
        2.2rem,
        4vw,
        4.2rem
    );

line-height: 1.1;

letter-spacing: -1.5px;

}

.section-heading h2 strong {

display: block;

color: var(--gold);

}

.centered {

text-align: center;

}

.centered p {

max-width: 650px;

margin:
    20px
    auto
    0;

color: var(--muted);

line-height: 1.8;

}

/* =========================================================
INTRO
========================================================= */

.intro-section {

padding:
    130px 0;

background: #07140c;

}

.intro-grid {

display: grid;

grid-template-columns:
    1.2fr
    .8fr;

gap: 90px;

margin-top: 70px;

}

.intro-text {

color: var(--muted);

line-height: 1.9;

}

.intro-text p {

margin-bottom: 25px;

}

.intro-text .large-text {

color: white;

font-size: 20px;

}

.principle-card {

padding: 40px;

border:
    1px solid
    rgba(212,175,55,.18);

border-radius: 20px;

background:
    linear-gradient(
        145deg,
        rgba(212,175,55,.08),
        rgba(255,255,255,.02)
    );

}

.principle-number {

color: var(--gold);

font-size: 12px;

letter-spacing: 2px;

}

.principle-card h3 {

margin-top: 35px;

font-size: 30px;

line-height: 1.2;

}

.principle-card p {

margin-top: 20px;

color: var(--muted);

line-height: 1.8;

}

.principle-line {

width: 60px;

height: 2px;

margin:
    30px 0;

background: var(--gold);

}

.principle-card > span {

color: #76847b;

font-size: 9px;

letter-spacing: 2px;

}

/* =========================================================
STATUS
========================================================= */

.status-section {

padding:
    80px 0;

background: #06100a;

}

.status-panel {

display: grid;

grid-template-columns:
    90px
    1fr;

gap: 35px;

padding:
    55px;

border:
    1px solid
    rgba(212,175,55,.25);

border-radius: 22px;

background:
    linear-gradient(
        135deg,
        rgba(212,175,55,.08),
        rgba(255,255,255,.02)
    );

}

.status-icon {

width: 70px;

height: 70px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 20px;

color: var(--gold);

border:
    1px solid
    rgba(212,175,55,.25);

font-size: 30px;

}

.status-label {

color: var(--gold);

font-size: 9px;

letter-spacing: 2px;

font-weight: 700;

}

.status-content h2 {

margin-top: 15px;

font-size:
    clamp(
        2rem,
        4vw,
        3.5rem
    );

}

.status-content p {

max-width: 850px;

margin-top: 18px;

color: var(--muted);

line-height: 1.8;

}

.honesty-badge {

display: inline-flex;

align-items: center;

gap: 10px;

margin-top: 25px;

padding:
    11px
    16px;

border-radius: 50px;

background:
    rgba(212,175,55,.08);

color: #d8dfda;

font-size: 11px;

}

.honesty-badge span {

width: 20px;

height: 20px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background: var(--gold);

color: var(--green-dark);

font-size: 10px;

}

/* =========================================================
PROCESS
========================================================= */

.process-section {

padding:
    140px 0;

background:
    linear-gradient(
        180deg,
        #07140c,
        #06100a
    );

}

.process-grid {

display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 20px;

margin-top: 70px;

}

.process-card {

position: relative;

min-height: 330px;

padding: 32px;

border:
    1px solid
    var(--border);

border-radius: 18px;

background:
    rgba(255,255,255,.025);

transition:
    .4s ease;

overflow: hidden;

}

.process-card::before {

content: "";

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 2px;

background: var(--gold);

transform:
    scaleX(0);

transform-origin: left;

transition:
    .4s ease;

}

.process-card:hover {

transform:
    translateY(-10px);

border-color:
    rgba(212,175,55,.3);

background:
    rgba(212,175,55,.04);

}

.process-card:hover::before {

transform:
    scaleX(1);

}

.process-number {

color: #536158;

font-size: 12px;

font-weight: 700;

}

.process-icon {

margin-top: 35px;

font-size: 34px;

}

.process-card h3 {

margin-top: 22px;

font-size: 21px;

line-height: 1.25;

}

.process-card p {

margin-top: 15px;

color: var(--muted);

font-size: 13px;

line-height: 1.7;

}

/* =========================================================
SUPPORT
========================================================= */

.support-section {

padding:
    130px 0;

background: #07140c;

}

.support-header {

display: grid;

grid-template-columns:
    1fr
    .7fr;

gap: 80px;

align-items: end;

}

.support-header p {

color: var(--muted);

line-height: 1.8;

}

.support-grid {

display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 1px;

margin-top: 65px;

border:
    1px solid
    var(--border);

}

.support-item {

padding:
    45px;

border:
    1px solid
    var(--border);

background:
    rgba(255,255,255,.015);

transition: .3s ease;

}

.support-item:hover {

background:
    rgba(212,175,55,.04);

}

.support-item > span {

color: var(--gold);

font-size: 11px;

}

.support-item h3 {

margin-top: 30px;

font-size: 25px;

}

.support-item p {

margin-top: 15px;

color: var(--muted);

line-height: 1.8;

}

/* =========================================================
PROFESSIONAL
========================================================= */

.professional-section {

padding:
    130px 0;

background: #06100a;

}

.professional-box {

display: grid;

grid-template-columns:
    .65fr
    1.35fr;

gap: 70px;

align-items: center;

padding:
    70px;

border:
    1px solid
    rgba(255,255,255,.08);

border-radius: 25px;

background:
    radial-gradient(
        circle at left,
        rgba(212,175,55,.08),
        transparent 35%
    );

}

.professional-visual {

position: relative;

min-height: 300px;

display: flex;

align-items: center;

justify-content: center;

}

.circle-main {

position: relative;

z-index: 2;

width: 150px;

height: 150px;

display: flex;

align-items: center;

justify-content: center;

border:
    1px solid
    rgba(212,175,55,.4);

border-radius: 50%;

background:
    rgba(212,175,55,.08);

font-size: 60px;

box-shadow:
    0 0 80px
    rgba(212,175,55,.1);

}

.circle-ring {

position: absolute;

width: 280px;

height: 280px;

border:
    1px solid
    rgba(212,175,55,.12);

border-radius: 50%;

animation:
    orbitRotate
    15s
    linear
    infinite;

}

.professional-content > span {

color: var(--gold);

font-size: 10px;

letter-spacing: 3px;

}

.professional-content h2 {

margin-top: 15px;

font-size:
    clamp(
        2.2rem,
        4vw,
        4rem
    );

line-height: 1.1;

}

.professional-content > p {

margin-top: 20px;

color: var(--muted);

line-height: 1.8;

}

.professional-points {

display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 15px;

margin-top: 30px;

}

.professional-points div {

color: #c7d0ca;

font-size: 12px;

}

.professional-points span {

color: var(--gold);

margin-right: 7px;

}

/* =========================================================
TRUST
========================================================= */

.trust-section {

padding:
    130px 0;

background:
    linear-gradient(
        135deg,
        #0b2415,
        #06100a
    );

}

.trust-grid {

display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 20px;

margin-top: 65px;

}

.trust-box {

padding: 35px;

min-height: 250px;

border:
    1px solid
    rgba(255,255,255,.08);

border-radius: 18px;

background:
    rgba(255,255,255,.025);

transition: .35s ease;

}

.trust-box:hover {

transform:
    translateY(-8px);

border-color:
    rgba(212,175,55,.3);

}

.trust-symbol {

color: var(--gold);

font-size: 25px;

}

.trust-box h3 {

margin-top: 40px;

font-size: 23px;

}

.trust-box p {

margin-top: 15px;

color: var(--muted);

line-height: 1.7;

font-size: 13px;

}

/* =========================================================
FAQ
========================================================= */

.faq-section {

padding:
    130px 0;

background: #06100a;

}

.faq-list {

max-width: 900px;

margin:
    60px
    auto
    0;

}

.faq-item {

border-bottom:
    1px solid
    rgba(255,255,255,.1);

}

.faq-question {

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding:
    25px
    0;

border: none;

background: transparent;

color: white;

text-align: left;

cursor: pointer;

font-size: 15px;

}

.faq-question b {

color: var(--gold);

font-size: 24px;

font-weight: 400;

transition: .3s ease;

}

.faq-item.open
.faq-question b {

transform:
    rotate(45deg);

}

.faq-answer {

display: grid;

grid-template-rows: 0fr;

transition:
    .4s ease;

}

.faq-answer p {

overflow: hidden;

color: var(--muted);

line-height: 1.8;

}

.faq-item.open
.faq-answer {

grid-template-rows: 1fr;

}

.faq-item.open
.faq-answer p {

padding-bottom: 25px;

}

/* =========================================================
CTA
========================================================= */

.verification-cta {

position: relative;

padding:
    150px 0;

overflow: hidden;

text-align: center;

background:

    radial-gradient(
        circle at center,
        rgba(212,175,55,.12),
        transparent 35%
    ),

    #0a2013;

}

.cta-glow {

position: absolute;

width: 450px;

height: 450px;

left: 50%;

top: 50%;

transform:
    translate(-50%,-50%);

border-radius: 50%;

background:
    rgba(212,175,55,.08);

filter: blur(80px);

animation:
    ctaPulse
    5s
    ease-in-out
    infinite;

}

@keyframes ctaPulse {

0%,
100% {

    transform:
        translate(-50%,-50%)
        scale(1);

}

50% {

    transform:
        translate(-50%,-50%)
        scale(1.2);

}

}

.cta-content {

position: relative;

z-index: 2;

max-width: 800px;

margin: auto;

}

.cta-content > span {

color: var(--gold);

font-size: 10px;

letter-spacing: 3px;

font-weight: 700;

}

.cta-content h2 {

margin-top: 20px;

font-size:
    clamp(
        3rem,
        6vw,
        5.5rem
    );

line-height: 1;

letter-spacing: -2px;

}

.cta-content h2 strong {

color: var(--gold);

}

.cta-content p {

margin-top: 25px;

color: var(--muted);

line-height: 1.8;

}

.cta-actions {

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 15px;

margin-top: 35px;

}

/* =========================================================
FOOTER
========================================================= */

.site-footer {

padding:
    80px 0
    30px;

background: #040b07;

border-top:
    1px solid
    rgba(255,255,255,.06);

}

.footer-grid {

display: grid;

grid-template-columns:
    1.5fr
    1fr
    1fr
    1.2fr;

gap: 60px;

}

.footer-brand img {

width: 55px;

height: 55px;

object-fit: contain;

}

.footer-brand h3 {

margin-top: 18px;

letter-spacing: 2px;

font-size: 15px;

}

.footer-brand p {

max-width: 260px;

margin-top: 12px;

color: #7d8982;

line-height: 1.7;

font-size: 12px;

}

.footer-grid h4 {

margin-bottom: 20px;

color: var(--gold);

font-size: 11px;

letter-spacing: 1.5px;

}

.footer-grid a,
.footer-grid span {

display: block;

margin-bottom: 12px;

color: #849087;

font-size: 12px;

line-height: 1.5;

transition: .3s ease;

}

.footer-grid a:hover {

color: white;

}

.footer-bottom {

display: flex;

justify-content: space-between;

gap: 20px;

margin-top: 70px;

padding-top: 25px;

border-top:
    1px solid
    rgba(255,255,255,.06);

color: #5f6c63;

font-size: 10px;

}

/* =========================================================
SCROLL REVEAL
========================================================= */

.reveal {

opacity: 0;

transform:
    translateY(35px);

transition:
    opacity .8s ease,
    transform .8s ease;

}

.reveal.visible {

opacity: 1;

transform:
    translateY(0);

}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

.main-nav {

    gap: 18px;

}


.verification-hero {

    grid-template-columns: 1fr;

    padding-top: 150px;

}


.hero-content {

    max-width: 850px;

}


.hero-visual {

    min-height: 600px;

}


.intro-grid,
.support-header,
.professional-box {

    grid-template-columns: 1fr;

}


.professional-visual {

    min-height: 250px;

}


.trust-grid {

    grid-template-columns:
        repeat(2, 1fr);

}


.footer-grid {

    grid-template-columns:
        repeat(2, 1fr);

}

}

@media (max-width: 800px) {

.main-nav {

    position: fixed;

    top: 80px;

    right: -100%;

    width: 280px;

    height: calc(100vh - 80px);

    padding: 40px 30px;

    flex-direction: column;

    align-items: flex-start;

    background:
        rgba(4,11,7,.98);

    border-left:
        1px solid
        rgba(255,255,255,.08);

    transition:
        .4s ease;

}


.main-nav.open {

    right: 0;

}


.main-nav a {

    font-size: 15px;

}


.header-btn {

    display: none;

}


.menu-toggle {

    display: block;

}


.process-grid {

    grid-template-columns:
        repeat(2, 1fr);

}


.status-panel {

    grid-template-columns: 1fr;

    padding: 35px;

}

}

@media (max-width: 600px) {

.nav-container {

    width: 90%;

}


.brand img {

    width: 40px;

    height: 40px;

}


.brand strong {

    font-size: 11px;

}


.brand span {

    font-size: 7px;

}


.verification-hero {

    padding:
        130px 6%
        80px;

}


.hero-content h1 {

    font-size:
        clamp(
            2.8rem,
            13vw,
            4rem
        );

    letter-spacing: -2px;

}


.hero-description {

    font-size: 14px;

}


.hero-trust {

    gap: 20px;

}


.hero-visual {

    min-height: 500px;

}


.orbit-one {

    width: 350px;

    height: 350px;

}


.orbit-two {

    width: 280px;

    height: 280px;

}


.verification-card {

    min-height: 400px;

    padding: 28px;

}


.verification-card h3 {

    font-size: 30px;

}


.floating-badge {

    font-size: 9px;

    padding: 10px;

}


.badge-one {

    right: -5px;

}


.badge-two {

    left: -5px;

}


.intro-section,
.process-section,
.support-section,
.professional-section,
.trust-section,
.faq-section {

    padding:
        90px 0;

}


.intro-grid {

    margin-top: 45px;

}


.principle-card {

    padding: 28px;

}


.process-grid {

    grid-template-columns: 1fr;

    margin-top: 45px;

}


.process-card {

    min-height: auto;

}


.support-grid {

    grid-template-columns: 1fr;

}


.support-item {

    padding: 30px;

}


.professional-box {

    padding: 35px 25px;

}


.professional-points {

    grid-template-columns: 1fr;

}


.trust-grid {

    grid-template-columns: 1fr;

}


.trust-box {

    min-height: auto;

}


.cta-content h2 {

    font-size:
        3rem;

}


.footer-grid {

    grid-template-columns: 1fr;

    gap: 35px;

}


.footer-bottom {

    flex-direction: column;

}

}