/* ===================================================================
   SHADOW WOLVES NETWORK
   STYLE.CSS
   Version 3.0
   =================================================================== */


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

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}

body{

    min-height:100vh;

    overflow-x:hidden;

    background:#070B12;

    color:#F5F8FC;

    font-family:"Inter",sans-serif;

    font-size:16px;

    line-height:1.7;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

}

picture{

    display:block;

}

svg{

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

    transition:.35s ease;

}

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font:inherit;

}

input,
textarea,
select{

    font:inherit;

    outline:none;

}

ul,
ol{

    list-style:none;

}


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

:root{

    /* Colors */

    --background:#070B12;

    --background-secondary:#0B1320;

    --surface:#121B2C;

    --surface-light:#1A2638;

    --primary:#00B8FF;

    --primary-light:#53D6FF;

    --primary-dark:#0087C7;

    --secondary:#7D5CFF;

    --success:#39E58C;

    --warning:#FFC857;

    --danger:#FF5577;

    --white:#FFFFFF;

    --text:#F5F8FC;

    --text-light:#CBD6E5;

    --text-muted:#8896A8;

    --border:rgba(255,255,255,.08);

    --glass:rgba(255,255,255,.04);

    /* Shadows */

    --shadow-xs:0 6px 15px rgba(0,0,0,.15);

    --shadow-sm:0 12px 28px rgba(0,0,0,.22);

    --shadow:0 20px 45px rgba(0,0,0,.35);

    --shadow-lg:0 35px 80px rgba(0,0,0,.55);

    /* Radius */

    --radius-sm:12px;

    --radius:22px;

    --radius-lg:34px;

    --radius-xl:42px;

    /* Layout */

    --container:1400px;

    --header-height:90px;

    --section-space:120px;

    /* Animation */

    --transition:.35s ease;

}


/* ===================================================================
   TYPOGRAPHY
   =================================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:"Orbitron",sans-serif;

    color:var(--white);

    font-weight:700;

    line-height:1.15;

}

h1{

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

}

h2{

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

}

h3{

    font-size:1.7rem;

}

h4{

    font-size:1.2rem;

}

p{

    color:var(--text-light);

    font-size:1.05rem;

    line-height:1.9;

}

small{

    display:inline-block;

    font-family:"Orbitron",sans-serif;

    color:var(--primary);

    letter-spacing:.25em;

    text-transform:uppercase;

}


/* ===================================================================
   LAYOUT
   =================================================================== */

.container{

    width:min(var(--container),92%);

    margin:0 auto;

}

section{

    position:relative;

    padding:var(--section-space) 0;

}

.section-title{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-title h2{

    margin:18px 0;

}

.section-title p{

    max-width:680px;

    margin:0 auto;

}


/* ===================================================================
   BACKGROUND
   =================================================================== */

.background-grid{

    position:fixed;

    inset:0;

    z-index:-3;

    opacity:.05;

    background-image:

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

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

    background-size:60px 60px;

}

.background-glow{

    position:fixed;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:

        radial-gradient(circle at top right,
        rgba(0,184,255,.18),
        transparent 35%),

        radial-gradient(circle at bottom left,
        rgba(125,92,255,.12),
        transparent 40%);

}


/* ===================================================================
   GLASS COMPONENTS
   =================================================================== */

.glass{

    background:var(--glass);

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


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

.status{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 20px;

    border-radius:999px;

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

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

    font-family:"Orbitron",sans-serif;

    font-size:.8rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

}


/* ===================================================================
   SCROLLBAR
   =================================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#09111B;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-light);

}


/* ===================================================================
   TEXT SELECTION
   =================================================================== */

::selection{

    background:rgba(0,184,255,.30);

    color:#FFFFFF;

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--header-height);

    z-index:1000;

    background:rgba(7,11,18,.78);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    transition:var(--transition);

}

header.scrolled{

    background:rgba(7,11,18,.96);

    box-shadow:var(--shadow);

}

header .container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


/* ===================================================================
   LOGO
   =================================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:18px;

}

.logo img{

    width:64px;

    height:64px;

    object-fit:contain;

}

.logo-text{

    display:flex;

    flex-direction:column;

    line-height:1.1;

}

.logo-title{

    font-family:"Orbitron",sans-serif;

    font-size:1.45rem;

    font-weight:700;

    color:var(--white);

}

.logo-subtitle{

    margin-top:4px;

    font-family:"Orbitron",sans-serif;

    font-size:.72rem;

    color:var(--primary);

    letter-spacing:.45em;

    text-transform:uppercase;

}


/* ===================================================================
   NAVIGATION
   =================================================================== */

#navigation{

    display:flex;

    align-items:center;

    gap:34px;

}

#navigation a{

    position:relative;

    color:var(--text-light);

    font-weight:500;

    transition:var(--transition);

}

#navigation a:hover{

    color:var(--white);

}

#navigation a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transform:translateX(-50%);

    transition:var(--transition);

}

#navigation a:hover::after,

#navigation a.active::after{

    width:100%;

}

#navigation a.active{

    color:var(--primary);

}


/* ===================================================================
   MOBILE MENU BUTTON
   =================================================================== */

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

}

.menu-toggle span{

    width:28px;

    height:3px;

    border-radius:999px;

    background:var(--white);

    transition:var(--transition);

}

.menu-toggle.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}


/* ===================================================================
   BUTTONS
   =================================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    color:var(--white);

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-dark)

    );

    box-shadow:0 12px 30px rgba(0,184,255,.25);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(0,184,255,.35);

}

.btn-secondary{

    color:var(--white);

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

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

    backdrop-filter:blur(14px);

}

.btn-secondary:hover{

    transform:translateY(-4px);

    border-color:rgba(0,184,255,.35);

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

}


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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:36px;

}


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

.hero-features{

    display:grid;

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

    gap:18px;

    margin-top:50px;

}

.hero-features div{

    padding:18px 20px;

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

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

    border-radius:18px;

    backdrop-filter:blur(16px);

}

.hero-features strong{

    display:block;

    color:var(--primary);

    margin-bottom:8px;

}

.hero-features span{

    color:var(--text-light);

    font-size:.95rem;

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

#hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding-top:calc(var(--header-height) + 40px);

    overflow:hidden;

}

.hero-grid{

    display:grid;

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

    align-items:center;

    gap:80px;

}

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-content h1{

    margin:24px 0;

}

.hero-content h1 span{

    display:block;

    color:var(--primary);

}

.hero-text{

    max-width:680px;

    color:var(--text-light);

}

.hero-logo{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.hero-logo img{

    width:100%;

    max-width:520px;

    filter:drop-shadow(0 0 35px rgba(0,184,255,.25));

}


/* ===================================================================
   SCROLL INDICATOR
   =================================================================== */

.scroll-down{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

}

.scroll-down span{

    display:block;

    width:2px;

    height:70px;

    background:linear-gradient(

        transparent,

        var(--primary),

        transparent

    );

}


/* ===================================================================
   NETWORK
   =================================================================== */

#network{

    position:relative;

}

.network-core{

    display:flex;

    justify-content:center;

    margin-top:70px;

}

.network-core img{

    width:100%;

    max-width:1200px;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}


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

.network-status{

    display:grid;

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

    gap:20px;

    margin-top:60px;

}

.network-status .item{

    padding:24px;

    text-align:center;

    border-radius:var(--radius);

    background:var(--glass);

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

}

.network-status .item h3{

    margin-bottom:12px;

    color:var(--primary);

    font-size:1rem;

}

.network-status .item span{

    color:var(--text-light);

    font-size:.95rem;

}


/* ===================================================================
   SECTION DIVIDER
   =================================================================== */

.section-divider{

    width:120px;

    height:4px;

    margin:30px auto 0;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        transparent,

        var(--primary),

        transparent

    );

}


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

.section-intro{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-intro h2{

    margin:18px 0;

}

.section-intro p{

    color:var(--text-light);

}
/* ===================================================================
   PROJECTS
   =================================================================== */

#projects{

    position:relative;

    overflow:hidden;

}

.project-section{

    display:grid;

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

    gap:70px;

    align-items:center;

    margin-bottom:140px;

}

.project-section:last-child{

    margin-bottom:0;

}

.project-section.reverse{

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

}

.project-section.reverse .project-banner{

    order:2;

}

.project-section.reverse .project-info{

    order:1;

}


/* ===================================================================
   PROJECT BANNER
   =================================================================== */

.project-banner{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-lg);

    background:var(--surface);

    box-shadow:var(--shadow-lg);

}

.project-banner img{

    width:100%;

    display:block;

    transition:transform .6s ease;

}

.project-banner:hover img{

    transform:scale(1.03);

}

.project-banner::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(255,255,255,.03),

        transparent 35%,

        rgba(0,0,0,.18)

    );

    pointer-events:none;

}


/* ===================================================================
   PROJECT CONTENT
   =================================================================== */

.project-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.project-info .project-tag{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(0,184,255,.12);

    border:1px solid rgba(0,184,255,.25);

    color:var(--primary);

    font-family:"Orbitron",sans-serif;

    font-size:.72rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.project-info h2{

    margin:0;

}

.project-info p{

    color:var(--text-light);

}

.project-info .btn{

    width:max-content;

    margin-top:10px;

}


/* ===================================================================
   PROJECT FEATURES
   =================================================================== */

.project-features{

    display:grid;

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

    gap:16px;

    margin-top:12px;

}

.project-feature{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-radius:18px;

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

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

}

.project-feature strong{

    display:block;

    color:var(--white);

    font-size:.95rem;

}

.project-feature span{

    color:var(--text-muted);

    font-size:.9rem;

}


/* ===================================================================
   PROJECT SEPARATOR
   =================================================================== */

.project-section:not(:last-child){

    padding-bottom:100px;

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

}


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

.project-actions{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:16px;

}
/* ===================================================================
   COMMUNITY
   =================================================================== */

#community{

    position:relative;

}

.community-grid{

    display:grid;

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

    gap:70px;

    align-items:center;

}

.community-content{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.community-content h2{

    margin:0;

}

.community-content p{

    color:var(--text-light);

    max-width:720px;

}


/* ===================================================================
   COMMUNITY STATS
   =================================================================== */

.community-stats{

    display:grid;

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

    gap:20px;

}

.stat-card{

    padding:32px;

    border-radius:var(--radius);

    background:var(--glass);

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-sm);

}

.stat-card h3{

    margin-bottom:10px;

    color:var(--primary);

    font-size:2.4rem;

}

.stat-card span{

    color:var(--text-light);

    font-size:.95rem;

}


/* ===================================================================
   DISCORD
   =================================================================== */

#discord{

    position:relative;

}

.discord-box{

    max-width:1100px;

    margin:0 auto;

    padding:80px;

    text-align:center;

    border-radius:var(--radius-xl);

    background:linear-gradient(

        145deg,

        rgba(0,184,255,.12),

        rgba(255,255,255,.04)

    );

    border:1px solid rgba(0,184,255,.25);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:0 0 60px rgba(0,184,255,.15);

}

.discord-box h2{

    margin:20px 0;

}

.discord-box p{

    max-width:760px;

    margin:0 auto 35px;

}

.discord-box .btn{

    margin-top:10px;

}


/* ===================================================================
   ABOUT
   =================================================================== */

#about{

    position:relative;

}

.about-box{

    max-width:1000px;

    margin:0 auto;

    padding:60px;

    border-radius:var(--radius-lg);

    background:var(--glass);

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

}

.about-box h2{

    margin-bottom:25px;

}

.about-box p{

    margin-bottom:22px;

}

.about-box p:last-child{

    margin-bottom:0;

}

.about-box strong{

    color:var(--primary);

}


/* ===================================================================
   CONTENT BOX
   =================================================================== */

.content-box{

    padding:40px;

    border-radius:var(--radius);

    background:var(--glass);

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}


/* ===================================================================
   SECTION SPACING
   =================================================================== */

#community,
#discord,
#about{

    scroll-margin-top:120px;

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

footer{

    position:relative;

    margin-top:120px;

    background:var(--background-secondary);

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

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

    padding:70px 0;

}

.footer-brand{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:18px;

}

.footer-logo img{

    width:70px;

    height:70px;

    object-fit:contain;

}

.footer-brand p{

    color:var(--text-light);

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links h4{

    margin-bottom:12px;

}

.footer-links a{

    color:var(--text-light);

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--primary);

    padding-left:6px;

}

.footer-social{

    display:flex;

    gap:14px;

    margin-top:10px;

}

.footer-social a{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

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

}

.footer-social a:hover{

    background:var(--primary);

    color:var(--white);

}

.copyright{

    padding:28px;

    text-align:center;

    color:var(--text-muted);

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

}


/* ===================================================================
   LEGAL PAGES
   =================================================================== */

.legal-hero{

    padding-top:180px;

    padding-bottom:90px;

}

.legal-hero-grid{

    display:grid;

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

    align-items:center;

    gap:70px;

}

.legal-hero-content{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.legal-content{

    padding-bottom:120px;

}


/* ===================================================================
   LEGAL CARDS
   =================================================================== */

.legal-card{

    margin-bottom:35px;

    padding:45px;

    border-radius:var(--radius);

    background:var(--glass);

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow-sm);

}

.legal-card h2{

    margin-bottom:20px;

    color:var(--primary);

}

.legal-card p{

    margin-bottom:18px;

}

.legal-card p:last-child{

    margin-bottom:0;

}

.legal-card ul{

    margin:18px 0 18px 22px;

}

.legal-card li{

    list-style:disc;

    color:var(--text-light);

    margin-bottom:10px;

}


/* ===================================================================
   LEGAL HIGHLIGHT
   =================================================================== */

.legal-highlight{

    margin-top:70px;

    padding:70px;

    text-align:center;

    border-radius:var(--radius-xl);

    background:linear-gradient(

        145deg,

        rgba(0,184,255,.14),

        rgba(255,255,255,.04)

    );

    border:1px solid rgba(0,184,255,.25);

    box-shadow:0 0 60px rgba(0,184,255,.15);

}

.highlight-icon{

    font-size:4rem;

    margin-bottom:20px;

}

.highlight-grid{

    display:grid;

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

    gap:20px;

    margin-top:40px;

}

.highlight-item{

    padding:20px;

    border-radius:18px;

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

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

    font-weight:600;

}

.highlight-item span{

    color:var(--primary);

    margin-right:10px;

}
/* ===================================================================
   UTILITIES
   =================================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

.d-none{

    display:none;

}

.d-block{

    display:block;

}

.d-flex{

    display:flex;

}

.d-grid{

    display:grid;

}

.flex-column{

    flex-direction:column;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}


/* ===================================================================
   SPACING
   =================================================================== */

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}

.pt-1{padding-top:10px;}
.pt-2{padding-top:20px;}
.pt-3{padding-top:30px;}
.pt-4{padding-top:40px;}
.pt-5{padding-top:60px;}

.pb-1{padding-bottom:10px;}
.pb-2{padding-bottom:20px;}
.pb-3{padding-bottom:30px;}
.pb-4{padding-bottom:40px;}
.pb-5{padding-bottom:60px;}


/* ===================================================================
   BORDER RADIUS
   =================================================================== */

.rounded-sm{

    border-radius:var(--radius-sm);

}

.rounded{

    border-radius:var(--radius);

}

.rounded-lg{

    border-radius:var(--radius-lg);

}

.rounded-xl{

    border-radius:var(--radius-xl);

}


/* ===================================================================
   SHADOWS
   =================================================================== */

.shadow-xs{

    box-shadow:var(--shadow-xs);

}

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow{

    box-shadow:var(--shadow);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}


/* ===================================================================
   IMAGE HELPERS
   =================================================================== */

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}

.overflow-hidden{

    overflow:hidden;

}


/* ===================================================================
   ACCESSIBILITY
   =================================================================== */

:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:4px;

}

::selection{

    background:rgba(0,184,255,.30);

    color:var(--white);

}


/* ===================================================================
   PERFORMANCE
   =================================================================== */

.hero-logo img,
.project-banner img,
.logo img{

    will-change:transform;

}

.project-banner,
.stat-card,
.legal-card,
.discord-box,
.about-box{

    contain:layout paint;

}


/* ===================================================================
   END OF FILE

   Shadow Wolves Network
   style.css
   Version 3.0
   =================================================================== */