:root{

  --bg:#090b10;

  --bg2:#0d1017;

  --panel:#11151e;

  --panel2:#151a24;

  --text:#f3f5f8;

  --muted:#929baa;

  --line:#242a36;

  --accent:#a7b9ff;

  --accent2:#7d91f5;

  --danger:#ff7f8a;

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

}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

  margin:0;

  background:

    radial-gradient(circle at 15% 0%,rgba(120,140,255,.10),transparent 32%),

    radial-gradient(circle at 85% 15%,rgba(120,140,255,.06),transparent 25%),

    var(--bg);

  color:var(--text);

  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  line-height:1.6;

}

a{color:inherit;text-decoration:none}

button,input,select,textarea{font:inherit}



.nav{

  height:74px;

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

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 max(24px,calc((100% - 1160px)/2));

  background:rgba(9,11,16,.78);

  position:sticky;

  top:0;

  z-index:20;

  backdrop-filter:blur(18px);

}

.brand{

  font-size:21px;

  font-weight:850;

  letter-spacing:-.7px;

}

.nav nav{

  display:flex;

  gap:22px;

  align-items:center;

}

.nav nav>a:not(.button){

  color:var(--muted);

  transition:.2s;

}

.nav nav>a:not(.button):hover{color:var(--text)}



.container{

  max-width:1160px;

  margin:auto;

  padding:0 24px 100px;

}



.hero{

  min-height:570px;

  display:grid;

  grid-template-columns:minmax(0,1.6fr) minmax(280px,.75fr);

  gap:70px;

  align-items:center;

  padding:85px 0 70px;

}

.eyebrow{

  color:var(--accent);

  font-size:11px;

  font-weight:800;

  letter-spacing:.16em;

}

.hero h1{

  font-size:clamp(52px,7vw,86px);

  line-height:.96;

  letter-spacing:-4.8px;

  margin:17px 0 24px;

}

.hero h1 span{color:#707887}

.hero p{

  max-width:650px;

  color:var(--muted);

  font-size:17px;

  line-height:1.8;

}

.hero-actions{

  display:flex;

  align-items:center;

  gap:22px;

  margin-top:32px;

}

.button{

  border:0;

  background:var(--accent);

  color:#090b10;

  font-weight:850;

  padding:13px 19px;

  border-radius:11px;

  cursor:pointer;

  display:inline-flex;

  align-items:center;

  gap:12px;

  transition:transform .18s,box-shadow .18s,background .18s;

  box-shadow:0 10px 30px rgba(167,185,255,.12);

}

.button:hover{

  transform:translateY(-2px);

  background:#b7c6ff;

  box-shadow:0 14px 35px rgba(167,185,255,.2);

}

.button.small{padding:8px 13px;border-radius:9px;font-size:13px}

.text-link{color:#9ea7b5;font-size:14px}

.text-link:hover{color:var(--text)}



.hero-card{

  background:linear-gradient(160deg,rgba(24,30,42,.95),rgba(13,16,23,.92));

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

  border-radius:24px;

  padding:32px;

  box-shadow:var(--shadow);

}

.hero-card-icon{

  width:52px;

  height:52px;

  border-radius:15px;

  display:grid;

  place-items:center;

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

  color:var(--accent);

  font-size:27px;

  margin-bottom:28px;

}

.hero-card strong{

  display:block;

  font-size:20px;

  line-height:1.3;

}

.hero-card p{

  color:var(--muted);

  font-size:14px;

  line-height:1.7;

  margin:10px 0 0;

}



.trust-row{

  display:grid;

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

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

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

}

.trust-row div{

  padding:24px 20px;

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

}

.trust-row div:last-child{border-right:0}

.trust-row strong{

  display:block;

  font-size:14px;

  margin-bottom:3px;

}

.trust-row span{

  color:var(--muted);

  font-size:12px;

}



.section-head{

  display:flex;

  align-items:end;

  justify-content:space-between;

  margin:80px 0 24px;

}

.section-head h2{

  margin:8px 0 0;

  font-size:32px;

  letter-spacing:-1.2px;

}

.story-count{

  color:var(--muted);

  font-size:13px;

}



.filters{

  display:grid;

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

  gap:10px;

  margin-bottom:25px;

}

.search-box{position:relative}

.search-box span{

  position:absolute;

  left:14px;

  top:50%;

  transform:translateY(-50%);

  color:#788190;

  font-size:20px;

}

input,select,textarea{

  width:100%;

  background:rgba(17,21,30,.88);

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

  color:var(--text);

  border-radius:11px;

  padding:12px 13px;

  outline:0;

  transition:.2s;

}

.search-box input{padding-left:39px}

input::placeholder,textarea::placeholder{color:#687180}

input:focus,select:focus,textarea:focus{

  border-color:#4c5a7f;

  box-shadow:0 0 0 3px rgba(167,185,255,.07);

}

select{cursor:pointer}

.filter-btn{

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

  background:var(--panel2);

  color:var(--text);

  padding:0 18px;

  border-radius:11px;

  cursor:pointer;

  font-weight:700;

}

.filter-btn:hover{background:#1b212c}



.feed{display:grid;gap:16px}

.card{

  background:linear-gradient(145deg,rgba(18,22,31,.96),rgba(14,17,24,.96));

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

  border-radius:18px;

  padding:25px;

  transition:transform .2s,border-color .2s,box-shadow .2s;

}

.card:hover{

  transform:translateY(-2px);

  border-color:#323a4a;

  box-shadow:var(--shadow);

}

.card-top{

  display:flex;

  justify-content:space-between;

  gap:20px;

  align-items:flex-start;

}

.meta{

  display:flex;

  flex-wrap:wrap;

  gap:9px;

  color:#7f8897;

  font-size:12px;

  text-transform:capitalize;

}

.pill{

  color:var(--accent);

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

  border:1px solid rgba(167,185,255,.13);

  padding:4px 9px;

  border-radius:999px;

}

.date{

  color:#687180;

  font-size:12px;

  white-space:nowrap;

}

.card h3{

  margin:18px 0 10px;

  font-size:22px;

  line-height:1.3;

  letter-spacing:-.5px;

}

.story{

  white-space:pre-wrap;

  color:#c9ced8;

  font-size:14px;

  line-height:1.8;

  margin:0;

}

.incident{

  display:inline-flex;

  gap:8px;

  margin-top:17px;

  font-size:12px;

  color:#858e9d;

}

.incident span{color:#5f6877}



.post-media{

  display:grid;

  gap:12px;

  margin-top:20px;

}

.post-image{

  display:block;

  width:100%;

  max-width:760px;

  max-height:600px;

  object-fit:contain;

  border-radius:14px;

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

  cursor:zoom-in;

  background:#080a0f;

}

.post-video{

  display:block;

  width:100%;

  max-width:820px;

  max-height:600px;

  border-radius:14px;

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

  background:#000;

}



.actions{

  display:flex;

  gap:8px;

  margin-top:20px;

  padding-top:17px;

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

}

.ghost{

  background:transparent;

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

  color:#929baa;

  padding:8px 12px;

  border-radius:9px;

  cursor:pointer;

  transition:.18s;

}

.ghost:hover{

  color:var(--text);

  border-color:#3a4352;

  background:#171c25;

}

.ghost b{color:#cdd3de;margin-left:4px}



.empty{

  border:1px dashed #303744;

  padding:65px 25px;

  text-align:center;

  color:var(--muted);

  border-radius:17px;

}

.empty-icon{

  font-size:32px;

  color:#657080;

}

.empty h3{

  color:var(--text);

  margin:10px 0 3px;

}

.empty p{margin:0}



.bottom-cta{

  margin-top:90px;

  padding:65px 30px;

  text-align:center;

  background:

    radial-gradient(circle at center,rgba(167,185,255,.11),transparent 48%),

    #0f131b;

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

  border-radius:22px;

}

.bottom-cta h2{

  font-size:clamp(30px,4vw,48px);

  letter-spacing:-1.8px;

  margin:13px 0 10px;

}

.bottom-cta p{

  color:var(--muted);

  max-width:550px;

  margin:0 auto 27px;

}



.form-wrap{

  max-width:760px;

  margin:auto;

  padding-top:70px;

}

.form-wrap.narrow{max-width:460px}

.form-wrap h1{

  font-size:56px;

  letter-spacing:-3px;

  line-height:1;

  margin:13px 0 15px;

}

.form-wrap>.muted{color:var(--muted)}

.form{

  display:grid;

  gap:18px;

  margin-top:28px;

}

.form label{

  display:grid;

  gap:7px;

  font-weight:700;

  font-size:14px;

}

.optional{

  font-weight:400;

  color:var(--muted);

  font-size:12px;

}

.notice{

  background:#121824;

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

  padding:16px;

  border-radius:12px;

  color:#c8ced8;

  margin-top:22px;

}

.error{

  color:var(--danger);

  background:#26161a;

  border:1px solid #5b252c;

  padding:12px;

  border-radius:10px;

}

#result{min-height:24px}

.success{color:#a8e4c0}

.failure{color:var(--danger)}



.moderate{

  display:grid;

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

  gap:8px;

  margin-top:18px;

}

.admin-card{

  border-left:3px solid var(--accent);

}

.admin-card .post-media{margin-top:15px}



footer{

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

  padding:28px 24px;

  color:#687180;

  text-align:center;

  font-size:11px;

  display:grid;

  gap:4px;

}



@media(max-width:860px){

  .hero{

    grid-template-columns:1fr;

    gap:35px;

    padding-top:60px;

  }

  .hero-card{max-width:520px}

  .filters{

    grid-template-columns:1fr 1fr;

  }

  .search-box{grid-column:1/-1}

  .filter-btn{min-height:46px}

}



@media(max-width:650px){

  .nav{

    height:65px;

    padding:0 16px;

  }

  .nav nav{gap:8px}

  .nav nav>a:not(.button){display:none}

  .container{padding:0 16px 70px}

  .hero{

    min-height:auto;

    padding:55px 0 45px;

  }

  .hero h1{

    font-size:50px;

    letter-spacing:-3px;

  }

  .hero p{font-size:15px}

  .hero-actions{

    align-items:flex-start;

    flex-direction:column;

    gap:15px;

  }

  .trust-row{grid-template-columns:1fr}

  .trust-row div{

    border-right:0;

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

  }

  .trust-row div:last-child{border-bottom:0}

  .section-head{

    margin-top:60px;

    align-items:flex-start;

    flex-direction:column;

    gap:10px;

  }

  .filters{grid-template-columns:1fr}

  .search-box{grid-column:auto}

  .filter-btn{height:46px}

  .card{padding:20px}

  .card-top{flex-direction:column;gap:10px}

  .card h3{font-size:20px}

  .actions{

    flex-wrap:wrap;

  }

  .ghost span{display:inline}

  .bottom-cta{

    margin-top:60px;

    padding:45px 20px;

  }

  .form-wrap{

    padding-top:45px;

  }

  .form-wrap h1{

    font-size:44px;

  }

}



@media(max-width:420px){

  .brand{font-size:19px}

  .hero h1{font-size:43px}

  .button{width:100%;justify-content:center}

}

.admin-page{padding:65px 0}

.admin-header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:35px}

.admin-header h1{font-size:52px;margin:10px 0 8px}

.admin-header p{color:var(--muted);margin:0}

.admin-logout{background:transparent;border:1px solid var(--line);color:var(--muted);padding:9px 14px;border-radius:9px;cursor:pointer}

.admin-logout:hover{color:var(--text);border-color:#414a5b}

.admin-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:65px}

.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:17px}

.stat-card span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em}

.stat-card strong{display:block;font-size:28px;margin-top:5px}

.stat-card.pending strong{color:#e8c875}

.stat-card.review strong{color:#a7b9ff}

.stat-card.published strong{color:#9be0b5}

.stat-card.rejected strong{color:#ff858f}

.stat-card.reports strong{color:#ff9b8a}

.admin-section-title{margin-bottom:20px}

.admin-section-title h2{margin:7px 0 0;font-size:29px}

.admin-feed{display:grid;gap:18px}

.admin-post{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:24px}

.admin-post-head{display:flex;justify-content:space-between;gap:20px}

.admin-post h3{margin:12px 0 0;font-size:22px}

.admin-meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;color:#707988;font-size:11px}

.admin-status{padding:4px 9px;border-radius:999px;text-transform:uppercase;font-weight:800;letter-spacing:.06em}

.status-pending{background:#302a18;color:#e8c875}

.status-review{background:#202943;color:#a7b9ff}

.status-published{background:#172a20;color:#9be0b5}

.status-rejected{background:#301a1d;color:#ff858f}

.report-badge{color:#ff9b8a;background:#2b1919;border:1px solid #4b2829;padding:6px 10px;border-radius:8px;font-size:11px;white-space:nowrap}

.admin-info{display:flex;gap:20px;flex-wrap:wrap;margin:20px 0;padding:14px 0;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}

.admin-info span{font-size:12px;color:var(--muted)}

.admin-info b{display:block;color:#626c7b;text-transform:uppercase;font-size:9px;letter-spacing:.08em;margin-bottom:2px}

.admin-story{white-space:pre-wrap;color:#cbd1db;font-size:14px;line-height:1.8}

.admin-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:20px}

.admin-media img{width:100%;height:190px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

.admin-media video{width:100%;max-height:300px;border-radius:10px;background:#000}

.admin-reports{margin-top:20px;border:1px solid #402528;background:#1b1215;border-radius:11px;padding:14px}

.admin-reports>strong{font-size:12px;color:#ff9b8a}

.report-item{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}

.report-item span{font-size:12px;font-weight:700;color:#ffb0a5}

.report-item p{margin:4px 0;color:#c4aeb0;font-size:12px}

.report-item small{color:#6e6265;font-size:10px}

.admin-note{display:flex;gap:8px;margin-top:20px}

.admin-note input{flex:1}

.admin-actions{display:flex;gap:7px}

.admin-btn{border:0;padding:9px 12px;border-radius:8px;cursor:pointer;font-weight:750;font-size:12px}

.admin-btn.publish{background:#9be0b5;color:#09110c}

.admin-btn.review{background:#a7b9ff;color:#0b0d12}

.admin-btn.reject{background:#ff858f;color:#18090b}

.admin-tools{display:flex;align-items:flex-start;gap:10px;margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.05)}

.admin-tools details{flex:1}

.admin-tools summary{cursor:pointer;color:#8f98a7;font-size:12px}

.edit-form{display:grid;gap:12px;margin-top:15px;padding:15px;background:#0c1017;border-radius:11px}

.edit-form label{display:grid;gap:5px;color:#8f98a7;font-size:11px;font-weight:700}

.edit-form textarea{min-height:150px}

.delete-btn{border:1px solid #51272c;background:#261316;color:#ff858f;padding:9px 12px;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px}

.delete-btn:hover{background:#35191d}

.admin-empty{text-align:center;border:1px dashed var(--line);padding:70px;border-radius:15px;color:var(--muted)}

.admin-empty>div{font-size:32px;color:#9be0b5}

.admin-empty h3{color:var(--text);margin:10px 0 3px}

.admin-empty p{margin:0}

@media(max-width:900px){

  .admin-stats{grid-template-columns:repeat(3,1fr)}

  .admin-note{flex-direction:column}

  .admin-actions{display:grid;grid-template-columns:repeat(3,1fr)}

}

@media(max-width:600px){

  .admin-page{padding:40px 0}

  .admin-header{align-items:flex-start;flex-direction:column}

  .admin-header h1{font-size:42px}

  .admin-stats{grid-template-columns:repeat(2,1fr)}

  .admin-post{padding:18px}

  .admin-post-head{flex-direction:column}

  .admin-tools{flex-direction:column}

  .delete-btn{width:100%}

}

/* SafeVoice logo */



.logo-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    text-decoration: none;

}



.logo-image {

    width: 34px;

    height: 34px;

    object-fit: contain;

    display: block;

}



.logo-text {

    color: #f5f7ff;

    font-weight: 800;

    font-size: 17px;

    letter-spacing: -0.02em;

}



.logo-link:hover {

    opacity: 0.9;

}



@media (max-width: 700px) {

    .logo-image {

        width: 30px;

        height: 30px;

    }



    .logo-text {

        font-size: 16px;

    }

}

/* =========================================================

   SAFEVOICE 3D AMBIENT EXPERIENCE

   ========================================================= */



body {

    position: relative;

    overflow-x: hidden;

}





/* ---------------------------------------------------------

   Background container

   --------------------------------------------------------- */



.ambient-background {

    position: fixed;

    inset: 0;

    z-index: -10;

    pointer-events: none;

    overflow: hidden;

    perspective: 1200px;

}





/* ---------------------------------------------------------

   Giant background SafeVoice logo

   --------------------------------------------------------- */



.ambient-logo {

    position: absolute;



    width: min(850px, 75vw);

    height: min(850px, 75vw);



    object-fit: contain;



    left: 50%;

    top: 42%;



    transform:

        translate(-50%, -50%)

        rotateX(8deg)

        rotateY(-10deg);



    opacity: 0.035;



    filter:

        blur(0.5px)

        drop-shadow(0 0 80px rgba(110, 90, 255, 0.18));



    transition: transform 0.8s cubic-bezier(.2,.8,.2,1);

}





/* ---------------------------------------------------------

   Ambient purple light

   --------------------------------------------------------- */



.ambient-glow {

    position: absolute;



    border-radius: 50%;



    filter: blur(80px);



    opacity: 0.25;

}



.glow-one {

    width: 420px;

    height: 420px;



    left: -160px;

    top: 10%;



    background: rgba(91, 73, 255, 0.20);



    animation: glowFloatOne 12s ease-in-out infinite;

}



.glow-two {

    width: 500px;

    height: 500px;



    right: -220px;

    bottom: 5%;



    background: rgba(126, 82, 255, 0.14);



    animation: glowFloatTwo 15s ease-in-out infinite;

}





/* ---------------------------------------------------------

   Floating glass orbs

   --------------------------------------------------------- */



.glass-orb {

    position: absolute;



    border-radius: 50%;



    background:

        radial-gradient(

            circle at 30% 25%,

            rgba(255,255,255,0.12),

            rgba(120,100,255,0.045) 45%,

            rgba(255,255,255,0.015) 70%

        );



    border: 1px solid rgba(255,255,255,0.08);



    box-shadow:

        inset 0 1px 1px rgba(255,255,255,0.08),

        0 20px 80px rgba(50,40,120,0.18);



    backdrop-filter: blur(8px);



    transform-style: preserve-3d;

}





/* Large */



.orb-one {

    width: 120px;

    height: 120px;



    top: 18%;

    left: 7%;



    animation: orbOne 11s ease-in-out infinite;

}





/* Medium */



.orb-two {

    width: 65px;

    height: 65px;



    top: 58%;

    right: 9%;



    animation: orbTwo 9s ease-in-out infinite;

}





/* Small */



.orb-three {

    width: 38px;

    height: 38px;



    bottom: 16%;

    left: 18%;



    animation: orbThree 7s ease-in-out infinite;

}





/* ---------------------------------------------------------

   Floating 3D rings

   --------------------------------------------------------- */



.floating-ring {

    position: absolute;



    border-radius: 50%;



    border: 1px solid rgba(139, 120, 255, 0.13);



    box-shadow:

        0 0 35px rgba(106, 88, 255, 0.08),

        inset 0 0 20px rgba(106, 88, 255, 0.04);



    transform-style: preserve-3d;

}





.ring-one {

    width: 180px;

    height: 180px;



    right: 18%;

    top: 20%;



    transform:

        rotateX(68deg)

        rotateZ(20deg);



    animation: ringFloatOne 14s ease-in-out infinite;

}





.ring-two {

    width: 95px;

    height: 95px;



    left: 12%;

    bottom: 23%;



    transform:

        rotateX(62deg)

        rotateY(20deg);



    animation: ringFloatTwo 10s ease-in-out infinite;

}





/* =========================================================

   Animations

   ========================================================= */



@keyframes orbOne {



    0%, 100% {

        transform:

            translate3d(0, 0, 40px)

            rotateZ(0deg);

    }



    50% {

        transform:

            translate3d(25px, -35px, 100px)

            rotateZ(12deg);

    }

}





@keyframes orbTwo {



    0%, 100% {

        transform:

            translate3d(0, 0, 20px);

    }



    50% {

        transform:

            translate3d(-30px, 25px, 80px);

    }

}





@keyframes orbThree {



    0%, 100% {

        transform:

            translate3d(0, 0, 30px);

    }



    50% {

        transform:

            translate3d(20px, -25px, 70px);

    }

}





@keyframes ringFloatOne {



    0%, 100% {

        transform:

            translate3d(0, 0, 0)

            rotateX(68deg)

            rotateZ(20deg);

    }



    50% {

        transform:

            translate3d(-20px, 30px, 80px)

            rotateX(55deg)

            rotateZ(35deg);

    }

}





@keyframes ringFloatTwo {



    0%, 100% {

        transform:

            translate3d(0, 0, 0)

            rotateX(62deg)

            rotateY(20deg);

    }



    50% {

        transform:

            translate3d(25px, -25px, 60px)

            rotateX(75deg)

            rotateY(35deg);

    }

}





@keyframes glowFloatOne {



    0%, 100% {

        transform: translate3d(0, 0, 0);

    }



    50% {

        transform: translate3d(80px, 50px, 0);

    }

}





@keyframes glowFloatTwo {



    0%, 100% {

        transform: translate3d(0, 0, 0);

    }



    50% {

        transform: translate3d(-70px, -40px, 0);

    }

}





/* =========================================================

   Reduced motion

   ========================================================= */



@media (prefers-reduced-motion: reduce) {



    .glass-orb,

    .floating-ring,

    .ambient-glow {

        animation: none;

    }



}





/* =========================================================

   Mobile

   ========================================================= */



@media (max-width: 700px) {



    .ambient-logo {

        width: 550px;

        height: 550px;

        opacity: 0.025;

    }



    .orb-one {

        width: 75px;

        height: 75px;

        left: -20px;

    }



    .orb-two {

        width: 45px;

        height: 45px;

        right: -10px;

    }



    .ring-one {

        width: 120px;

        height: 120px;

        right: -40px;

    }



    .ring-two {

        width: 70px;

        height: 70px;

        left: -25px;

    }



}

/* =========================================================

   SAFEVOICE LAYOUT FIX

   ========================================================= */



.site-header {

    position: relative;

    z-index: 20;

}



.nav-container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    min-height: 72px;



    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}





/* Logo */



.brand-logo {

    display: inline-flex;

    align-items: center;

    gap: 9px;



    text-decoration: none;

    color: #f5f7ff;



    font-weight: 800;

    font-size: 17px;

    letter-spacing: -0.02em;



    flex-shrink: 0;

}



.brand-logo img {

    width: 32px;

    height: 32px;



    object-fit: contain;

    display: block;

}



.brand-logo span {

    color: #f5f7ff;

}





/* Navigation */



.site-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 26px;

}



.site-nav a {

    color: #8f96aa;

    text-decoration: none;



    font-size: 13px;

    font-weight: 500;



    transition:

        color 0.2s ease,

        opacity 0.2s ease;

}



.site-nav a:hover {

    color: #ffffff;

}



.site-nav .nav-cta {

    color: #11131d;



    background: #aebaff;



    padding: 10px 16px;



    border-radius: 9px;



    font-weight: 700;



    box-shadow:

        0 8px 25px rgba(100, 90, 255, 0.15);

}



.site-nav .nav-cta:hover {

    color: #11131d;

    opacity: 0.9;

}





/* Main page width */



main {

    position: relative;

    z-index: 2;

}





/* Footer */



.site-footer {

    position: relative;

    z-index: 2;



    width: min(1180px, calc(100% - 48px));

    margin: 100px auto 0;

}



.footer-inner {

    display: flex;

    justify-content: space-between;

    gap: 40px;

}



.footer-links {

    display: flex;

    gap: 24px;

}



.footer-links a {

    color: #858b9d;

    text-decoration: none;

}



.footer-links a:hover {

    color: #ffffff;

}



.footer-bottom {

    display: flex;

    justify-content: space-between;



    margin-top: 30px;

    padding: 20px 0;



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



    color: #62697b;

    font-size: 12px;

}





/* =========================================================

   3D BACKGROUND

   ========================================================= */



.ambient-background {

    position: fixed;

    inset: 0;



    overflow: hidden;

    pointer-events: none;



    z-index: 0;



    perspective: 1200px;

}





/* Giant logo */



.ambient-logo {

    position: absolute;



    width: 700px;

    height: 700px;



    max-width: 80vw;

    max-height: 80vh;



    object-fit: contain;



    left: 50%;

    top: 42%;



    transform:

        translate(-50%, -50%)

        rotateX(8deg)

        rotateY(-8deg);



    opacity: 0.028;



    filter:

        blur(0.5px)

        drop-shadow(

            0 0 80px

            rgba(110, 90, 255, 0.15)

        );

}





/* Ambient glow */



.ambient-glow {

    position: absolute;



    border-radius: 50%;



    filter: blur(90px);



    opacity: 0.18;

}



.glow-one {

    width: 420px;

    height: 420px;



    left: -180px;

    top: 15%;



    background:

        rgba(91, 73, 255, 0.20);



    animation:

        glowOne 14s ease-in-out infinite;

}



.glow-two {

    width: 450px;

    height: 450px;



    right: -200px;

    bottom: 10%;



    background:

        rgba(126, 82, 255, 0.15);



    animation:

        glowTwo 17s ease-in-out infinite;

}





/* Glass objects */



.glass-orb {

    position: absolute;



    border-radius: 50%;



    background:

        radial-gradient(

            circle at 30% 25%,

            rgba(255,255,255,0.10),

            rgba(120,100,255,0.035) 50%,

            rgba(255,255,255,0.01) 75%

        );



    border:

        1px solid

        rgba(255,255,255,0.07);



    box-shadow:

        inset 0 1px 1px

        rgba(255,255,255,0.08),



        0 20px 70px

        rgba(50,40,120,0.15);



    backdrop-filter: blur(8px);

}



.orb-one {

    width: 90px;

    height: 90px;



    left: 8%;

    top: 25%;



    animation:

        orbOne 11s ease-in-out infinite;

}



.orb-two {

    width: 55px;

    height: 55px;



    right: 8%;

    top: 55%;



    animation:

        orbTwo 9s ease-in-out infinite;

}



.orb-three {

    width: 30px;

    height: 30px;



    left: 17%;

    bottom: 18%;



    animation:

        orbThree 8s ease-in-out infinite;

}





/* Rings */



.floating-ring {

    position: absolute;



    border-radius: 50%;



    border:

        1px solid

        rgba(139,120,255,0.10);



    box-shadow:

        0 0 30px

        rgba(106,88,255,0.06);

}



.ring-one {

    width: 150px;

    height: 150px;



    right: 14%;

    top: 22%;



    transform:

        rotateX(65deg)

        rotateZ(20deg);



    animation:

        ringOne 14s ease-in-out infinite;

}



.ring-two {

    width: 80px;

    height: 80px;



    left: 11%;

    bottom: 22%;



    transform:

        rotateX(60deg)

        rotateY(20deg);



    animation:

        ringTwo 11s ease-in-out infinite;

}





/* =========================================================

   ANIMATIONS

   ========================================================= */



@keyframes orbOne {



    0%, 100% {

        transform:

            translate3d(0, 0, 30px);

    }



    50% {

        transform:

            translate3d(25px, -30px, 80px);

    }

}



@keyframes orbTwo {



    0%, 100% {

        transform:

            translate3d(0, 0, 20px);

    }



    50% {

        transform:

            translate3d(-25px, 25px, 70px);

    }

}



@keyframes orbThree {



    0%, 100% {

        transform:

            translate3d(0, 0, 20px);

    }



    50% {

        transform:

            translate3d(20px, -20px, 60px);

    }

}



@keyframes ringOne {



    0%, 100% {

        transform:

            translate3d(0,0,0)

            rotateX(65deg)

            rotateZ(20deg);

    }



    50% {

        transform:

            translate3d(-20px,25px,60px)

            rotateX(55deg)

            rotateZ(30deg);

    }

}



@keyframes ringTwo {



    0%, 100% {

        transform:

            translate3d(0,0,0)

            rotateX(60deg)

            rotateY(20deg);

    }



    50% {

        transform:

            translate3d(20px,-20px,50px)

            rotateX(70deg)

            rotateY(30deg);

    }

}



@keyframes glowOne {



    0%, 100% {

        transform: translate(0,0);

    }



    50% {

        transform: translate(70px,40px);

    }

}



@keyframes glowTwo {



    0%, 100% {

        transform: translate(0,0);

    }



    50% {

        transform: translate(-60px,-40px);

    }

}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 700px) {



    .nav-container {

        width: min(

            100% - 28px,

            1180px

        );



        min-height: 64px;

    }



    .site-nav {

        gap: 12px;

    }



    .site-nav a {

        font-size: 12px;

    }



    .site-nav .nav-cta {

        padding: 8px 11px;

    }



    .brand-logo img {

        width: 29px;

        height: 29px;

    }



    .brand-logo span {

        font-size: 15px;

    }



    .site-footer {

        width: calc(100% - 28px);

    }



    .footer-inner {

        flex-direction: column;

    }



    .footer-bottom {

        flex-direction: column;

        gap: 8px;

    }



    .ambient-logo {

        width: 500px;

        height: 500px;

        opacity: 0.022;

    }



    .ring-one {

        right: -30px;

    }



    .ring-two {

        left: -25px;

    }



}

/* =========================================================

   SAFEVOICE CONTENT WIDTH + SPACING FIX

   ========================================================= */



.site-main {

    position: relative;

    z-index: 2;

    width: 100%;

}





/* Main content container */



.page-container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}





/* Keep the hero compact */



.page-container .hero {

    min-height: 0 !important;

    height: auto !important;

    padding-top: 72px;

    padding-bottom: 42px;

}





/* Don't let sections create giant empty gaps */



.page-container section {

    margin-top: 0;

}





/* Trust / feature strip */



.page-container .trust-strip {

    margin-top: 0 !important;

}





/* Stories section */



.page-container .stories-section {

    margin-top: 52px !important;

    padding-top: 0 !important;

}





/* Search/filter area */



.page-container .stories-header {

    margin-bottom: 22px;

}





/* =========================================================

   DESKTOP

   ========================================================= */



@media (min-width: 1000px) {



    .page-container {

        width: min(1180px, calc(100% - 80px));

    }



    .page-container .hero {

        padding-top: 58px;

        padding-bottom: 34px;

    }



}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 700px) {



    .page-container {

        width: calc(100% - 28px);

    }



    .page-container .hero {

        padding-top: 40px;

        padding-bottom: 28px;

    }



    .page-container .stories-section {

        margin-top: 36px !important;

    }



}

/* =========================================================

   SUPPORT + SHARE

   ========================================================= */



.actions {

    align-items: center;

    flex-wrap: wrap;

}





/* Support button */



.support-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    position: relative;

    overflow: hidden;

}





.support-heart {

    font-size: 17px;

    line-height: 1;

    transition:

        transform .2s ease,

        color .2s ease;

}





.support-btn:hover .support-heart {

    transform: scale(1.12);

}





.support-btn.supported {

    color: #d5caff;

    border-color: rgba(167,185,255,.28);

    background: rgba(167,185,255,.07);

}





.support-btn.supported .support-heart {

    color: #a7b9ff;

}





.support-count {

    min-width: 16px;

    text-align: center;

}





/* Little heart pop */



.support-pop .support-heart {

    animation: supportHeartPop .42s cubic-bezier(.2,.9,.3,1);

}





@keyframes supportHeartPop {



    0% {

        transform: scale(1);

    }



    35% {

        transform: scale(1.55);

    }



    65% {

        transform: scale(.9);

    }



    100% {

        transform: scale(1);

    }



}





/* Share */



.share-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}





.share-btn > span:first-child {

    font-size: 16px;

    line-height: 1;

    transition: transform .2s ease;

}





.share-btn:hover > span:first-child {

    transform: translate(2px,-2px);

}





/* Share toast */



.share-toast {

    position: fixed;



    left: 50%;

    bottom: 28px;



    transform:

        translate(-50%, 20px)

        scale(.96);



    opacity: 0;

    pointer-events: none;



    z-index: 100;



    padding: 11px 16px;



    border-radius: 10px;



    background: rgba(20,24,34,.92);



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



    box-shadow:

        0 15px 45px rgba(0,0,0,.35);



    backdrop-filter: blur(16px);



    color: #f3f5f8;



    font-size: 13px;

    font-weight: 650;



    transition:

        opacity .2s ease,

        transform .2s ease;

}





.share-toast.show {

    opacity: 1;



    transform:

        translate(-50%, 0)

        scale(1);

}





/* =========================================================

   STORY CARD INTERACTION POLISH

   ========================================================= */



.card {

    position: relative;

    overflow: hidden;

}





.card::before {

    content: "";



    position: absolute;



    top: 0;

    left: 0;



    width: 100%;

    height: 1px;



    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(167,185,255,.18),

            transparent

        );



    opacity: 0;



    transition: opacity .25s ease;

}





.card:hover::before {

    opacity: 1;

}





/* =========================================================

   MOBILE ACTIONS

   ========================================================= */



@media (max-width: 650px) {



    .actions {

        gap: 7px;

    }



    .ghost {

        padding: 8px 10px;

    }



    .support-label {

        font-size: 12px;

    }



}





@media (max-width: 480px) {



    .support-label {

        display: none;

    }



    .support-btn {

        min-width: 44px;

        justify-content: center;

    }



    .share-btn {

        min-width: 44px;

        justify-content: center;

    }



    .share-btn > span:last-child {

        display: none;

    }



}

/* =========================================================
   PRIVATE HELP REQUESTS
   ========================================================= */

.help-request-card {
    margin-top: 72px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(18,22,31,.94), rgba(14,17,24,.94));
    box-shadow: var(--shadow);
}

.help-request-card h2 {
    margin: 9px 0 8px;
    font-size: 32px;
    letter-spacing: -1.1px;
}

.help-request-card > p {
    max-width: 650px;
    margin: 0;
}

.help-form {
    margin-top: 24px;
}

.help-contact-fields {
    display: grid;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(167,185,255,.10);
    border-radius: 13px;
    background: rgba(167,185,255,.035);
}

.help-contact-fields[hidden] {
    display: none;
}

.help-private-note {
    margin-top: 0;
}

#help-result {
    min-height: 24px;
}

.help-section-heading {
    margin-top: 70px;
}

.help-feed {
    margin-bottom: 65px;
}

.help-request-admin-card {
    border-left: 3px solid #a7b9ff;
}

.help-status {
    padding: 4px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .06em;
}

.status-help-pending {
    background: #302a18;
    color: #e8c875;
}

.status-help-reviewing {
    background: #202943;
    color: #a7b9ff;
}

.status-help-resolved {
    background: #172a20;
    color: #9be0b5;
}

.status-help-rejected {
    background: #301a1d;
    color: #ff858f;
}

.private-badge {
    color: #c7ceff;
    background: rgba(167,185,255,.08);
    border: 1px solid rgba(167,185,255,.15);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.contact-sensitive {
    color: #e8edff !important;
}

.admin-help-actions {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.help-control-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 10px;
}

.help-control-row label {
    display: grid;
    gap: 6px;
    color: #8f98a7;
    font-size: 11px;
    font-weight: 700;
}

.help-note-field {
    min-width: 0;
}

.help-empty {
    padding: 55px 25px;
}

@media (max-width: 900px) {
    .help-control-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .help-request-card {
        margin-top: 55px;
        padding: 20px;
    }

    .help-request-card h2 {
        font-size: 28px;
    }

    .help-section-heading {
        margin-top: 55px;
    }

    .private-badge {
        align-self: flex-start;
    }
}