okay lets start doing this one by one lets get a proper domain first
Pasted text.txt
Document
Pasted text (2).txt
Document
Pasted text (3).txt
Document

Yes, I actually think only having two plans is the better business decision, especially for where CyberNet AI is today.

Most successful SaaS products start with just two plans because it reduces decision fatigue and increases conversions.

🟢 CyberNet AI Free

$0/month

Perfect for trying CyberNet AI.

Included
✅ 5 AI analyses per day (shared across Text, Link, and Image)
✅ AI-powered phishing and scam detection
✅ High-accuracy threat detection
✅ Basic threat explanations
✅ Cybersecurity learning center
❌ No scan history
❌ No downloadable reports
❌ No GhostScan

Button: Start Free

🔵 CyberNet AI Pro ⭐

$9.99/month

Everything in Free, plus:

✅ 50 AI analyses per day
✅ Enhanced AI analysis for Text, Link, and Images
✅ Advanced threat intelligence and explanations
✅ Advanced risk scoring
✅ Downloadable PDF security reports
✅ Unlimited scan history
✅ Faster AI responses
✅ Full GhostScan sandbox access
✅ Priority access to new CyberNet AI features

Button: Upgrade to Pro

Later (not now)

When CyberNet AI grows and businesses start contacting you, you can add a third plan:

Enterprise – Contact Sales

This could include:

Unlimited users
API access
Team management
Dedicated support
Custom integrations
SLA and onboarding

At this stage, though, I would not put an Enterprise plan on the pricing page. It adds complexity without helping most visitors.

One more suggestion

I'd also add a small comparison at the bottom of the pricing cards:

Feature	Free	Pro
Daily AI analyses	5	50
Text analysis	✅	✅ Enhanced
Link analysis	✅	✅ Enhanced
Image analysis	✅	✅ Enhanced
Scan history	❌	✅
PDF reports	❌	✅
GhostScan	❌	✅
Faster AI responses	❌	✅

I think this is a clean, professional pricing model that clearly communicates the value of upgrading without overwhelming users with too many options.

okay things i need changed in the website will be i need to figure out a way how to lock features until the customer pays and howto block users that have the free version and we need to change the payment feature so when a person enters i need it to show them the 2 options the free and the pro version and a table under them to compate the 2 models togteher and whats the differnce and if the person pays for a year they get 20 percent off so they pay for 95.9 dollars for the whole year and we need to integrate it as well into it and then when the person pays for the pro version the website unlocks for them and the on the home page it shows the Pro version on the top right beside their Hi " name " and after that wel integrate it with stripe 
Worked for 15s

Yes—that is the correct next step. But the locking must be done securely on the backend, not only by hiding buttons in JavaScript.

Here is the exact system we should build.

The two plans
CyberNet AI Free — $0
5 analyses per day total
The limit is shared across Text, Link, and Image
Accurate AI threat detection
Basic threat explanations
No saved scan history
No downloadable reports
No GhostScan access
CyberNet AI Pro — $9.99/month

Or:

$95.90/year — 20% discount

Everything in Free
50 analyses per day total
Advanced Text, Link, and Image analysis
Detailed threat explanations
Advanced risk scoring
Downloadable security reports
Saved scan history
Faster AI responses
Full GhostScan access
What changes on the website
1. New pricing screen

When users open Pricing, they will see only two cards:

CyberNet AI Free
CyberNet AI Pro

Above the cards, there will be a toggle:

Monthly | Yearly — Save 20%

When Monthly is selected:

CyberNet AI Pro
$9.99/month

When Yearly is selected:

CyberNet AI Pro
$95.90/year
Equivalent to about $7.99/month
Save 20%
2. Comparison table under the cards
Feature	CyberNet AI Free	CyberNet AI Pro
Daily analyses	5 total	50 total
Text analysis	Standard	Advanced
Link analysis	Standard	Advanced
Image analysis	Standard	Advanced
Threat explanations	Basic	Detailed
Advanced risk scoring	No	Yes
Saved history	No	Yes
PDF reports	No	Yes
Faster AI responses	No	Yes
GhostScan	No	Full access
Price	Free	$9.99/month or $95.90/year
3. Account plan status

After login, the navbar will show:

Hi, John   FREE

or:

Hi, John   PRO

The PRO badge will appear beside the user’s name in the top-right corner.

4. Feature locking

Free users can still open Text, Link, and Image analysis.

Before every analysis, the secure backend checks:

Is the user logged in?
What plan do they have?
How many analyses have they used today?

For Free:

5 / 5 analyses used today
Upgrade to CyberNet AI Pro

For Pro:

17 / 50 analyses used today

Locked Pro features will show an upgrade panel instead of opening:

Scan history
Download reports
Advanced risk details
Faster processing mode
GhostScan

Example:

GhostScan is available with CyberNet AI Pro.

Unlock GhostScan, advanced analysis, saved history,
security reports, and 50 daily analyses.

[Upgrade to Pro]
5. Secure payment unlocking

We must not unlock Pro just because the browser says payment succeeded.

The secure flow will be:

User chooses Pro
        ↓
Stripe Checkout
        ↓
Stripe confirms payment
        ↓
Stripe webhook calls Netlify
        ↓
Database changes plan to "pro"
        ↓
Website refreshes account status
        ↓
Pro features unlock

If the subscription is cancelled, expires, or payment fails, Stripe updates the database and the account returns to Free.

6. What we need behind the website

Your current login says demo mode, so it cannot securely identify paying users yet. We need:

Supabase Authentication for real accounts
Supabase Database for plans, usage, and history
Netlify Functions for secure AI requests
Stripe Checkout for monthly and yearly payments
Stripe Webhooks for activating or removing Pro access

The database will track something like:

users
- user_id
- full_name
- email
- plan: free or pro
- stripe_customer_id
- subscription_status
- billing_period
- daily_usage
- usage_reset_date
Correct implementation order
Replace demo login with real authentication.
Add Free and Pro plans to the website.
Add monthly/yearly pricing toggle and comparison table.
Add account plan badge.
Add secure daily usage limits.
Add locked Pro screens.
Connect Stripe monthly and yearly products.
Add Stripe webhook activation.
Test payments using Stripe Test Mode.
Activate live payments.

I’ll preserve your current CyberNet AI design, animations, detection pages, Learn section, and GhostScan page. The next complete version should include the updated website UI and the secure account/database foundation; Stripe can then be connected without rebuilding everything again.

perfect whatever u said is perfect lets integrate it and chage the wesbite give me the full code to copy paste it after and make it nicely and organized looking and as well the home page whenever i open it the screen glitches and the numbers jump up and down please have a look at it as well while your at it 
Worked for 19m 31s

Done. I rebuilt the complete CyberNet AI project with the new Free/Pro system and preserved the existing design and features.

Complete project

Download the full CyberNet AI SaaS project

For copying everything manually:

cybernet-ai-complete-copy-paste.txt

cybernet-script-copy.txt

Main replacement files
index.html
style.css
script.js
config.js
schema.sql
README.txt
Changes included
CyberNet AI Free
5 AI analyses per day
Shared collectively between Text, Link, and Image analysis
Accurate AI threat detection
Basic threat explanations
No saved history
No downloadable reports
No GhostScan access
CyberNet AI Pro
$9.99 per month
$95.90 per year
50 AI analyses per day
Advanced Text, Link, and Image analysis
Detailed threat intelligence and risk scoring
Saved scan history
Downloadable security reports
Faster-response model configuration
Full GhostScan access
Website updates
Only two pricing plans
Monthly/yearly selector
20% yearly discount display
Full comparison table
Secure sign-up and login interface
Password reset
Sign-out
FREE or PRO badge beside Hi, Name
Daily-usage display
Upgrade paywalls
Locked GhostScan for Free accounts
Pro history panel
Stripe Checkout preparation
Stripe webhook for securely activating and removing Pro
Stripe billing portal support
Home-page glitch fix

I removed the scroll effect that was transforming the whole hero while its opening animation was still running. I also reserved fixed space for the animated statistics and changed the counters to a smoother one-time animation. This prevents the numbers and layout from jumping when Home first opens.

Important setup

The interface is complete, but real account protection requires Supabase. Supabase Auth uses authenticated sessions/JWTs, while Row Level Security prevents customers from changing their own plan or reading another user’s records. The service-role key stays only on your server.

Stripe is already prepared in the code, but the Upgrade button will not accept payments until you create the monthly and yearly Stripe prices and add your Stripe keys. Checkout handles the subscription payment, while verified webhook events activate or remove Pro access.

Your private OpenAI, Stripe, and Supabase service-role keys must be placed in Netlify environment variables—not in the public HTML or JavaScript.

Follow the included README.txt in order. I verified the JavaScript syntax, HTML structure, function syntax, duplicate IDs, and ZIP integrity. Package installation could not complete in the sandbox because the npm command timed out, so run npm install locally before deployment.

Library
/
CyberNet
/
style.css
*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#050a16;
  --bg-alt:#08111f;
  --glass:rgba(15,28,48,0.48);
  --glass-strong:rgba(15,28,48,0.7);
  --glass-border:rgba(56,189,248,0.16);
  --glass-border-strong:rgba(56,189,248,0.34);
  --green:#22d3ee;
  --green-dim:#0e6a85;
  --green-bright:#a5f0ff;
  --text:#eaf3fb;
  --muted:#7d93ad;
  --soft:#425873;
  --danger:#ff6b6b;
  --warning:#ffcf6b;
  --safe:#34d399;
  --font-mono:'JetBrains Mono',monospace;
  --font-body:'Inter',sans-serif;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  background:
    radial-gradient(
      ellipse 90% 50% at 20% -10%,
      rgba(34,211,238,0.1),
      transparent 60%
    ),
    radial-gradient(
      ellipse 70% 45% at 90% 10%,
      rgba(59,130,246,0.09),
      transparent 55%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(8,17,31,0.6),
      transparent 65%
    ),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
}

/* Faint scanline texture */
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:998;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 4px
  );
  opacity:0.3;
}

body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--green),
    #3b82f6,
    transparent
  );
  background-size:200% 100%;
  animation:topBarShift 5s linear infinite;
  z-index:999;
  pointer-events:none;
  opacity:.6;
}

::-webkit-scrollbar{
  width:5px;
}

::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.02);
}

::-webkit-scrollbar-thumb{
  background:var(--green-dim);
  border-radius:999px;
}

button,
input,
textarea{
  font-family:inherit;
}

button{
  cursor:pointer;
}

/* ═══ GLASS ═══ */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ═══ BACKGROUND ═══ */
.background{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:-5;
}

.blur-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.4;
  animation:orbFloat 13s ease-in-out infinite;
}

.orb-a{
  width:460px;
  height:460px;
  left:-160px;
  top:40px;
  background:radial-gradient(
    circle,
    rgba(34,211,238,0.55),
    transparent 65%
  );
}

.orb-b{
  width:420px;
  height:420px;
  right:-140px;
  top:220px;
  background:radial-gradient(
    circle,
    rgba(59,130,246,0.4),
    transparent 65%
  );
  animation-delay:3s;
  animation-duration:16s;
}

.orb-c{
  width:380px;
  height:380px;
  left:30%;
  bottom:-180px;
  background:radial-gradient(
    circle,
    rgba(34,211,238,0.3),
    transparent 65%
  );
  animation-delay:6s;
  animation-duration:19s;
}

.aurora-sweep{
  position:absolute;
  inset:-20% -10%;
  background:linear-gradient(
    115deg,
    transparent 20%,
    rgba(34,211,238,0.05) 40%,
    rgba(59,130,246,0.06) 55%,
    transparent 75%
  );
  background-size:250% 250%;
  animation:auroraDrift 22s ease-in-out infinite;
}

@keyframes auroraDrift{
  0%{background-position:0% 30%}
  50%{background-position:100% 70%}
  100%{background-position:0% 30%}
}

.grid-glow{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(
      rgba(56,189,248,0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(56,189,248,0.025) 1px,
      transparent 1px
    );
  background-size:64px 64px;
  mask-image:radial-gradient(
    circle at center,
    black,
    transparent 72%
  );
  opacity:0.5;
  animation:gridDrift 30s linear infinite;
}

@keyframes gridDrift{
  from{background-position:0 0}
  to{background-position:64px 64px}
}

#particleCanvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
}

/* ═══ TERMINAL WINDOW ═══ */
.term-window,
.loader-term,
.fetch-panel{
  border-radius:16px;
  overflow:hidden;
}

.term-chrome{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--glass-border);
  background:rgba(0,0,0,0.18);
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

.dot.r{background:#ff6b6b}
.dot.y{background:#ffcf6b}
.dot.g{background:#22d3ee}

.term-path{
  margin-left:10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}

.term-body{
  padding:22px;
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.9;
  color:var(--green-bright);
  min-height:180px;
}

.term-body .prompt,
.prompt{
  color:var(--green);
  margin-right:8px;
}

.term-line{
  opacity:0;
  animation:termLineIn .4s ease forwards;
}

.term-cursor{
  display:inline-block;
  width:8px;
  height:16px;
  background:var(--green);
  vertical-align:middle;
  animation:cursorBlink 1s step-end infinite;
  margin-left:2px;
}

/* ═══ NAVBAR ═══ */
.navbar{
  width:min(1500px,calc(100% - 48px));
  min-height:70px;
  margin:20px auto 0;
  padding:0 22px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:16px;
  z-index:50;
}

.brand{
  border:none;
  background:transparent;
  text-decoration:none;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:19px;
  font-weight:700;
}

.brand-mark{
  color:var(--green);
  font-family:var(--font-mono);
  font-weight:800;
  text-shadow:0 0 16px rgba(34,211,238,0.5);
}

.brand-text{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  white-space:nowrap;
}

.brand-text span{
  color:var(--green);
}

.brand-text small{
  margin-left:7px;
  padding:3px 6px;
  border:1px solid rgba(34,211,238,.28);
  border-radius:6px;
  color:var(--green-bright);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(34,211,238,.06);
  vertical-align:middle;
}

.nav-tabs{
  display:flex;
  align-items:center;
  gap:26px;
  position:relative;
}

.nav-indicator{
  position:absolute;
  bottom:-8px;
  left:0;
  height:2px;
  width:0;
  background:linear-gradient(
    90deg,
    var(--green),
    #3b82f6
  );
  border-radius:999px;
  box-shadow:0 0 10px rgba(34,211,238,0.7);
  transition:
    transform .35s cubic-bezier(.65,0,.35,1),
    width .35s cubic-bezier(.65,0,.35,1),
    opacity .25s ease;
  opacity:0;
}

.nav-tabs.indicator-ready .nav-indicator{
  opacity:1;
}

.nav-link{
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  position:relative;
  transition:color .25s;
  padding-bottom:4px;
}

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

.nav-link.active{
  color:var(--green);
}

.ghost-nav-link span{
  display:inline-flex;
  align-items:center;
  margin-left:4px;
  padding:2px 5px;
  border:1px solid rgba(69,245,121,.42);
  border-radius:999px;
  color:#45f579;
  font-size:7px;
  line-height:1;
  font-weight:800;
  vertical-align:middle;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav-greeting{
  color:var(--green);
  font-family:var(--font-mono);
  font-size:13px;
  display:none;
}

.nav-greeting.visible{
  display:inline;
}

.login-btn{
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
  padding:9px 16px;
  border-radius:10px;
  transition:border-color .2s,color .2s;
}

.login-btn:hover{
  border-color:var(--glass-border-strong);
  color:var(--green);
}

.mobile-menu{
  display:none;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  width:42px;
  height:42px;
  border-radius:10px;
}

/* ═══ BUTTONS ═══ */
.primary-btn,
.secondary-btn{
  min-height:46px;
  padding:0 22px;
  border-radius:11px;
  border:none;
  color:var(--bg);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.primary-btn{
  background:var(--green);
  box-shadow:0 0 24px rgba(34,211,238,0.25);
}

.primary-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 36px rgba(34,211,238,0.4);
}

.secondary-btn{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--glass-border);
  color:var(--text);
}

.secondary-btn:hover{
  transform:translateY(-2px);
  border-color:var(--glass-border-strong);
}

.primary-btn:disabled,
.secondary-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
}

.big{
  min-height:54px;
  padding-inline:26px;
  font-size:14px;
}

.full{
  width:100%;
}

.btn-spinner{
  display:inline-block;
  width:13px;
  height:13px;
  border:2px solid rgba(0,0,0,0.25);
  border-top-color:var(--bg);
  border-radius:50%;
  animation:btnSpin .6s linear infinite;
  vertical-align:middle;
}

main{
  width:min(1500px,calc(100% - 48px));
  margin:0 auto;
}

/* ═══ PAGES ═══ */
.page{
  display:none;
  min-height:calc(100vh - 110px);
  padding:50px 30px 36px;
  animation:pageFade .5s ease both;
  transition:opacity .32s ease,transform .32s ease;
}

.active-page{
  display:block;
}

.page.leaving{
  opacity:0;
  transform:translateY(-14px);
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

.tilt-card{
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  transform-style:preserve-3d;
  will-change:transform;
}

/* ═══ HERO ═══ */
.hero{
  position:relative;
  min-height:560px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12.5px;
  margin-bottom:26px;
}

.pill.center{
  margin-inline:auto;
}

.hero-content h1,
.section-head h1,
.about-top h1,
.feature-hero h1,
.learn-hero h1{
  font-family:var(--font-mono);
  font-size:clamp(30px,3.4vw,50px);
  line-height:1.15;
  letter-spacing:-1px;
  font-weight:700;
  margin-bottom:18px;
}

.hero-content h1 span,
.section-head h1 span,
.about-top h1 span,
.feature-hero h1 span,
.learn-hero h1 span{
  color:var(--green);
  text-shadow:0 0 30px rgba(34,211,238,0.3);
}

.hero-title{
  font-family:var(--font-body);
  font-size:clamp(38px,4.4vw,64px);
  line-height:1.1;
  letter-spacing:-1.5px;
  font-weight:800;
  margin-bottom:20px;
}

.hero-title span{
  color:var(--green);
  text-shadow:0 0 30px rgba(34,211,238,0.3);
}

.hero-content p,
.section-head p,
.feature-hero p,
.learn-hero p{
  color:var(--muted);
  font-size:15.5px;
  line-height:1.75;
  max-width:560px;
}

.hero-buttons{
  display:flex;
  gap:18px;
  margin-top:30px;
  flex-wrap:wrap;
}

.hero-stats-row{
  display:flex;
  gap:0;
  flex-wrap:wrap;
  margin-top:44px;
}

.hero-stats-row div{
  padding-right:28px;
  margin-right:28px;
  border-right:1px solid var(--glass-border);
}

.hero-stats-row div:last-child{
  border-right:none;
  padding-right:0;
  margin-right:0;
}

.hero-stats-row strong{
  display:block;
  font-family:var(--font-body);
  font-size:26px;
  font-weight:800;
  color:var(--text);
  background:linear-gradient(100deg,var(--green),#3b82f6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-stats-row span{
  display:block;
  color:var(--muted);
  font-size:12.5px;
  margin-top:4px;
}

.about-stats-row{
  justify-content:center;
  margin:0 auto 36px;
  max-width:600px;
}

.hero-visual{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ═══ ROTATING GLOBE + SHIELD HERO ═══ */
.globe-shield-wrap{
  position:relative;
  width:440px;
  height:440px;
  max-width:100%;
  perspective:1200px;
}

.globe-glow{
  position:absolute;
  inset:-40px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(34,211,238,0.16),
    transparent 68%
  );
  animation:globeGlowPulse 4s ease-in-out infinite;
}

@keyframes globeGlowPulse{
  0%,100%{
    opacity:0.7;
    transform:scale(0.96);
  }
  50%{
    opacity:1;
    transform:scale(1.04);
  }
}

.globe-3d-pos{
  position:absolute;
  top:50%;
  left:50%;
  width:360px;
  height:360px;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
}

.globe-3d{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  animation:globeSpin 22s linear infinite;
}

@keyframes globeSpin{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}

.globe-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(56,189,248,0.32);
}

.globe-ring.gr1{transform:rotateY(0deg)}
.globe-ring.gr2{transform:rotateY(30deg)}
.globe-ring.gr3{transform:rotateY(60deg)}
.globe-ring.gr4{transform:rotateY(90deg)}

.globe-ring.gr-eq{
  transform:rotateX(90deg);
  border-color:rgba(34,211,238,0.4);
}

.globe-ring.gr-lat1{
  inset:10%;
  transform:rotateX(65deg);
}

.globe-ring.gr-lat2{
  inset:24%;
  transform:rotateX(65deg) rotateY(180deg);
}

.globe-ring.gr-lat3{
  inset:38%;
  transform:rotateX(65deg);
}

.hero-shield{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:135px;
  height:auto;
  filter:drop-shadow(0 0 26px rgba(34,211,238,0.6));
}

.hero-shield svg{
  width:100%;
  height:auto;
  position:relative;
  z-index:2;
}

.shield-pulse{
  position:absolute;
  top:50%;
  left:50%;
  width:70px;
  height:70px;
  border-radius:50%;
  border:1.5px solid rgba(34,211,238,0.6);
  transform:translate(-50%,-50%) scale(0.6);
  animation:shieldPulseOut 3s ease-out infinite;
}

.shield-pulse.p2{
  animation-delay:1.5s;
}

@keyframes shieldPulseOut{
  0%{
    transform:translate(-50%,-50%) scale(0.5);
    opacity:0.9;
  }
  100%{
    transform:translate(-50%,-50%) scale(2.6);
    opacity:0;
  }
}

.hero-status-badge{
  position:absolute;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  width:190px;
  z-index:4;
  animation:badgeFloat 5s ease-in-out infinite;
}

.hero-status-badge h4{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  margin-bottom:2px;
}

.hero-status-badge p{
  color:var(--muted);
  font-size:11.5px;
}

.badge-icon-box{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.badge-icon{
  font-size:16px;
  flex-shrink:0;
}

.badge-threat{
  top:6%;
  left:-8%;
  border-color:rgba(255,107,107,0.35);
}

.badge-threat h4,
.badge-threat .badge-icon{
  color:var(--danger);
}

.badge-threat .badge-icon-box{
  background:rgba(255,107,107,0.12);
}

.badge-secure{
  bottom:20%;
  right:-10%;
  border-color:rgba(52,211,153,0.35);
  animation-delay:1.2s;
}

.badge-secure h4,
.badge-secure .badge-icon{
  color:var(--safe);
}

.badge-secure .badge-icon-box{
  background:rgba(52,211,153,0.12);
}

.badge-scan{
  bottom:2%;
  left:0%;
  border-color:rgba(34,211,238,0.35);
  animation-delay:2.4s;
}

.badge-scan h4,
.badge-scan .badge-icon{
  color:var(--green);
}

.badge-scan .badge-icon-box{
  background:rgba(34,211,238,0.12);
}

@keyframes badgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ═══ WHY CHOOSE ═══ */
.why-choose{
  max-width:1200px;
  margin:50px auto 0;
  text-align:center;
}

.why-choose h2{
  font-family:var(--font-body);
  font-size:clamp(24px,2.6vw,34px);
  font-weight:800;
  margin-bottom:34px;
}

.why-choose-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  text-align:left;
}

.why-choose-item{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.wc-icon-box{
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(34,211,238,0.1);
  color:var(--green);
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.wc-icon-box svg{
  width:22px;
  height:22px;
}

.why-choose-item h4{
  font-family:var(--font-body);
  font-size:15.5px;
  font-weight:700;
  margin-bottom:6px;
}

.why-choose-item p{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.6;
}

.home-quote{
  text-align:center;
  padding:40px 30px;
  margin:28px 0 0;
  border-radius:20px;
}

.home-quote p{
  font-family:var(--font-mono);
  font-size:clamp(18px,2vw,24px);
  font-weight:600;
  color:var(--green-bright);
  max-width:600px;
  margin:0 auto;
}

/* ═══ WOW SECTION ═══ */
.wow-section{
  margin:16px 0 0;
  border-radius:24px;
  padding:46px 38px;
}

.wow-header{
  text-align:center;
  margin-bottom:36px;
}

.wow-header h2{
  font-family:var(--font-mono);
  font-size:clamp(20px,2.2vw,30px);
  font-weight:700;
}

.wow-header h2 span{
  color:var(--green);
}

.wow-header p{
  color:var(--muted);
  margin-top:6px;
  font-size:14px;
}

.wow-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.wow-stat{
  text-align:center;
  padding:28px 18px;
  border-radius:18px;
  transition:transform .3s;
}

.wow-ring{
  width:74px;
  height:74px;
  margin:0 auto 14px;
}

.wow-ring svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.wow-ring-fill{
  animation:ringDraw 2s ease forwards;
  stroke-dashoffset:226;
  filter:drop-shadow(0 0 6px rgba(34,211,238,0.6));
}

@keyframes ringDraw{
  to{stroke-dashoffset:0}
}

.wow-stat-number{
  font-family:var(--font-mono);
  font-size:36px;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}

.wow-stat-label{
  color:var(--muted);
  font-size:12.5px;
  font-family:var(--font-mono);
}

.wow-ticker{
  margin-top:30px;
  border-radius:12px;
  overflow:hidden;
  height:42px;
}

.ticker-track{
  display:flex;
  gap:50px;
  white-space:nowrap;
  animation:tickerScroll 30s linear infinite;
  align-items:center;
  height:100%;
  padding:0 18px;
}

.ticker-item{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  flex-shrink:0;
}

.ticker-item.safe{color:var(--safe)}
.ticker-item.warn{color:var(--warning)}
.ticker-item.danger{color:var(--danger)}

@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ═══ FEATURE HERO ═══ */
.feature-hero,
.learn-hero{
  min-height:260px;
  border-radius:24px;
  padding:38px 42px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  gap:30px;
}

.feature-orb-wrap{
  height:220px;
  display:grid;
  place-items:center;
}

.orb-card-box{
  width:120px;
  height:120px;
  border-radius:26px;
  display:grid;
  place-items:center;
  box-shadow:0 0 40px rgba(34,211,238,0.15);
}

/* ═══ FEATURE PAGE HEADER ═══ */
.feature-page-header{
  text-align:center;
  max-width:700px;
  margin:0 auto 28px;
}

.feature-page-header h1{
  font-family:var(--font-body);
  font-size:clamp(28px,3vw,42px);
  font-weight:800;
  letter-spacing:-1px;
  margin-bottom:10px;
}

.feature-page-header p{
  color:var(--muted);
  font-size:15px;
}

/* ═══ DETECTION TABS ═══ */
.detect-tabs{
  display:flex;
  max-width:520px;
  margin:0 auto 32px;
  padding:5px;
  border-radius:14px;
  gap:4px;
}

.detect-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  padding:12px 10px;
  border-radius:10px;
  transition:background .25s,color .25s;
}

.detect-tab.active{
  background:var(--green);
  color:var(--bg);
}

.detect-panel{
  display:none;
}

.detect-panel.active{
  display:block;
  animation:pageFade .4s ease both;
}

.detect-panel-grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:22px;
}

.detect-main{
  border-radius:24px;
  padding:32px;
}

.detect-main h3{
  font-family:var(--font-body);
  font-size:22px;
  font-weight:800;
  margin-bottom:8px;
}

.detect-main p{
  color:var(--muted);
  font-size:14px;
  margin-bottom:18px;
}

.char-count{
  text-align:right;
  color:var(--soft);
  font-size:11.5px;
  margin:-10px 0 14px;
  font-family:var(--font-mono);
}

.detect-side{
  border-radius:24px;
  padding:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
}

/* Scan progress ring */
.scan-ring-wrap{
  position:relative;
  width:150px;
  height:150px;
  display:grid;
  place-items:center;
}

.scan-ring-svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.scan-ring-fill{
  transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1);
}

.scan-ring-label{
  position:absolute;
  font-family:var(--font-body);
  font-size:26px;
  font-weight:800;
  color:var(--text);
}

.scan-status-text{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* How it works */
.how-it-works{
  max-width:1400px;
  margin:36px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.hiw-step{
  border-radius:20px;
  padding:26px;
  text-align:center;
}

.hiw-step span{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(34,211,238,0.12);
  color:var(--green);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
  margin-bottom:14px;
}

.hiw-step h4{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
}

.hiw-step p{
  color:var(--muted);
  font-size:13px;
}

/* Recent scans */
.recent-scans{
  max-width:1400px;
  margin:22px auto 0;
  border-radius:22px;
  padding:26px;
}

.recent-scans h4{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  margin-bottom:16px;
}

.scan-list{
  list-style:none;
  display:grid;
  gap:10px;
}

.scan-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--glass-border);
}

.scan-list-main{
  color:var(--text);
  font-size:13px;
  font-family:var(--font-mono);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.risk-tag{
  flex-shrink:0;
  padding:4px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}

.risk-tag-danger{
  background:rgba(255,107,107,0.14);
  color:var(--danger);
}

.risk-tag-warning{
  background:rgba(255,207,107,0.12);
  color:var(--warning);
}

.risk-tag-safe{
  background:rgba(52,211,153,0.12);
  color:var(--safe);
}

/* Link detection globe */
.mini-globe-wrap{
  position:relative;
  width:160px;
  height:160px;
  display:grid;
  place-items:center;
  perspective:800px;
}

.mini-globe-3d{
  position:relative;
  width:130px;
  height:130px;
  transform-style:preserve-3d;
  animation:globeSpin 16s linear infinite;
}

.mini-globe-3d .globe-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(56,189,248,0.35);
}

.mini-globe-icon{
  position:absolute;
  font-size:32px;
  filter:drop-shadow(0 0 12px rgba(34,211,238,0.6));
}

/* What we check */
.what-we-check{
  max-width:1400px;
  margin:28px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.wwc-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius:18px;
  padding:18px;
}

.wwc-icon{
  font-size:20px;
  flex-shrink:0;
}

.wwc-item h4{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  margin-bottom:4px;
}

.wwc-item p{
  color:var(--muted);
  font-size:12px;
}

.wwc-item-sm{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  color:var(--text);
  font-size:13px;
  margin-top:8px;
}

/* ═══ TOOL CARDS ═══ */
.cybernet-grid{
  max-width:1400px;
  margin:26px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.cybernet-tool-card{
  min-height:420px;
  padding:28px;
  border-radius:24px;
}

.cybernet-tool-card h3{
  font-family:var(--font-mono);
  font-size:17px;
  margin-bottom:10px;
  font-weight:700;
}

.cybernet-tool-card p{
  color:var(--muted);
  line-height:1.7;
  margin-bottom:16px;
  font-size:14px;
}

.feature-icon{
  display:inline-flex;
  padding:8px 14px;
  border-radius:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--green);
  background:rgba(34,211,238,0.08);
  border:1px solid var(--glass-border);
  margin-bottom:16px;
}

/* Inputs */
textarea,
input[type="text"],
input[type="password"],
input[type="email"]{
  width:100%;
  border:1px solid var(--glass-border);
  background:rgba(0,0,0,0.2);
  color:var(--text);
  font-family:var(--font-mono);
  border-radius:12px;
  padding:14px;
  outline:none;
  margin-bottom:14px;
  transition:border-color .25s,box-shadow .25s;
  font-size:13.5px;
}

textarea{
  height:140px;
  resize:none;
}

.feature-textarea{
  min-height:190px;
}

textarea:focus,
input:focus{
  border-color:var(--glass-border-strong);
  box-shadow:0 0 18px rgba(34,211,238,0.12);
}

textarea::placeholder,
input::placeholder{
  color:var(--soft);
  font-family:var(--font-body);
}

/* Upload */
.real-upload-box{
  min-height:230px;
  border:1.5px dashed var(--glass-border-strong);
  border-radius:20px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  color:var(--muted);
  margin-bottom:16px;
  transition:border-color .25s,transform .25s;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.real-upload-box:hover,
.real-upload-box.drag-over{
  border-color:var(--green);
  transform:translateY(-3px);
}

.real-upload-box input{
  display:none;
}

.upload-icon{
  width:60px;
  height:60px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  font-size:28px;
  background:rgba(34,211,238,0.1);
  border:1px solid var(--glass-border);
  color:var(--green);
}

.real-upload-box h3{
  font-family:var(--font-mono);
  font-size:15px;
  margin-bottom:6px;
  color:var(--text);
  font-weight:600;
}

.real-upload-box p{
  color:var(--muted);
  font-size:13px;
}

.upload-preview{
  position:absolute;
  inset:0;
  border-radius:18px;
  overflow:hidden;
}

.upload-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.3;
  margin:0;
}

.upload-preview-label{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--green);
  background:rgba(0,0,0,0.7);
  padding:4px 12px;
  border-radius:999px;
  white-space:nowrap;
}

/* Result box */
.result-box{
  min-height:76px;
  margin-top:14px;
  padding:16px;
  border-radius:14px;
  border:1px solid var(--glass-border);
  background:rgba(0,0,0,0.18);
  color:var(--muted);
  line-height:1.55;
  font-size:13.5px;
  transition:border-color .4s;
  position:relative;
  overflow:hidden;
}

.result-box.result-has-danger{
  border-color:rgba(255,107,107,0.5);
}

.result-box.result-has-warning{
  border-color:rgba(255,207,107,0.4);
}

.result-box.result-has-safe{
  border-color:rgba(34,211,238,0.5);
}

.result-box.result-has-uncertain{
  border-color:rgba(167,139,250,.32)!important;
  box-shadow:0 0 28px rgba(167,139,250,.07);
}

.scan-report{
  animation:reportReveal .4s ease both;
  font-family:var(--font-mono);
}

.report-top-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.risk-badge{
  padding:5px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.risk-danger{
  background:rgba(255,107,107,0.14);
  border:1px solid rgba(255,107,107,0.5);
  color:var(--danger);
}

.risk-warning{
  background:rgba(255,207,107,0.1);
  border:1px solid rgba(255,207,107,0.4);
  color:var(--warning);
}

.risk-safe{
  background:rgba(34,211,238,0.1);
  border:1px solid rgba(34,211,238,0.45);
  color:var(--safe);
}

.risk-uncertain{
  color:#d8ccff;
  background:rgba(167,139,250,.13);
  border:1px solid rgba(167,139,250,.38);
}

.scam-type-tag{
  padding:5px 12px;
  border-radius:999px;
  font-size:11.5px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border);
  color:var(--muted);
}

.score-display{
  margin-left:auto;
  font-size:24px;
  font-weight:700;
  color:var(--text);
}

.score-display span{
  font-size:11px;
  color:var(--muted);
  font-weight:400;
}

.risk-meter-wrap{
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
  margin-bottom:16px;
}

.risk-meter-bar{
  height:100%;
  border-radius:999px;
  width:0;
  transition:width .9s cubic-bezier(.34,1.56,.64,1);
}

.report-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.report-col{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--glass-border);
  border-radius:12px;
  padding:14px;
}

.report-col-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:9px;
  color:var(--text);
}

.col-warn{color:var(--warning)}
.col-safe{color:var(--safe)}

.report-list{
  list-style:none;
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
  font-family:var(--font-body);
}

.report-list li{
  padding-left:14px;
  position:relative;
}

.report-list li::before{
  content:'•';
  position:absolute;
  left:0;
  color:var(--soft);
}

.report-list.safe-list li::before{
  content:'→';
  color:var(--safe);
}

.analysis-confidence{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:13px 0 10px;
  padding:10px 12px;
  border:1px solid var(--glass-border);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}

.analysis-confidence strong{
  color:var(--text);
  font-weight:600;
  text-align:right;
}

.verdict-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 15px;
  padding:12px 13px;
  border-radius:11px;
  background:rgba(34,211,238,.06);
  border:1px solid rgba(34,211,238,.16);
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.verdict-note>span{
  color:var(--green);
  font-family:var(--font-mono);
  font-weight:800;
}

.verdict-note.verdict-uncertain{
  background:rgba(167,139,250,.08);
  border-color:rgba(167,139,250,.25);
  color:#c7bddf;
}

.verdict-note.verdict-uncertain>span{
  color:#b9a4ff;
}

.counter-evidence{
  margin:0 0 15px;
  padding:12px 14px;
  border-radius:11px;
  background:rgba(52,211,153,.055);
  border:1px solid rgba(52,211,153,.18);
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}

.counter-evidence strong{
  display:block;
  margin-bottom:7px;
  color:var(--safe);
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.counter-evidence ul{
  padding-left:18px;
}

.counter-evidence li+li{
  margin-top:5px;
}

.scanning-placeholder{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px;
}

.scanning-placeholder-text{
  color:var(--green);
  font-size:13px;
  font-weight:600;
}

.scan-dots{
  display:flex;
  gap:5px;
}

.scan-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  animation:scanDot 1.1s ease-in-out infinite;
}

.scan-dots span:nth-child(2){
  animation-delay:.2s;
}

.scan-dots span:nth-child(3){
  animation-delay:.4s;
}

/* ═══ AI CHAT ═══ */
.ai-layout{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:.85fr 1.5fr;
  gap:22px;
  align-items:start;
}

.ai-config{
  border-radius:24px;
  padding:28px;
}

.ai-config h4{
  font-family:var(--font-body);
  font-size:16px;
  font-weight:800;
  margin-bottom:8px;
}

.ai-config p{
  color:var(--muted);
  font-size:13px;
  margin-bottom:16px;
  line-height:1.6;
}

.api-warning{
  color:var(--soft);
  font-size:12px;
  display:block;
  margin-top:8px;
}

.ai-status-block{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--glass-border);
}

.ai-status-block h5{
  font-family:var(--font-body);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  margin-bottom:12px;
}

.ai-status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  font-size:13px;
  color:var(--text);
}

.ai-status-row span:first-child{
  color:var(--muted);
}

.status-pill{
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:rgba(255,107,107,0.12);
  color:var(--danger);
}

.status-pill-warn{
  background:rgba(255,207,107,0.12);
  color:var(--warning);
}

.status-pill-safe{
  background:rgba(52,211,153,0.12);
  color:var(--safe);
}

.ai-chat{
  border-radius:24px;
  display:flex;
  flex-direction:column;
  height:600px;
  overflow:hidden;
}

.ai-chat-tabs{
  display:flex;
  border-bottom:1px solid var(--glass-border);
  flex-shrink:0;
}

.chat-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  padding:16px 10px;
  transition:color .25s,background .25s;
}

.chat-tab.active{
  color:var(--green);
  background:rgba(34,211,238,0.05);
  box-shadow:inset 0 -2px 0 var(--green);
}

.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.chat-bubble{
  display:flex;
  max-width:78%;
}

.chat-bubble-ai{
  align-self:flex-start;
}

.chat-bubble-user{
  align-self:flex-end;
  margin-left:auto;
}

.chat-bubble-inner{
  padding:13px 16px;
  border-radius:16px;
  font-size:13.5px;
  line-height:1.65;
}

.chat-bubble-ai .chat-bubble-inner{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--glass-border);
  color:var(--text);
  border-bottom-left-radius:4px;
}

.chat-bubble-user .chat-bubble-inner{
  background:var(--green);
  color:var(--bg);
  font-weight:600;
  border-bottom-right-radius:4px;
}

.chat-input-row{
  display:flex;
  gap:10px;
  padding:16px;
  border-top:1px solid var(--glass-border);
  flex-shrink:0;
}

.chat-input-row input{
  margin-bottom:0;
  flex:1;
}

.send-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:none;
  background:var(--green);
  color:var(--bg);
  font-size:16px;
  flex-shrink:0;
  transition:transform .2s ease;
}

.send-btn:hover{
  transform:scale(1.06);
}

.chat-upload-row{
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  color:var(--muted);
  font-size:13px;
}

.chat-upload-row input{
  display:none;
}

.upload-icon-sm{
  width:30px;
  height:30px;
  border-radius:8px;
  background:rgba(34,211,238,0.1);
  color:var(--green);
  display:grid;
  place-items:center;
  font-size:14px;
}

/* ═══ LEARN ROADMAP ═══ */
.learn-search-card{
  border-radius:20px;
  padding:22px;
}

.learn-search-card label{
  display:block;
  font-family:var(--font-mono);
  font-weight:600;
  margin-bottom:10px;
  color:var(--text);
  font-size:13px;
}

.learn-search-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}

.learn-search-row input{
  margin-bottom:0;
}

.learn-search-result{
  margin-top:14px;
  color:var(--muted);
  line-height:1.6;
  font-size:13.5px;
}

.search-result-item{
  padding:13px;
  border-radius:14px;
  border:1px solid var(--glass-border);
  background:rgba(34,211,238,0.04);
  margin-top:10px;
}

.search-result-item strong{
  color:var(--text);
}

.search-result-item button{
  margin-top:9px;
}

.roadmap{
  max-width:880px;
  margin:36px auto 0;
  position:relative;
  padding-left:34px;
}

.roadmap::before{
  content:'';
  position:absolute;
  left:12px;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(
    180deg,
    var(--green-dim),
    transparent
  );
}

.rm-module{
  margin-bottom:44px;
}

.rm-module-head{
  padding:16px 0 14px;
}

.rm-module-head span{
  color:var(--green);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:1px;
}

.rm-module-head h2{
  font-family:var(--font-mono);
  font-size:clamp(19px,2vw,26px);
  font-weight:700;
  margin-top:4px;
}

.rm-nodes{
  display:grid;
  gap:12px;
}

.rm-node{
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .3s,transform .3s;
}

.rm-node:hover{
  transform:translateX(3px);
  border-color:var(--glass-border-strong);
}

.rm-node.expanded{
  border-color:rgba(34,211,238,0.4);
}

.rm-node-info{
  padding:18px 22px;
}

.rm-node-info h3{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
}

.rm-node-info p{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.rm-node-expand{
  max-height:0;
  overflow:hidden;
  transition:
    max-height .5s cubic-bezier(.34,1.56,.64,1),
    padding .3s;
  padding:0 22px;
}

.rm-node.expanded .rm-node-expand{
  max-height:600px;
  padding:0 22px 22px;
}

.rm-lesson,
.rm-example,
.rm-tip{
  padding:13px;
  border-radius:12px;
  margin-top:10px;
  line-height:1.65;
  font-size:13.5px;
  color:var(--text);
}

.rm-lesson{
  background:rgba(34,211,238,0.04);
  border:1px solid var(--glass-border);
}

.rm-example{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
}

.rm-tip{
  background:rgba(34,211,238,0.07);
  border:1px solid rgba(34,211,238,0.2);
}

.rm-lesson strong,
.rm-example strong,
.rm-tip strong{
  color:var(--green);
}

/* ═══ PRICING ═══ */
.section-head{
  text-align:center;
  max-width:900px;
  margin:0 auto 34px;
}

.section-head h1{
  font-family:var(--font-mono);
  font-size:clamp(28px,2.8vw,44px);
  letter-spacing:-0.5px;
}

.section-head p{
  margin:0 auto;
  font-size:15px;
  color:var(--muted);
}

.pricing-toggle-wrap{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
}

.pricing-toggle{
  display:inline-flex;
  position:relative;
  padding:4px;
  border-radius:999px;
  gap:2px;
}

.toggle-option{
  position:relative;
  z-index:2;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  padding:9px 20px;
  border-radius:999px;
  transition:color .3s ease;
  width:100px;
  text-align:center;
}

.toggle-option.active{
  color:var(--bg);
}

.save-tag{
  background:rgba(52,211,153,0.12);
  color:var(--safe);
  font-size:11px;
  font-family:var(--font-mono);
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(52,211,153,0.3);
  white-space:nowrap;
}

.toggle-thumb{
  position:absolute;
  top:4px;
  left:4px;
  height:calc(100% - 8px);
  width:100px;
  background:var(--green);
  border-radius:999px;
  z-index:1;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
  box-shadow:0 0 20px rgba(34,211,238,0.4);
}

.pricing-toggle[data-cycle="yearly"] .toggle-thumb{
  transform:translateX(100px);
}

.pricing-grid{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.price-card{
  border-radius:22px;
  padding:26px;
  transition:transform .3s;
}

.price-card h3{
  font-family:var(--font-mono);
  color:var(--muted);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
}

.price-card h2{
  font-family:var(--font-mono);
  font-size:34px;
  margin-bottom:10px;
}

.price-card h2 span{
  font-size:15px;
  color:var(--muted);
}

.price-card p{
  color:var(--muted);
  line-height:1.6;
  margin-bottom:16px;
  font-size:14px;
}

.price-card ul{
  list-style:none;
  display:grid;
  gap:11px;
  margin-bottom:22px;
  color:var(--text);
  font-size:13.5px;
}

.price-card li::before{
  content:"✓ ";
  color:var(--green);
}

.featured-price{
  position:relative;
  border-color:rgba(34,211,238,0.4);
  box-shadow:0 0 50px rgba(34,211,238,0.1);
}

.popular-ribbon{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:var(--bg);
  font-family:var(--font-body);
  font-size:11px;
  font-weight:800;
  padding:6px 16px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(34,211,238,0.4);
}

/* ═══ ABOUT ═══ */
.about-top{
  text-align:center;
  margin-bottom:32px;
}

.fetch-panel{
  max-width:640px;
  margin:0 auto 40px;
  border-radius:16px;
}

.fetch-body{
  padding:22px;
  font-family:var(--font-mono);
  font-size:13.5px;
  display:grid;
  gap:11px;
}

.fetch-line{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--text);
}

.fetch-key{
  color:var(--muted);
}

.safe-text{
  color:var(--safe);
}

.about-grid{
  max-width:1140px;
  margin:0 auto 32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.about-block{
  padding:26px;
  border-radius:20px;
  transition:transform .3s;
}

.about-block h2{
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--green);
}

.about-block p{
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}

.about-values{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.about-value{
  text-align:center;
  padding:26px 18px;
  border-radius:18px;
  transition:transform .3s;
}

.av-icon{
  font-size:20px;
  color:var(--green);
  margin-bottom:12px;
}

.about-value h3{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  margin-bottom:8px;
}

.about-value p{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}

/* ═══ AUTH MODAL ═══ */
.modal{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.modal.show{
  display:flex;
}

.modal-card{
  width:min(420px,100%);
  border-radius:22px;
  padding:30px;
  position:relative;
  animation:modalSlide .3s ease both;
}

.close-modal{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.02);
  border-radius:50%;
  color:var(--text);
  font-size:20px;
}

.auth-logo{
  text-align:center;
  margin-bottom:18px;
}

.auth-logo .brand-mark{
  font-size:34px;
}

.auth-tabs{
  display:flex;
  gap:0;
  margin-bottom:22px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--glass-border);
}

.auth-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  padding:11px;
}

.auth-tab.active{
  background:rgba(34,211,238,0.1);
  color:var(--green);
}

.auth-form{
  display:none;
}

.active-auth-form{
  display:block;
}

.auth-form label{
  display:block;
  margin-bottom:7px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
}

.modal-card small{
  color:var(--soft);
  display:block;
  text-align:center;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11px;
}

.social-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:var(--soft);
  font-size:12px;
}

.social-divider::before,
.social-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--glass-border);
}

.social-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.social-btn{
  padding:11px;
  border-radius:12px;
  color:var(--text);
  font-size:13px;
  font-weight:600;
}

.social-btn:hover{
  border-color:var(--glass-border-strong);
}

.safe{color:var(--safe)}
.warning{color:var(--warning)}
.danger{color:var(--danger)}

/* Footer */
footer{
  width:min(1500px,calc(100% - 48px));
  margin:26px auto 22px;
  text-align:center;
  color:var(--soft);
  font-family:var(--font-mono);
  font-size:12.5px;
}

/* ═══ LOADER ═══ */
.loader-screen{
  position:fixed;
  inset:0;
  z-index:500;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity .5s,visibility .5s;
  gap:26px;
}

.loader-screen.hide{
  opacity:0;
  visibility:hidden;
}

.loader-term{
  width:320px;
}

.loader-dots::after{
  content:'';
  animation:loaderDots 1.2s steps(4) infinite;
}

.loading-bar{
  width:280px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
  position:relative;
}

.loading-progress{
  width:0;
  height:100%;
  background:var(--green);
  border-radius:inherit;
  animation:loadProgress 1.5s ease forwards;
  box-shadow:0 0 12px var(--green);
}

/* ═══ ANIMATIONS ═══ */
@keyframes topBarShift{
  0%{background-position:0% 0}
  100%{background-position:200% 0}
}

@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-40px) scale(1.08)}
  66%{transform:translate(-20px,20px) scale(0.95)}
}

@keyframes loadProgress{
  0%{width:0}
  100%{width:100%}
}

@keyframes loaderDots{
  to{content:'....'}
}

@keyframes pageFade{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes scanDot{
  0%,100%{
    opacity:.25;
    transform:scale(.75);
  }
  50%{
    opacity:1;
    transform:scale(1.2);
  }
}

@keyframes reportReveal{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes modalSlide{
  from{
    opacity:0;
    transform:scale(.96) translateY(10px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

@keyframes btnSpin{
  to{transform:rotate(360deg)}
}

@keyframes cursorBlink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

@keyframes termLineIn{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Cursor glow */
.cursor-glow{
  position:absolute;
  width:460px;
  height:460px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(34,211,238,0.14),
    transparent 70%
  );
  pointer-events:none;
  transform:translate(-50%,-50%);
  left:0;
  top:0;
  opacity:0;
  transition:opacity .5s ease;
  z-index:0;
}

.hero.glow-active .cursor-glow{
  opacity:1;
}

/* Performance */
button,
a,
input,
textarea,
label{
  touch-action:manipulation;
}

img{
  max-width:100%;
  height:auto;
}

.why-choose,
.wow-section,
.how-it-works,
.what-we-check,
.recent-scans,
.pricing-grid,
.about-values,
.roadmap{
  content-visibility:auto;
  contain-intrinsic-size:1px 700px;
}

.detect-panel:not(.active),
.page:not(.active-page){
  content-visibility:hidden;
}

/* ═══════════════════════════════════════════════════════
   GHOSTSCAN
   ═══════════════════════════════════════════════════════ */

:root{
  --ghost:#45f579;
  --ghost-bright:#b8ffcb;
  --ghost-dark:#07351f;
  --ghost-soft:rgba(69,245,121,.12);
  --ghost-border:rgba(69,245,121,.28);
  --ghost-panel:#07111d;
  --ghost-panel-2:#0a1725;
}

.ghost-page{
  padding:28px 0 40px;
}

.ghost-app{
  position:relative;
  min-height:720px;
  border:1px solid rgba(77,119,151,.18);
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 72% 48%,
      rgba(69,245,121,.1),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #06101c 0%,
      #040b14 60%,
      #06101c 100%
    );
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}

.ghost-app::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(
      rgba(69,245,121,.026) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(69,245,121,.026) 1px,
      transparent 1px
    );
  background-size:45px 45px;
  mask-image:radial-gradient(
    circle at 70% 45%,
    black,
    transparent 64%
  );
  opacity:.58;
}

.ghost-hidden{
  display:none!important;
}

.ghost-landing{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  min-height:720px;
  align-items:center;
  padding:58px 48px;
  gap:42px;
}

.ghost-hero-copy{
  position:relative;
  z-index:4;
  max-width:665px;
}

.ghost-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  margin-bottom:20px;
}

.ghost-kicker span{
  padding:5px 9px;
  border:1px solid rgba(69,245,121,.55);
  border-radius:7px;
  background:rgba(69,245,121,.08);
  font-size:10px;
  letter-spacing:.07em;
}

.ghost-hero-copy h1{
  font-family:var(--font-body);
  font-size:clamp(43px,4.1vw,68px);
  line-height:1.03;
  letter-spacing:-2.5px;
  margin-bottom:22px;
  font-weight:800;
}

.ghost-hero-copy h1 strong{
  color:var(--text);
  text-shadow:0 0 35px rgba(69,245,121,.15);
}

.ghost-hero-copy>p{
  color:#b6c2d1;
  max-width:630px;
  line-height:1.75;
  font-size:16px;
}

.ghost-input-shell{
  margin-top:30px;
  padding:8px;
  border:1px solid rgba(97,141,174,.33);
  border-radius:15px;
  background:rgba(6,16,28,.86);
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    0 0 30px rgba(69,245,121,.06);
}

.ghost-input-row{
  display:flex;
  gap:9px;
}

.ghost-input-row input{
  flex:1;
  min-width:0;
  height:51px;
  border:none;
  background:transparent;
  color:var(--text);
  padding:0 14px;
  font-size:15px;
  outline:none;
  margin:0;
  box-shadow:none;
}

.ghost-input-row input::placeholder{
  color:#718399;
}

.ghost-primary-btn{
  height:51px;
  border:none;
  border-radius:10px;
  padding:0 22px;
  background:linear-gradient(
    120deg,
    var(--ghost),
    #71ffa0
  );
  color:#032114;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:800;
  box-shadow:0 0 24px rgba(69,245,121,.26);
  transition:.2s transform,.2s box-shadow;
  white-space:nowrap;
}

.ghost-primary-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 35px rgba(69,245,121,.4);
}

.ghost-primary-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

.ghost-upload-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px 3px;
  color:#61768b;
  font-size:11px;
}

.ghost-upload-btn{
  border:none;
  background:transparent;
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  padding:3px 0;
}

.ghost-upload-row small{
  margin-left:auto;
  color:#566a7e;
}

.ghost-helper{
  margin-top:13px!important;
  font-size:12.5px!important;
  color:#7f91a5!important;
}

.ghost-feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
  margin-top:34px;
}

.ghost-feature-strip>div{
  min-height:80px;
  padding:17px 15px;
  background:linear-gradient(
    145deg,
    rgba(12,29,45,.9),
    rgba(7,18,30,.78)
  );
  border:1px solid rgba(77,119,151,.17);
  display:grid;
  grid-template-columns:28px 1fr;
  grid-template-rows:auto auto;
  column-gap:8px;
  align-content:center;
}

.ghost-feature-strip>div:first-child{
  border-radius:12px 0 0 12px;
}

.ghost-feature-strip>div:last-child{
  border-radius:0 12px 12px 0;
}

.ghost-feature-strip span{
  grid-row:1/3;
  color:var(--ghost);
  font-size:20px;
  align-self:center;
}

.ghost-feature-strip strong{
  font-size:12px;
}

.ghost-feature-strip small{
  color:#708398;
  font-size:10px;
  margin-top:4px;
}

.ghost-service-line{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  color:#7890a5;
  font-family:var(--font-mono);
  font-size:11px;
}

.ghost-service-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffcf6b;
  box-shadow:0 0 10px #ffcf6b;
}

.ghost-service-line.online .ghost-service-dot{
  background:var(--ghost);
  box-shadow:0 0 11px var(--ghost);
}

.ghost-service-line.offline .ghost-service-dot{
  background:#ff6b6b;
  box-shadow:0 0 11px #ff6b6b;
}

.ghost-hero-art{
  position:relative;
  min-height:520px;
  display:grid;
  place-items:center;
  perspective:1100px;
}

.ghost-window-stack,
.ghost-window-main{
  position:absolute;
  width:min(470px,86%);
  height:340px;
  border:1px solid rgba(69,245,121,.36);
  border-radius:17px;
  background:linear-gradient(
    135deg,
    rgba(17,46,62,.72),
    rgba(5,17,28,.78)
  );
  box-shadow:0 25px 65px rgba(0,0,0,.34);
}

.stack-back{
  transform:translate(74px,-34px) rotateY(-7deg);
  opacity:.42;
}

.stack-mid{
  transform:translate(36px,-17px) rotateY(-4deg);
  opacity:.66;
}

.ghost-window-main{
  position:relative;
  overflow:hidden;
  transform:rotateY(-4deg);
  box-shadow:
    0 30px 75px rgba(0,0,0,.42),
    0 0 55px rgba(69,245,121,.13);
}

.ghost-window-main::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at center,
      rgba(69,245,121,.18),
      transparent 48%
    ),
    linear-gradient(
      90deg,
      transparent 49.6%,
      rgba(69,245,121,.15) 50%,
      transparent 50.4%
    ),
    linear-gradient(
      transparent 49.6%,
      rgba(69,245,121,.15) 50%,
      transparent 50.4%
    );
  background-size:auto,48px 48px,48px 48px;
  opacity:.58;
}

.ghost-window-bar{
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 17px;
  border-bottom:1px solid rgba(69,245,121,.18);
  background:rgba(4,13,22,.64);
}

.ghost-window-bar span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#57ff8d;
  box-shadow:0 0 10px rgba(87,255,141,.65);
}

.ghost-mascot{
  position:absolute;
  left:50%;
  top:51%;
  width:176px;
  transform:translate(-50%,-50%);
  animation:ghostFloat 4s ease-in-out infinite;
}

.ghost-orb-ring{
  position:absolute;
  left:50%;
  top:53%;
  border-radius:50%;
  border:1px solid rgba(69,245,121,.25);
  transform:translate(-50%,-50%);
}

.ring-one{
  width:265px;
  height:265px;
  animation:ghostRing 5s ease-out infinite;
}

.ring-two{
  width:190px;
  height:190px;
  animation:ghostRing 5s 2.5s ease-out infinite;
}

.ghost-scan-beam{
  position:absolute;
  left:9%;
  right:9%;
  height:2px;
  top:45%;
  background:linear-gradient(
    90deg,
    transparent,
    var(--ghost),
    transparent
  );
  box-shadow:0 0 18px var(--ghost);
  animation:ghostBeam 3.2s ease-in-out infinite;
}

.ghost-art-label{
  position:absolute;
  right:16px;
  bottom:14px;
  padding:5px 8px;
  border:1px solid rgba(69,245,121,.34);
  border-radius:6px;
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.08em;
}

.ghost-art-warning{
  position:absolute;
  left:2%;
  top:11%;
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  border:1px solid rgba(112,171,198,.42);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  color:#8bb9cd;
  font-family:var(--font-mono);
  font-size:16px;
  padding-top:12px;
  filter:drop-shadow(0 0 18px rgba(69,245,121,.18));
}

@keyframes ghostFloat{
  0%,100%{
    transform:translate(-50%,-50%) translateY(0);
  }
  50%{
    transform:translate(-50%,-50%) translateY(-12px);
  }
}

@keyframes ghostRing{
  0%{
    opacity:.85;
    transform:translate(-50%,-50%) scale(.65);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.3);
  }
}

@keyframes ghostBeam{
  0%,100%{
    top:30%;
    opacity:.25;
  }
  50%{
    top:77%;
    opacity:1;
  }
}

/* Workspace */
.ghost-workspace{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:720px;
  background:#050d17;
}

.ghost-side-panel{
  display:flex;
  flex-direction:column;
  padding:24px 14px;
  border-right:1px solid rgba(89,128,158,.17);
  background:linear-gradient(180deg,#06111d,#040b13);
}

.ghost-back-home,
.ghost-back-results{
  border:none;
  background:transparent;
  color:#a0b0c1;
  font-family:var(--font-mono);
  font-size:11px;
  text-align:left;
  padding:6px 4px;
}

.ghost-side-brand{
  display:flex;
  align-items:center;
  gap:9px;
  margin:24px 7px 28px;
  font-weight:800;
}

.ghost-side-brand>div{
  font-size:16px;
}

.ghost-side-brand small{
  display:block;
  color:var(--ghost);
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ghost-side-menu{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ghost-side-menu button{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:43px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#8193a6;
  padding:0 12px;
  font-size:12px;
  text-align:left;
}

.ghost-side-menu button:hover{
  color:var(--text);
  background:rgba(255,255,255,.025);
}

.ghost-side-menu button.active{
  color:var(--ghost);
  border-color:rgba(69,245,121,.16);
  background:rgba(69,245,121,.075);
}

.ghost-side-menu em{
  margin-left:auto;
  color:var(--ghost);
  font-size:7px;
  font-style:normal;
  border:1px solid rgba(69,245,121,.35);
  padding:2px 4px;
  border-radius:5px;
}

.ghost-private-note{
  margin-top:auto;
  display:flex;
  gap:9px;
  padding:12px;
  border:1px solid rgba(69,245,121,.14);
  border-radius:10px;
  background:rgba(69,245,121,.045);
  color:#6e8496;
}

.ghost-private-note>span{
  color:var(--ghost);
}

.ghost-private-note p{
  font-size:9.5px;
  line-height:1.5;
}

.ghost-private-note strong{
  display:block;
  color:#9fb2c1;
  font-size:10px;
}

.ghost-main-panel{
  min-width:0;
  padding:30px;
  background:
    radial-gradient(
      circle at 45% 5%,
      rgba(69,245,121,.045),
      transparent 30%
    ),
    #050d17;
}

.ghost-topbar,
.ghost-results-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.ghost-eyebrow{
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
}

.ghost-topbar h2,
.ghost-results-head h2{
  font-size:25px;
  margin:5px 0 5px;
}

.ghost-topbar p,
.ghost-results-head p{
  color:#71869a;
  font-size:12px;
}

.ghost-cancel-btn,
.ghost-clear-history{
  border:1px solid rgba(255,107,107,.28);
  border-radius:8px;
  background:rgba(255,107,107,.07);
  color:#ff8b8b;
  padding:8px 13px;
  font-family:var(--font-mono);
  font-size:10px;
}

.ghost-target-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:20px 0;
  padding:13px 15px;
  border:1px solid rgba(94,136,167,.22);
  border-radius:10px;
  background:rgba(10,24,38,.78);
  color:#c8d2dd;
  font-family:var(--font-mono);
  font-size:11px;
  overflow:hidden;
}

.ghost-target-bar span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ghost-target-bar button{
  border:none;
  background:transparent;
  color:#8195a7;
}

.ghost-stepper{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin:26px 8px 28px;
}

.ghost-step{
  position:relative;
  text-align:center;
  color:#607487;
}

.ghost-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:58%;
  right:-42%;
  top:17px;
  height:1px;
  background:#203448;
}

.ghost-step span{
  position:relative;
  z-index:2;
  width:35px;
  height:35px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #2f465a;
  background:#081522;
  color:#71879a;
  font-family:var(--font-mono);
  font-size:10px;
}

.ghost-step small{
  font-size:9.5px;
}

.ghost-step.active span,
.ghost-step.done span{
  border-color:var(--ghost);
  color:var(--ghost);
  box-shadow:0 0 18px rgba(69,245,121,.18);
}

.ghost-step.done span{
  background:var(--ghost);
  color:#032114;
}

.ghost-step.done:not(:last-child)::after{
  background:linear-gradient(
    90deg,
    var(--ghost),
    rgba(69,245,121,.28)
  );
}

.ghost-step.active small,
.ghost-step.done small{
  color:#adc0cd;
}

.ghost-live-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(250px,.65fr);
  gap:16px;
}

.ghost-browser-preview,
.ghost-live-log,
.ghost-score-card,
.ghost-findings-card,
.ghost-actions-card,
.ghost-limitations-card,
.ghost-replay-card,
.ghost-screenshot-card,
.ghost-tech-card{
  border:1px solid rgba(93,137,168,.2);
  border-radius:12px;
  background:linear-gradient(
    145deg,
    rgba(10,25,40,.92),
    rgba(6,17,29,.92)
  );
  box-shadow:0 14px 38px rgba(0,0,0,.2);
}

.ghost-browser-preview{
  overflow:hidden;
  min-height:370px;
}

.ghost-preview-chrome{
  display:flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 11px;
  border-bottom:1px solid rgba(88,129,159,.19);
  background:#081522;
}

.ghost-preview-chrome>span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#456071;
}

.ghost-preview-chrome>div{
  margin-left:7px;
  flex:1;
  border:1px solid rgba(88,129,159,.15);
  border-radius:5px;
  background:#06101b;
  padding:5px 8px;
  color:#607589;
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ghost-preview-stage{
  position:relative;
  min-height:332px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(145deg,#0c1d2f,#081420);
}

.ghost-preview-stage img{
  width:100%;
  height:100%;
  min-height:332px;
  object-fit:contain;
  background:#0a1520;
}

.ghost-preview-loader{
  text-align:center;
  color:#99aebd;
}

.ghost-preview-loader strong,
.ghost-preview-loader small{
  display:block;
}

.ghost-preview-loader strong{
  margin-top:14px;
  font-size:13px;
}

.ghost-preview-loader small{
  margin-top:6px;
  color:#63788b;
  font-size:9px;
}

.ghost-radar{
  width:72px;
  height:72px;
  margin:auto;
  border-radius:50%;
  border:1px solid rgba(69,245,121,.35);
  background:conic-gradient(
    from 0deg,
    rgba(69,245,121,.36),
    transparent 24%
  );
  animation:ghostRadar 1.6s linear infinite;
  box-shadow:0 0 22px rgba(69,245,121,.09);
}

@keyframes ghostRadar{
  to{transform:rotate(360deg)}
}

.ghost-live-log{
  min-height:370px;
  padding:17px;
}

.ghost-log-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:12px;
  border-bottom:1px solid rgba(90,131,161,.15);
}

.ghost-log-head h3{
  font-size:13px;
}

.ghost-log-head span{
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-log-list{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-top:14px;
  max-height:305px;
  overflow:auto;
}

.ghost-log-item{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:9px;
  font-family:var(--font-mono);
  font-size:8.7px;
  line-height:1.45;
  color:#8fa1b0;
}

.ghost-log-item time{
  color:#52687a;
}

.ghost-log-item.warn p{
  color:#ffcf6b;
}

.ghost-log-item.danger p{
  color:#ff8585;
}

.ghost-log-item.safe p{
  color:#72f99a;
}

.ghost-progress-foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  color:#607487;
  font-size:9.5px;
}

.ghost-progress-foot span{
  color:var(--ghost);
}

/* Results */
.ghost-result-actions{
  display:flex;
  gap:8px;
}

.ghost-result-actions button{
  border:1px solid rgba(101,144,176,.24);
  border-radius:8px;
  background:#081522;
  color:#9eb0bf;
  padding:8px 12px;
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-result-alert{
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:13px;
  margin-top:20px;
  padding:16px;
  border:1px solid rgba(167,139,250,.28);
  border-radius:11px;
  background:linear-gradient(
    90deg,
    rgba(167,139,250,.11),
    rgba(26,21,45,.24)
  );
  color:#cfcae7;
}

.ghost-result-alert.high,
.ghost-result-alert.critical{
  border-color:rgba(255,107,107,.45);
  background:linear-gradient(
    90deg,
    rgba(255,107,107,.14),
    rgba(48,13,18,.28)
  );
  color:#ffd0d0;
}

.ghost-result-alert.medium{
  border-color:rgba(255,207,107,.42);
  background:linear-gradient(
    90deg,
    rgba(255,207,107,.12),
    rgba(40,31,11,.25)
  );
  color:#ffe7a9;
}

.ghost-result-alert.low{
  border-color:rgba(69,245,121,.31);
  background:linear-gradient(
    90deg,
    rgba(69,245,121,.09),
    rgba(8,39,23,.2)
  );
  color:#c7ffd7;
}

.ghost-alert-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:currentColor;
  color:#06101b;
  font-size:22px;
  font-weight:900;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  padding-top:8px;
}

.ghost-result-alert h3{
  font-size:17px;
  margin-bottom:3px;
}

.ghost-result-alert p{
  font-size:11px;
  line-height:1.5;
  color:inherit;
  opacity:.82;
}

.ghost-result-alert>span{
  font-family:var(--font-mono);
  font-size:8px;
  border:1px solid currentColor;
  border-radius:6px;
  padding:6px 8px;
  white-space:nowrap;
}

.ghost-result-tabs{
  display:flex;
  gap:5px;
  margin:18px 0 14px;
  padding:4px;
  border:1px solid rgba(95,137,168,.2);
  border-radius:10px;
  background:rgba(8,21,34,.72);
  width:max-content;
  max-width:100%;
  overflow:auto;
}

.ghost-result-tabs button,
.ghost-screen-tabs button{
  border:none;
  border-radius:7px;
  background:transparent;
  color:#71879a;
  padding:8px 13px;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.ghost-result-tabs button.active,
.ghost-screen-tabs button.active{
  background:rgba(69,245,121,.1);
  color:var(--ghost);
}

.ghost-result-tab{
  display:none;
}

.ghost-result-tab.active{
  display:block;
  animation:pageFade .3s ease;
}

.ghost-overview-grid{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:14px;
}

.ghost-score-card,
.ghost-findings-card,
.ghost-actions-card,
.ghost-limitations-card,
.ghost-replay-card,
.ghost-screenshot-card,
.ghost-tech-card{
  padding:18px;
}

.ghost-score-card h3,
.ghost-findings-card h3,
.ghost-actions-card h3,
.ghost-limitations-card h3,
.ghost-tech-card h3{
  font-size:12px;
  margin-bottom:14px;
}

.ghost-score-ring{
  position:relative;
  width:130px;
  height:130px;
  margin:8px auto 12px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:conic-gradient(
    #a78bfa var(--score,0%),
    #15283a 0
  );
  box-shadow:0 0 24px rgba(167,139,250,.12);
}

.ghost-score-ring::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:#07121f;
}

.ghost-score-ring span,
.ghost-score-ring small{
  position:relative;
  z-index:2;
}

.ghost-score-ring span{
  font-size:37px;
  font-weight:800;
}

.ghost-score-ring small{
  position:absolute;
  top:78px;
  font-size:9px;
  color:#74889a;
}

.ghost-score-card>p{
  text-align:center;
  color:#8fa1b0;
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-findings-list,
.ghost-actions-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ghost-finding,
.ghost-action{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:8px;
  color:#93a5b4;
  font-size:10.5px;
  line-height:1.55;
}

.ghost-finding span,
.ghost-action span{
  color:var(--ghost);
  font-weight:800;
}

.ghost-finding.danger span{
  color:#ff6b6b;
}

.ghost-finding.warn span{
  color:#ffcf6b;
}

.ghost-finding strong,
.ghost-action strong{
  display:block;
  color:#d8e1e8;
  font-size:10.5px;
}

.ghost-actions-card,
.ghost-limitations-card{
  margin-top:14px;
}

.ghost-limitations-card{
  border-color:rgba(167,139,250,.22);
  background:rgba(167,139,250,.045);
}

.ghost-limitations-card ul{
  padding-left:18px;
  color:#a9a0c3;
  font-size:10.5px;
  line-height:1.7;
}

.ghost-section-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  margin-bottom:16px;
}

.ghost-section-title h3{
  font-size:15px;
}

.ghost-section-title p{
  color:#71869a;
  font-size:10px;
  margin-top:4px;
}

.ghost-section-title>span{
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-replay-track{
  display:flex;
  align-items:stretch;
  gap:28px;
  overflow-x:auto;
  padding:4px 3px 12px;
}

.ghost-replay-node{
  position:relative;
  flex:0 0 155px;
  min-height:155px;
  padding:13px;
  border:1px solid rgba(92,134,165,.2);
  border-radius:9px;
  background:#081522;
}

.ghost-replay-node:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-22px;
  top:50%;
  color:#8ba0af;
}

.ghost-replay-node small{
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:8px;
}

.ghost-replay-node strong{
  display:block;
  margin:11px 0 7px;
  font-size:10px;
  overflow-wrap:anywhere;
}

.ghost-replay-node p{
  color:#6e8395;
  font-size:8.5px;
  line-height:1.5;
}

.ghost-replay-node img{
  width:100%;
  height:74px;
  object-fit:cover;
  border-radius:5px;
  margin-top:8px;
  background:#0b1926;
}

.ghost-screenshot-card{
  margin-top:14px;
}

.ghost-screen-tabs{
  display:flex;
  gap:4px;
  margin-bottom:11px;
}

.ghost-screen-frame{
  position:relative;
  min-height:380px;
  display:grid;
  place-items:center;
  border:1px solid rgba(91,133,164,.17);
  border-radius:9px;
  background:#040b12;
  overflow:hidden;
}

.ghost-screen-frame img{
  display:block;
  max-width:100%;
  max-height:650px;
  object-fit:contain;
}

.ghost-no-shot{
  position:absolute;
  color:#64798b;
  font-family:var(--font-mono);
  font-size:10px;
}

.ghost-tech-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.ghost-tech-card ol,
.ghost-tech-card ul{
  padding-left:18px;
  color:#8fa2b1;
  font-size:9.5px;
  line-height:1.75;
}

.ghost-tech-card li{
  overflow-wrap:anywhere;
}

.ghost-tech-card li::marker{
  color:var(--ghost);
}

.ghost-tech-card dl{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px 12px;
  font-size:9.5px;
}

.ghost-tech-card dt{
  color:#5f7487;
}

.ghost-tech-card dd{
  color:#b0bfca;
  overflow-wrap:anywhere;
}

.ghost-form-item{
  padding:10px 0;
  border-bottom:1px solid rgba(91,133,164,.12);
  font-size:9.5px;
  color:#8fa2b1;
}

.ghost-form-item:last-child{
  border-bottom:none;
}

.ghost-form-item strong{
  display:block;
  color:#d3dce3;
  margin-bottom:4px;
}

.ghost-reputation-badge{
  display:inline-flex;
  padding:5px 8px;
  border-radius:6px;
  background:rgba(69,245,121,.08);
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-reputation-badge.listed{
  background:rgba(255,107,107,.11);
  color:#ff8585;
}

.ghost-tech-card p{
  color:#7b8fa0;
  font-size:9.5px;
  line-height:1.65;
  margin-top:9px;
}

.ghost-history-list{
  display:grid;
  gap:10px;
  margin-top:20px;
}

.ghost-history-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:15px;
  align-items:center;
  padding:14px 16px;
  border:1px solid rgba(92,134,165,.18);
  border-radius:10px;
  background:#081522;
}

.ghost-history-item strong{
  display:block;
  font-size:11px;
  overflow-wrap:anywhere;
}

.ghost-history-item small{
  display:block;
  color:#657a8d;
  margin-top:5px;
  font-size:9px;
}

.ghost-history-score{
  font-family:var(--font-mono);
  font-size:16px;
  color:var(--ghost);
}

.ghost-history-empty{
  padding:60px 20px;
  text-align:center;
  color:#63788a;
  border:1px dashed rgba(92,134,165,.22);
  border-radius:12px;
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1250px){
  .nav-tabs{
    gap:18px;
  }

  .ghost-landing{
    padding:46px 32px;
  }

  .ghost-feature-strip{
    grid-template-columns:1fr 1fr;
  }

  .ghost-feature-strip>div:first-child{
    border-radius:12px 0 0 0;
  }

  .ghost-feature-strip>div:nth-child(2){
    border-radius:0 12px 0 0;
  }

  .ghost-feature-strip>div:nth-child(3){
    border-radius:0 0 0 12px;
  }

  .ghost-feature-strip>div:last-child{
    border-radius:0 0 12px 0;
  }
}

@media(max-width:1150px){
  .hero,
  .feature-hero,
  .learn-hero{
    grid-template-columns:1fr;
  }

  .hero-visual{
    min-height:auto;
    margin-top:30px;
  }

  .cybernet-grid,
  .pricing-grid,
  .about-grid{
    grid-template-columns:1fr;
  }

  .about-values{
    grid-template-columns:1fr 1fr;
  }

  .why-choose-grid{
    grid-template-columns:1fr 1fr;
  }

  .report-body{
    grid-template-columns:1fr;
  }

  .wow-stats{
    grid-template-columns:1fr;
  }

  .globe-shield-wrap{
    width:360px;
    height:360px;
  }

  .globe-3d-pos{
    width:300px;
    height:300px;
  }
}

@media(max-width:1040px){
  .ghost-landing{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .ghost-hero-art{
    min-height:430px;
  }

  .ghost-workspace{
    grid-template-columns:1fr;
  }

  .ghost-side-panel{
    display:none;
  }

  .ghost-main-panel{
    padding:24px;
  }

  .ghost-tech-grid{
    grid-template-columns:1fr;
  }

  .ghost-live-grid{
    grid-template-columns:1fr;
  }

  .ghost-live-log{
    min-height:auto;
  }

  .ghost-log-list{
    max-height:210px;
  }
}

@media(max-width:920px){
  .navbar{
    width:calc(100% - 26px);
  }

  .nav-tabs,
  .nav-actions{
    display:none;
  }

  .navbar.open{
    height:auto;
    align-items:flex-start;
    flex-direction:column;
    padding:18px;
  }

  .navbar.open .nav-tabs,
  .navbar.open .nav-actions{
    display:flex;
    flex-direction:column;
    width:100%;
    align-items:flex-start;
    padding-top:14px;
  }

  .navbar.open .nav-tabs{
    gap:6px;
  }

  .navbar.open .nav-link{
    width:100%;
    padding:11px 4px;
    text-align:left;
  }

  .navbar.open .nav-actions{
    gap:10px;
  }

  .mobile-menu{
    display:block;
    position:absolute;
    right:16px;
    top:14px;
  }

  main{
    width:calc(100% - 26px);
  }

  .page{
    padding:48px 4px 30px;
  }

  .hero-content h1,
  .section-head h1,
  .about-top h1,
  .feature-hero h1,
  .learn-hero h1{
    font-size:38px;
  }

  .brand-text{
    font-size:18px;
  }

  .brand-text small{
    font-size:8px;
    margin-left:5px;
    padding:2px 5px;
  }

  .hero-visual{
    display:flex;
    flex-direction:column;
  }

  .globe-shield-wrap{
    width:300px;
    height:300px;
  }

  .globe-3d-pos{
    width:250px;
    height:250px;
  }

  .hero-status-badge{
    width:150px;
    padding:10px 12px;
    animation-duration:8s;
  }

  .badge-threat{
    left:-2%;
  }

  .badge-secure{
    right:-2%;
  }

  .roadmap{
    padding-left:24px;
  }

  .roadmap::before{
    left:8px;
  }

  .about-values,
  .why-choose-grid{
    grid-template-columns:1fr;
  }

  .detect-panel-grid,
  .how-it-works,
  .ai-layout{
    grid-template-columns:1fr;
  }

  .what-we-check{
    grid-template-columns:1fr 1fr;
  }

  .ai-chat{
    height:480px;
  }

  .hero-stats-row{
    gap:16px;
  }

  .hero-stats-row div{
    padding-right:16px;
    margin-right:16px;
  }

  .social-buttons{
    grid-template-columns:1fr;
  }

  .glass{
    backdrop-filter:blur(12px) saturate(120%);
    -webkit-backdrop-filter:blur(12px) saturate(120%);
    box-shadow:
      0 6px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.03);
  }

  .tilt-card{
    will-change:auto;
    transform:none!important;
  }

  .cursor-glow{
    display:none!important;
  }

  .blur-orb{
    filter:blur(52px);
    opacity:.24;
  }

  .ticker-track{
    animation-duration:42s;
  }

  .globe-3d{
    animation-duration:34s;
  }

  .primary-btn:hover,
  .secondary-btn:hover,
  .login-btn:hover{
    transform:none;
  }
}

@media(max-width:720px){
  .ghost-page{
    padding-top:22px;
  }

  .ghost-app{
    border-radius:18px;
    min-height:0;
  }

  .ghost-landing{
    padding:34px 18px;
    gap:24px;
  }

  .ghost-hero-copy h1{
    font-size:clamp(38px,12vw,52px);
    letter-spacing:-1.7px;
  }

  .ghost-hero-copy>p{
    font-size:14px;
  }

  .ghost-input-row{
    flex-direction:column;
  }

  .ghost-primary-btn{
    width:100%;
  }

  .ghost-upload-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .ghost-upload-row small{
    width:100%;
    margin-left:0;
  }

  .ghost-feature-strip{
    grid-template-columns:1fr 1fr;
  }

  .ghost-feature-strip>div{
    min-height:72px;
    padding:13px 11px;
  }

  .ghost-hero-art{
    min-height:330px;
  }

  .ghost-window-stack,
  .ghost-window-main{
    height:260px;
    width:90%;
  }

  .ghost-mascot{
    width:128px;
  }

  .ghost-main-panel{
    padding:17px 12px;
  }

  .ghost-topbar,
  .ghost-results-head{
    flex-direction:column;
  }

  .ghost-cancel-btn{
    align-self:flex-end;
    margin-top:-42px;
  }

  .ghost-stepper{
    overflow-x:auto;
    grid-template-columns:repeat(5,105px);
    padding-bottom:5px;
    margin-inline:0;
  }

  .ghost-browser-preview{
    min-height:290px;
  }

  .ghost-preview-stage,
  .ghost-preview-stage img{
    min-height:252px;
  }

  .ghost-overview-grid{
    grid-template-columns:1fr;
  }

  .ghost-result-alert{
    grid-template-columns:40px 1fr;
  }

  .ghost-result-alert>span{
    grid-column:2;
  }

  .ghost-result-actions{
    width:100%;
  }

  .ghost-result-actions button{
    flex:1;
  }

  .ghost-score-ring{
    width:115px;
    height:115px;
  }

  .ghost-score-ring small{
    top:69px;
  }

  .ghost-screen-frame{
    min-height:250px;
  }
}

@media(max-width:700px){
  body::after{
    display:none;
  }

  #particleCanvas{
    display:none!important;
  }

  .aurora-sweep{
    display:none;
  }

  .grid-glow{
    opacity:.28;
    background-size:80px 80px;
  }

  .page{
    padding-top:32px;
  }

  .detect-main,
  .detect-side,
  .ai-config{
    padding:21px;
    border-radius:18px;
  }

  .detect-tabs{
    position:sticky;
    top:92px;
    z-index:20;
    overflow-x:auto;
    max-width:100%;
    scrollbar-width:none;
  }

  .detect-tabs::-webkit-scrollbar{
    display:none;
  }

  .detect-tab{
    min-width:125px;
    white-space:nowrap;
  }

  .result-box{
    overflow-wrap:anywhere;
  }

  .scan-report{
    padding:16px;
    content-visibility:visible;
  }

  .report-top-row{
    align-items:flex-start;
  }

  .score-display{
    margin-left:auto;
  }

  .ai-layout{
    gap:14px;
  }

  .ai-chat{
    height:min(68vh,610px);
    min-height:500px;
  }

  .chat-messages{
    overscroll-behavior:contain;
  }

  .chat-input-row input,
  .feature-textarea,
  .detect-main input{
    font-size:16px;
  }

  .hero{
    min-height:auto;
  }

  .hero-content{
    padding-top:8px;
  }

  .hero-title{
    font-size:clamp(36px,12vw,52px);
  }

  .wow-section{
    padding:30px 18px;
  }

  .blur-orb.orb-b,
  .blur-orb.orb-c,
  .globe-glow,
  .shield-pulse{
    display:none!important;
  }

  .background{
    contain:strict;
  }

  .glass{
    backdrop-filter:blur(8px) saturate(110%);
    -webkit-backdrop-filter:blur(8px) saturate(110%);
  }

  .reveal{
    transition-duration:.35s;
  }

  .ticker-track{
    animation:none;
    transform:none;
    overflow:hidden;
  }

  .ticker-track .ticker-item:nth-child(n+4){
    display:none;
  }

  .scan-ring-fill{
    transition-duration:.65s;
  }

  .home-quote,
  .wow-section,
  .detect-main,
  .detect-side,
  .recent-scans,
  .ai-chat,
  .ai-config{
    contain:layout paint style;
  }

  .feature-textarea{
    min-height:150px;
  }
}

@media(max-width:600px){
  .analysis-confidence{
    align-items:flex-start;
    flex-direction:column;
  }

  .analysis-confidence strong{
    text-align:left;
  }
}

@media(max-width:480px){
  main,
  .navbar{
    width:calc(100% - 18px);
  }

  .navbar{
    margin-top:9px;
    top:8px;
    min-height:62px;
    padding-inline:15px;
  }

  .page{
    padding-inline:0;
  }

  .feature-page-header{
    margin-bottom:20px;
    padding-inline:8px;
  }

  .detect-tabs{
    top:79px;
    border-radius:12px;
    scroll-snap-type:x proximity;
  }

  .detect-tab{
    scroll-snap-align:start;
  }

  .detect-main,
  .detect-side{
    padding:18px;
  }

  .real-upload-box{
    padding:26px 14px;
  }

  .report-top-row{
    gap:8px;
  }

  .risk-badge,
  .scam-type-tag{
    font-size:10px;
  }

  .score-display{
    font-size:23px;
  }

  .report-body{
    gap:16px;
  }

  .report-list{
    font-size:11.5px;
  }

  .ai-chat{
    height:72vh;
    min-height:520px;
    border-radius:18px;
  }

  .chat-bubble{
    max-width:92%;
  }

  .chat-input-row{
    padding:10px;
  }

  .send-btn{
    width:44px;
    height:44px;
    flex:0 0 44px;
  }

  .hero-visual{
    display:none;
  }

  .brand{
    gap:7px;
    font-size:16px;
  }

  .brand-mark{
    font-size:15px;
  }

  .brand-text small{
    letter-spacing:.04em;
  }

  .navbar.open .brand-text small{
    display:inline-flex;
  }

  .hero-status-badge{
    position:relative;
    inset:auto!important;
    width:100%;
    margin:6px 0;
  }

  .globe-shield-wrap{
    display:flex;
    flex-direction:column;
    height:auto;
    gap:14px;
  }

  .what-we-check{
    grid-template-columns:1fr;
  }

  .hero-stats-row{
    flex-direction:column;
    gap:14px;
  }

  .hero-stats-row div{
    border-right:none;
    padding-right:0;
    margin-right:0;
  }

  .ghost-feature-strip{
    grid-template-columns:1fr;
  }

  .ghost-feature-strip>div,
  .ghost-feature-strip>div:first-child,
  .ghost-feature-strip>div:nth-child(2),
  .ghost-feature-strip>div:nth-child(3),
  .ghost-feature-strip>div:last-child{
    border-radius:9px;
  }

  .ghost-hero-art{
    display:none;
  }

  .ghost-landing{
    padding:30px 14px;
  }

  .ghost-main-panel{
    padding:14px 9px;
  }

  .ghost-target-bar{
    font-size:9px;
  }

  .ghost-live-grid{
    gap:10px;
  }

  .ghost-result-tabs{
    width:100%;
  }

  .ghost-result-tabs button{
    flex:1;
  }

  .ghost-tech-card{
    padding:14px;
  }

  .ghost-result-alert{
    padding:13px;
  }

  .ghost-result-alert h3{
    font-size:15px;
  }

  .ghost-replay-node{
    flex-basis:135px;
  }

  .ghost-score-card,
  .ghost-findings-card,
  .ghost-actions-card,
  .ghost-limitations-card,
  .ghost-replay-card,
  .ghost-screenshot-card{
    padding:14px;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .reveal{
    transition:opacity .2s linear;
    transform:none;
  }

  .reveal.show{
    transform:none;
  }

  .tilt-card{
    transition:none;
  }

  .blur-orb,
  .aurora-sweep,
  .grid-glow,
  .globe-3d,
  .globe-glow,
  .shield-pulse,
  .hero-status-badge,
  .ghost-mascot,
  .ghost-orb-ring,
  .ghost-scan-beam,
  .ghost-radar{
    animation:none;
  }

  .active-page{
    animation:none;
  }

  .cursor-glow{
    display:none;
  }

  .page{
    transition:none!important;
    transform:none!important;
  }

  .ghost-primary-btn:hover{
    transform:none;
  }
}

@media(prefers-reduced-transparency:reduce){
  .glass{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(8,17,31,.94);
  }
}

@media(update:slow){
  .ticker-track,
  .globe-3d,
  .blur-orb,
  .aurora-sweep,
  .grid-glow,
  .hero-status-badge{
    animation:none!important;
  }

  #particleCanvas{
    display:none;
  }
}

/* Print GhostScan report */
@media print{
  body{
    background:#fff!important;
    color:#111!important;
  }

  .navbar,
  .background,
  #particleCanvas,
  footer,
  .ghost-side-panel,
  .ghost-result-actions,
  .ghost-result-tabs,
  .ghost-back-results{
    display:none!important;
  }

  .page{
    display:none!important;
  }

  .page#ghostscan{
    display:block!important;
    padding:0!important;
  }

  .ghost-app,
  .ghost-workspace,
  .ghost-main-panel{
    display:block!important;
    background:#fff!important;
    border:none!important;
    box-shadow:none!important;
  }

  .ghost-progress-view,
  .ghost-history-view{
    display:none!important;
  }

  .ghost-results-view{
    display:block!important;
  }

  .ghost-result-tab{
    display:block!important;
    margin-top:20px!important;
  }

  .ghost-result-alert,
  .ghost-score-card,
  .ghost-findings-card,
  .ghost-actions-card,
  .ghost-limitations-card,
  .ghost-replay-card,
  .ghost-screenshot-card,
  .ghost-tech-card{
    background:#fff!important;
    color:#111!important;
    border:1px solid #ccc!important;
    box-shadow:none!important;
  }

  .ghost-result-alert p,
  .ghost-section-title p,
  .ghost-tech-card p,
  .ghost-tech-card li,
  .ghost-tech-card dd,
  .ghost-finding,
  .ghost-action{
    color:#333!important;
  }

  .ghost-screen-frame{
    background:#fff!important;
  }
}

/* ═══ CYBERNET AI API KEY PANEL ═══ */
.api-key-label{
  display:block;
  margin:18px 0 8px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
}
.api-key-field{
  position:relative;
}
.api-key-field input{
  padding-right:72px;
  margin-bottom:12px;
}
.api-key-toggle{
  position:absolute;
  right:8px;
  top:7px;
  height:34px;
  padding:0 12px;
  border:1px solid var(--glass-border);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:var(--green-bright);
  font-family:var(--font-mono);
  font-size:11px;
}
.api-key-toggle:hover{border-color:var(--glass-border-strong)}
.api-key-actions{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:10px;
  margin-bottom:10px;
}
.api-service-check{margin-top:0}

/* ═══ GHOSTSCAN — IN THE WORKS ═══ */
.ghost-coming-soon{
  position:relative;
  z-index:2;
  min-height:760px;
  display:grid;
  place-items:center;
  padding:90px 48px;
  overflow:hidden;
  border-top:1px solid rgba(69,245,121,.16);
  background:
    radial-gradient(circle at 50% 30%,rgba(69,245,121,.12),transparent 38%),
    linear-gradient(180deg,#040b14 0%,#06111c 100%);
}
.ghost-coming-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(69,245,121,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(69,245,121,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at center,black,transparent 74%);
}
.ghost-coming-content{
  position:relative;
  width:min(960px,100%);
  text-align:center;
}
.ghost-coming-badge{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 15px;
  border:1px solid rgba(69,245,121,.42);
  border-radius:999px;
  color:var(--ghost);
  background:rgba(69,245,121,.08);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}
.ghost-coming-icon{
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  margin:24px auto 18px;
  border:1px solid var(--ghost-border);
  border-radius:24px;
  color:var(--ghost);
  background:rgba(69,245,121,.08);
  box-shadow:0 0 46px rgba(69,245,121,.13);
  font-size:38px;
  animation:ghostGearPulse 3s ease-in-out infinite;
}
.ghost-coming-content h2{
  font-family:var(--font-body);
  font-size:clamp(34px,4vw,58px);
  letter-spacing:-1.8px;
  margin-bottom:16px;
}
.ghost-coming-content>p{
  max-width:760px;
  margin:0 auto;
  color:#9fb0c3;
  font-size:15.5px;
  line-height:1.75;
}
.ghost-build-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:38px 0 28px;
  text-align:left;
}
.ghost-build-list>div{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:2px 12px;
  padding:20px;
  border:1px solid rgba(69,245,121,.15);
  border-radius:16px;
  background:rgba(7,17,29,.72);
}
.ghost-build-list span{
  grid-row:1/3;
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:800;
}
.ghost-build-list strong{font-size:14px}
.ghost-build-list small{color:#8193a8;line-height:1.5}
.ghost-development-progress{
  max-width:680px;
  margin:0 auto 24px;
  padding:18px;
  border:1px solid rgba(69,245,121,.18);
  border-radius:16px;
  background:rgba(7,17,29,.74);
}
.ghost-progress-copy{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:12px;
  color:#8ea0b4;
}
.ghost-progress-copy strong{color:var(--ghost)}
.ghost-development-track{
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.ghost-development-track span{
  display:block;
  width:68%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--ghost),#7cffaa);
  box-shadow:0 0 18px rgba(69,245,121,.45);
  animation:ghostBuildGlow 2.4s ease-in-out infinite;
}
.ghost-coming-note{font-size:13px!important;color:#7e91a7!important}
.ghost-use-link-check{margin:22px auto 0}
.ghost-service-development .ghost-service-dot{background:var(--warning)!important;box-shadow:0 0 12px rgba(255,207,107,.45)!important}
@keyframes ghostGearPulse{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(8deg) scale(1.06)}}
@keyframes ghostBuildGlow{0%,100%{opacity:.72}50%{opacity:1}}

@media(max-width:760px){
  .api-key-actions{grid-template-columns:1fr}
  .ghost-coming-soon{padding:72px 20px;min-height:820px}
  .ghost-build-list{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════
   CYBERNET AI SAAS ACCESS + PRICING
   ═══════════════════════════════════════════════════════ */

[hidden]{display:none!important}

.nav-actions{
  gap:10px;
  min-width:210px;
  justify-content:flex-end;
}

.account-summary{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.account-summary[hidden]{display:none!important}

.nav-greeting{
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.plan-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  border:1px solid transparent;
}

.plan-badge-free{
  color:#b9c8d8;
  background:rgba(125,147,173,.12);
  border-color:rgba(125,147,173,.25);
}

.plan-badge-pro{
  color:#03111b;
  background:linear-gradient(100deg,var(--green),#69d7ff);
  border-color:rgba(165,240,255,.55);
  box-shadow:0 0 20px rgba(34,211,238,.24);
}

.usage-chip{
  padding:4px 8px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--green-bright);
  background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.18);
}

.account-action-btn,
.auth-text-btn{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.account-action-btn:hover,
.auth-text-btn:hover{color:var(--green-bright)}

.auth-text-btn{
  justify-self:center;
  margin-top:-2px;
}

.auth-message{
  min-height:20px;
  margin-top:14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  text-align:center;
}

.auth-message.error{color:#ff9d9d}
.auth-message.success{color:var(--safe)}

/* Reserve number width so the hero never jumps while counters animate. */
.hero-stats-row strong{
  min-width:94px;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  contain:layout paint;
}

.hero-stats-row div:nth-child(3) strong{min-width:76px}
.hero-stats-row div:nth-child(4) strong{min-width:56px}

/* Account access panel */
.account-access-panel{overflow:hidden}

.account-access-head,
.price-card-topline,
.usage-meter-labels,
.pro-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.account-eyebrow,
.price-plan-label{
  display:block;
  color:var(--green);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.4px;
  margin-bottom:7px;
}

.account-access-head h4{margin:0}
.account-access-panel>p{margin-top:14px}

.usage-meter-card{
  margin:20px 0;
  padding:16px;
  border-radius:15px;
  background:rgba(4,12,24,.45);
  border:1px solid rgba(34,211,238,.14);
}

.usage-meter-labels span,
.usage-meter-card small{
  color:var(--muted);
  font-size:11.5px;
}

.usage-meter-labels strong{
  font-family:var(--font-mono);
  color:var(--green-bright);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.usage-meter-track{
  height:8px;
  margin:12px 0 9px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.055);
}

.usage-meter-track span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--green),#3b82f6);
  box-shadow:0 0 14px rgba(34,211,238,.42);
  transition:width .45s ease;
}

.plan-benefit-list{
  display:grid;
  gap:10px;
  margin:0 0 18px;
  color:var(--text);
  font-size:12.5px;
}

.plan-benefit-list div{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.plan-benefit-list div span{
  color:var(--safe);
  font-family:var(--font-mono);
  font-weight:800;
}

.plan-benefit-list .benefit-locked{color:var(--muted)}
.plan-benefit-list .benefit-locked span{color:#ff8f8f}

.pro-history-card{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--glass-border);
}

.pro-history-head h5{font-size:12px}
.pro-history-head span{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:9px;
}

.pro-history-list{
  display:grid;
  gap:8px;
  margin-top:12px;
  max-height:210px;
  overflow:auto;
}

.pro-history-list p{
  margin:0;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.6;
}

.history-entry{
  padding:10px 11px;
  border-radius:11px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.055);
}

.history-entry strong{
  display:block;
  font-size:11.5px;
  color:var(--text);
}

.history-entry span{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:var(--muted);
}

.report-download-btn{
  margin-top:12px;
  width:100%;
  border:1px solid rgba(34,211,238,.25);
  background:rgba(34,211,238,.08);
  color:var(--green-bright);
  border-radius:10px;
  padding:10px 12px;
  font-size:11px;
  font-weight:800;
}

.report-download-btn:hover{
  background:rgba(34,211,238,.14);
  border-color:rgba(34,211,238,.42);
}

/* Two-plan pricing */
.pricing-head{max-width:780px;margin-left:auto;margin-right:auto}

.pricing-grid.pricing-grid-two{
  max-width:960px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:24px;
}

.pricing-grid-two .price-card{
  display:flex;
  flex-direction:column;
  min-height:620px;
  padding:34px;
}

.pricing-grid-two .price-card h3{
  margin-top:24px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:23px;
  text-transform:none;
  letter-spacing:-.4px;
}

.pricing-grid-two .price-card h2{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin:12px 0 10px;
}

.pricing-grid-two .price-card .price-amount{
  color:var(--text);
  font-size:47px;
  line-height:1;
  -webkit-text-fill-color:initial;
  font-variant-numeric:tabular-nums;
}

.pricing-grid-two .price-period{
  padding-bottom:5px;
  color:var(--muted);
  font-size:13px;
}

.pricing-grid-two .price-card>p{
  min-height:68px;
  margin-bottom:10px;
}

.billing-equivalent{
  min-height:22px!important;
  margin:0 0 16px!important;
  color:var(--green-bright)!important;
  font-family:var(--font-mono);
  font-size:11px!important;
}

.pricing-grid-two .price-card ul{
  flex:1;
  margin-top:15px;
}

.pricing-grid-two .price-card li{
  position:relative;
  padding-left:23px;
  line-height:1.45;
}

.pricing-grid-two .price-card li::before{
  position:absolute;
  left:0;
  top:0;
}

.pricing-grid-two .price-card li.feature-unavailable{
  color:var(--muted);
}

.pricing-grid-two .price-card li.feature-unavailable::before{
  content:"— ";
  color:#ff8f8f;
}

.pro-price-card{
  transform:translateY(-6px);
}

.pricing-notice{
  display:none;
  max-width:960px;
  margin:20px auto 0;
  padding:14px 18px;
  border-radius:14px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

.pricing-notice.show{display:block}
.pricing-notice.error{color:#ffb0b0;border-color:rgba(255,107,107,.28)}
.pricing-notice.success{color:var(--safe);border-color:rgba(52,211,153,.28)}

.comparison-wrap{
  max-width:1080px;
  margin:78px auto 0;
}

.comparison-heading{
  text-align:center;
  margin-bottom:24px;
}

.comparison-heading h2{
  margin:6px 0 9px;
  font-size:30px;
}

.comparison-heading p{
  color:var(--muted);
  font-size:14px;
}

.comparison-table-shell{
  overflow:auto;
  border-radius:20px;
}

.comparison-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
}

.comparison-table th,
.comparison-table td{
  padding:17px 20px;
  border-bottom:1px solid rgba(255,255,255,.055);
  text-align:left;
  font-size:12.5px;
  line-height:1.45;
}

.comparison-table th{
  color:var(--green-bright);
  background:rgba(34,211,238,.055);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.4px;
}

.comparison-table th:not(:first-child),
.comparison-table td:not(:first-child){text-align:center}

.comparison-table tbody tr:hover{background:rgba(255,255,255,.018)}
.comparison-table td:first-child{color:var(--text);font-weight:700}
.comparison-table td:not(:first-child){color:var(--muted)}
.table-yes{color:var(--safe);font-weight:900;font-size:16px}
.table-no{color:#ff8f8f;font-weight:900}

.pricing-footnote{
  max-width:960px;
  margin:20px auto 0;
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:11.5px;
}

.pricing-footnote strong{color:var(--green-bright)}

/* GhostScan entitlement gate */
.feature-paywall{
  display:none;
  max-width:760px;
  margin:80px auto;
  padding:46px;
  border-radius:26px;
  text-align:center;
}

.ghost-page.is-locked #ghostPaywall{display:block}
.ghost-page.is-locked>#ghostLanding,
.ghost-page.is-locked>#ghostComingSoon,
.ghost-page.is-locked>#ghostWorkspace{display:none!important}

.feature-paywall-icon{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  border-radius:22px;
  color:var(--green-bright);
  font-size:32px;
  background:rgba(34,211,238,.09);
  border:1px solid rgba(34,211,238,.22);
  box-shadow:0 0 40px rgba(34,211,238,.12);
}

.feature-paywall h1{
  margin:8px 0 14px;
  font-size:34px;
}

.feature-paywall p{
  max-width:620px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.75;
}

.feature-paywall-points{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin:24px 0 28px;
}

.feature-paywall-points span{
  padding:8px 11px;
  border-radius:999px;
  color:var(--green-bright);
  background:rgba(34,211,238,.07);
  border:1px solid rgba(34,211,238,.15);
  font-size:10.5px;
}

/* Better visual stability on the first home render. */
#home .hero,
#home .hero-content,
#home .hero-visual{
  backface-visibility:hidden;
  transform:translateZ(0);
}

#home .hero{opacity:1!important}

@media (max-width:1100px){
  .nav-actions{min-width:auto}
  .usage-chip{display:none}
  .account-action-btn{display:none}
}

@media (max-width:820px){
  .pricing-grid.pricing-grid-two{grid-template-columns:1fr;max-width:590px}
  .pricing-grid-two .price-card{min-height:auto}
  .pro-price-card{transform:none}
  .comparison-wrap{margin-top:52px}
  .feature-paywall{margin:50px auto;padding:34px 24px}
}

@media (max-width:620px){
  .account-summary{gap:6px}
  .nav-greeting{max-width:80px;font-size:11px}
  .plan-badge{min-height:21px;padding:3px 7px;font-size:9px}
  .pricing-grid-two .price-card{padding:27px 22px}
  .pricing-grid-two .price-card .price-amount{font-size:41px}
  .pricing-toggle-wrap{flex-direction:column}
  .pricing-footnote{display:grid;text-align:center}
  .feature-paywall h1{font-size:28px}
}

Library
/
CyberNet
/
style.css
*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#050a16;
  --bg-alt:#08111f;
  --glass:rgba(15,28,48,0.48);
  --glass-strong:rgba(15,28,48,0.7);
  --glass-border:rgba(56,189,248,0.16);
  --glass-border-strong:rgba(56,189,248,0.34);
  --green:#22d3ee;
  --green-dim:#0e6a85;
  --green-bright:#a5f0ff;
  --text:#eaf3fb;
  --muted:#7d93ad;
  --soft:#425873;
  --danger:#ff6b6b;
  --warning:#ffcf6b;
  --safe:#34d399;
  --font-mono:'JetBrains Mono',monospace;
  --font-body:'Inter',sans-serif;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  background:
    radial-gradient(
      ellipse 90% 50% at 20% -10%,
      rgba(34,211,238,0.1),
      transparent 60%
    ),
    radial-gradient(
      ellipse 70% 45% at 90% 10%,
      rgba(59,130,246,0.09),
      transparent 55%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(8,17,31,0.6),
      transparent 65%
    ),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
}

/* Faint scanline texture */
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:998;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 4px
  );
  opacity:0.3;
}

body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--green),
    #3b82f6,
    transparent
  );
  background-size:200% 100%;
  animation:topBarShift 5s linear infinite;
  z-index:999;
  pointer-events:none;
  opacity:.6;
}

::-webkit-scrollbar{
  width:5px;
}

::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.02);
}

::-webkit-scrollbar-thumb{
  background:var(--green-dim);
  border-radius:999px;
}

button,
input,
textarea{
  font-family:inherit;
}

button{
  cursor:pointer;
}

/* ═══ GLASS ═══ */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ═══ BACKGROUND ═══ */
.background{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:-5;
}

.blur-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.4;
  animation:orbFloat 13s ease-in-out infinite;
}

.orb-a{
  width:460px;
  height:460px;
  left:-160px;
  top:40px;
  background:radial-gradient(
    circle,
    rgba(34,211,238,0.55),
    transparent 65%
  );
}

.orb-b{
  width:420px;
  height:420px;
  right:-140px;
  top:220px;
  background:radial-gradient(
    circle,
    rgba(59,130,246,0.4),
    transparent 65%
  );
  animation-delay:3s;
  animation-duration:16s;
}

.orb-c{
  width:380px;
  height:380px;
  left:30%;
  bottom:-180px;
  background:radial-gradient(
    circle,
    rgba(34,211,238,0.3),
    transparent 65%
  );
  animation-delay:6s;
  animation-duration:19s;
}

.aurora-sweep{
  position:absolute;
  inset:-20% -10%;
  background:linear-gradient(
    115deg,
    transparent 20%,
    rgba(34,211,238,0.05) 40%,
    rgba(59,130,246,0.06) 55%,
    transparent 75%
  );
  background-size:250% 250%;
  animation:auroraDrift 22s ease-in-out infinite;
}

@keyframes auroraDrift{
  0%{background-position:0% 30%}
  50%{background-position:100% 70%}
  100%{background-position:0% 30%}
}

.grid-glow{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(
      rgba(56,189,248,0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(56,189,248,0.025) 1px,
      transparent 1px
    );
  background-size:64px 64px;
  mask-image:radial-gradient(
    circle at center,
    black,
    transparent 72%
  );
  opacity:0.5;
  animation:gridDrift 30s linear infinite;
}

@keyframes gridDrift{
  from{background-position:0 0}
  to{background-position:64px 64px}
}

#particleCanvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
}

/* ═══ TERMINAL WINDOW ═══ */
.term-window,
.loader-term,
.fetch-panel{
  border-radius:16px;
  overflow:hidden;
}

.term-chrome{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--glass-border);
  background:rgba(0,0,0,0.18);
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

.dot.r{background:#ff6b6b}
.dot.y{background:#ffcf6b}
.dot.g{background:#22d3ee}

.term-path{
  margin-left:10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}

.term-body{
  padding:22px;
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.9;
  color:var(--green-bright);
  min-height:180px;
}

.term-body .prompt,
.prompt{
  color:var(--green);
  margin-right:8px;
}

.term-line{
  opacity:0;
  animation:termLineIn .4s ease forwards;
}

.term-cursor{
  display:inline-block;
  width:8px;
  height:16px;
  background:var(--green);
  vertical-align:middle;
  animation:cursorBlink 1s step-end infinite;
  margin-left:2px;
}

/* ═══ NAVBAR ═══ */
.navbar{
  width:min(1500px,calc(100% - 48px));
  min-height:70px;
  margin:20px auto 0;
  padding:0 22px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:16px;
  z-index:50;
}

.brand{
  border:none;
  background:transparent;
  text-decoration:none;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:19px;
  font-weight:700;
}

.brand-mark{
  color:var(--green);
  font-family:var(--font-mono);
  font-weight:800;
  text-shadow:0 0 16px rgba(34,211,238,0.5);
}

.brand-text{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  white-space:nowrap;
}

.brand-text span{
  color:var(--green);
}

.brand-text small{
  margin-left:7px;
  padding:3px 6px;
  border:1px solid rgba(34,211,238,.28);
  border-radius:6px;
  color:var(--green-bright);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(34,211,238,.06);
  vertical-align:middle;
}

.nav-tabs{
  display:flex;
  align-items:center;
  gap:26px;
  position:relative;
}

.nav-indicator{
  position:absolute;
  bottom:-8px;
  left:0;
  height:2px;
  width:0;
  background:linear-gradient(
    90deg,
    var(--green),
    #3b82f6
  );
  border-radius:999px;
  box-shadow:0 0 10px rgba(34,211,238,0.7);
  transition:
    transform .35s cubic-bezier(.65,0,.35,1),
    width .35s cubic-bezier(.65,0,.35,1),
    opacity .25s ease;
  opacity:0;
}

.nav-tabs.indicator-ready .nav-indicator{
  opacity:1;
}

.nav-link{
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  position:relative;
  transition:color .25s;
  padding-bottom:4px;
}

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

.nav-link.active{
  color:var(--green);
}

.ghost-nav-link span{
  display:inline-flex;
  align-items:center;
  margin-left:4px;
  padding:2px 5px;
  border:1px solid rgba(69,245,121,.42);
  border-radius:999px;
  color:#45f579;
  font-size:7px;
  line-height:1;
  font-weight:800;
  vertical-align:middle;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav-greeting{
  color:var(--green);
  font-family:var(--font-mono);
  font-size:13px;
  display:none;
}

.nav-greeting.visible{
  display:inline;
}

.login-btn{
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
  padding:9px 16px;
  border-radius:10px;
  transition:border-color .2s,color .2s;
}

.login-btn:hover{
  border-color:var(--glass-border-strong);
  color:var(--green);
}

.mobile-menu{
  display:none;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  width:42px;
  height:42px;
  border-radius:10px;
}

/* ═══ BUTTONS ═══ */
.primary-btn,
.secondary-btn{
  min-height:46px;
  padding:0 22px;
  border-radius:11px;
  border:none;
  color:var(--bg);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.primary-btn{
  background:var(--green);
  box-shadow:0 0 24px rgba(34,211,238,0.25);
}

.primary-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 36px rgba(34,211,238,0.4);
}

.secondary-btn{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--glass-border);
  color:var(--text);
}

.secondary-btn:hover{
  transform:translateY(-2px);
  border-color:var(--glass-border-strong);
}

.primary-btn:disabled,
.secondary-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
}

.big{
  min-height:54px;
  padding-inline:26px;
  font-size:14px;
}

.full{
  width:100%;
}

.btn-spinner{
  display:inline-block;
  width:13px;
  height:13px;
  border:2px solid rgba(0,0,0,0.25);
  border-top-color:var(--bg);
  border-radius:50%;
  animation:btnSpin .6s linear infinite;
  vertical-align:middle;
}

main{
  width:min(1500px,calc(100% - 48px));
  margin:0 auto;
}

/* ═══ PAGES ═══ */
.page{
  display:none;
  min-height:calc(100vh - 110px);
  padding:50px 30px 36px;
  animation:pageFade .5s ease both;
  transition:opacity .32s ease,transform .32s ease;
}

.active-page{
  display:block;
}

.page.leaving{
  opacity:0;
  transform:translateY(-14px);
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

.tilt-card{
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  transform-style:preserve-3d;
  will-change:transform;
}

/* ═══ HERO ═══ */
.hero{
  position:relative;
  min-height:560px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12.5px;
  margin-bottom:26px;
}

.pill.center{
  margin-inline:auto;
}

.hero-content h1,
.section-head h1,
.about-top h1,
.feature-hero h1,
.learn-hero h1{
  font-family:var(--font-mono);
  font-size:clamp(30px,3.4vw,50px);
  line-height:1.15;
  letter-spacing:-1px;
  font-weight:700;
  margin-bottom:18px;
}

.hero-content h1 span,
.section-head h1 span,
.about-top h1 span,
.feature-hero h1 span,
.learn-hero h1 span{
  color:var(--green);
  text-shadow:0 0 30px rgba(34,211,238,0.3);
}

.hero-title{
  font-family:var(--font-body);
  font-size:clamp(38px,4.4vw,64px);
  line-height:1.1;
  letter-spacing:-1.5px;
  font-weight:800;
  margin-bottom:20px;
}

.hero-title span{
  color:var(--green);
  text-shadow:0 0 30px rgba(34,211,238,0.3);
}

.hero-content p,
.section-head p,
.feature-hero p,
.learn-hero p{
  color:var(--muted);
  font-size:15.5px;
  line-height:1.75;
  max-width:560px;
}

.hero-buttons{
  display:flex;
  gap:18px;
  margin-top:30px;
  flex-wrap:wrap;
}

.hero-stats-row{
  display:flex;
  gap:0;
  flex-wrap:wrap;
  margin-top:44px;
}

.hero-stats-row div{
  padding-right:28px;
  margin-right:28px;
  border-right:1px solid var(--glass-border);
}

.hero-stats-row div:last-child{
  border-right:none;
  padding-right:0;
  margin-right:0;
}

.hero-stats-row strong{
  display:block;
  font-family:var(--font-body);
  font-size:26px;
  font-weight:800;
  color:var(--text);
  background:linear-gradient(100deg,var(--green),#3b82f6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-stats-row span{
  display:block;
  color:var(--muted);
  font-size:12.5px;
  margin-top:4px;
}

.about-stats-row{
  justify-content:center;
  margin:0 auto 36px;
  max-width:600px;
}

.hero-visual{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ═══ ROTATING GLOBE + SHIELD HERO ═══ */
.globe-shield-wrap{
  position:relative;
  width:440px;
  height:440px;
  max-width:100%;
  perspective:1200px;
}

.globe-glow{
  position:absolute;
  inset:-40px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(34,211,238,0.16),
    transparent 68%
  );
  animation:globeGlowPulse 4s ease-in-out infinite;
}

@keyframes globeGlowPulse{
  0%,100%{
    opacity:0.7;
    transform:scale(0.96);
  }
  50%{
    opacity:1;
    transform:scale(1.04);
  }
}

.globe-3d-pos{
  position:absolute;
  top:50%;
  left:50%;
  width:360px;
  height:360px;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
}

.globe-3d{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  animation:globeSpin 22s linear infinite;
}

@keyframes globeSpin{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}

.globe-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(56,189,248,0.32);
}

.globe-ring.gr1{transform:rotateY(0deg)}
.globe-ring.gr2{transform:rotateY(30deg)}
.globe-ring.gr3{transform:rotateY(60deg)}
.globe-ring.gr4{transform:rotateY(90deg)}

.globe-ring.gr-eq{
  transform:rotateX(90deg);
  border-color:rgba(34,211,238,0.4);
}

.globe-ring.gr-lat1{
  inset:10%;
  transform:rotateX(65deg);
}

.globe-ring.gr-lat2{
  inset:24%;
  transform:rotateX(65deg) rotateY(180deg);
}

.globe-ring.gr-lat3{
  inset:38%;
  transform:rotateX(65deg);
}

.hero-shield{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:135px;
  height:auto;
  filter:drop-shadow(0 0 26px rgba(34,211,238,0.6));
}

.hero-shield svg{
  width:100%;
  height:auto;
  position:relative;
  z-index:2;
}

.shield-pulse{
  position:absolute;
  top:50%;
  left:50%;
  width:70px;
  height:70px;
  border-radius:50%;
  border:1.5px solid rgba(34,211,238,0.6);
  transform:translate(-50%,-50%) scale(0.6);
  animation:shieldPulseOut 3s ease-out infinite;
}

.shield-pulse.p2{
  animation-delay:1.5s;
}

@keyframes shieldPulseOut{
  0%{
    transform:translate(-50%,-50%) scale(0.5);
    opacity:0.9;
  }
  100%{
    transform:translate(-50%,-50%) scale(2.6);
    opacity:0;
  }
}

.hero-status-badge{
  position:absolute;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  width:190px;
  z-index:4;
  animation:badgeFloat 5s ease-in-out infinite;
}

.hero-status-badge h4{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  margin-bottom:2px;
}

.hero-status-badge p{
  color:var(--muted);
  font-size:11.5px;
}

.badge-icon-box{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.badge-icon{
  font-size:16px;
  flex-shrink:0;
}

.badge-threat{
  top:6%;
  left:-8%;
  border-color:rgba(255,107,107,0.35);
}

.badge-threat h4,
.badge-threat .badge-icon{
  color:var(--danger);
}

.badge-threat .badge-icon-box{
  background:rgba(255,107,107,0.12);
}

.badge-secure{
  bottom:20%;
  right:-10%;
  border-color:rgba(52,211,153,0.35);
  animation-delay:1.2s;
}

.badge-secure h4,
.badge-secure .badge-icon{
  color:var(--safe);
}

.badge-secure .badge-icon-box{
  background:rgba(52,211,153,0.12);
}

.badge-scan{
  bottom:2%;
  left:0%;
  border-color:rgba(34,211,238,0.35);
  animation-delay:2.4s;
}

.badge-scan h4,
.badge-scan .badge-icon{
  color:var(--green);
}

.badge-scan .badge-icon-box{
  background:rgba(34,211,238,0.12);
}

@keyframes badgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ═══ WHY CHOOSE ═══ */
.why-choose{
  max-width:1200px;
  margin:50px auto 0;
  text-align:center;
}

.why-choose h2{
  font-family:var(--font-body);
  font-size:clamp(24px,2.6vw,34px);
  font-weight:800;
  margin-bottom:34px;
}

.why-choose-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  text-align:left;
}

.why-choose-item{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.wc-icon-box{
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(34,211,238,0.1);
  color:var(--green);
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.wc-icon-box svg{
  width:22px;
  height:22px;
}

.why-choose-item h4{
  font-family:var(--font-body);
  font-size:15.5px;
  font-weight:700;
  margin-bottom:6px;
}

.why-choose-item p{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.6;
}

.home-quote{
  text-align:center;
  padding:40px 30px;
  margin:28px 0 0;
  border-radius:20px;
}

.home-quote p{
  font-family:var(--font-mono);
  font-size:clamp(18px,2vw,24px);
  font-weight:600;
  color:var(--green-bright);
  max-width:600px;
  margin:0 auto;
}

/* ═══ WOW SECTION ═══ */
.wow-section{
  margin:16px 0 0;
  border-radius:24px;
  padding:46px 38px;
}

.wow-header{
  text-align:center;
  margin-bottom:36px;
}

.wow-header h2{
  font-family:var(--font-mono);
  font-size:clamp(20px,2.2vw,30px);
  font-weight:700;
}

.wow-header h2 span{
  color:var(--green);
}

.wow-header p{
  color:var(--muted);
  margin-top:6px;
  font-size:14px;
}

.wow-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.wow-stat{
  text-align:center;
  padding:28px 18px;
  border-radius:18px;
  transition:transform .3s;
}

.wow-ring{
  width:74px;
  height:74px;
  margin:0 auto 14px;
}

.wow-ring svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.wow-ring-fill{
  animation:ringDraw 2s ease forwards;
  stroke-dashoffset:226;
  filter:drop-shadow(0 0 6px rgba(34,211,238,0.6));
}

@keyframes ringDraw{
  to{stroke-dashoffset:0}
}

.wow-stat-number{
  font-family:var(--font-mono);
  font-size:36px;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}

.wow-stat-label{
  color:var(--muted);
  font-size:12.5px;
  font-family:var(--font-mono);
}

.wow-ticker{
  margin-top:30px;
  border-radius:12px;
  overflow:hidden;
  height:42px;
}

.ticker-track{
  display:flex;
  gap:50px;
  white-space:nowrap;
  animation:tickerScroll 30s linear infinite;
  align-items:center;
  height:100%;
  padding:0 18px;
}

.ticker-item{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:500;
  flex-shrink:0;
}

.ticker-item.safe{color:var(--safe)}
.ticker-item.warn{color:var(--warning)}
.ticker-item.danger{color:var(--danger)}

@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ═══ FEATURE HERO ═══ */
.feature-hero,
.learn-hero{
  min-height:260px;
  border-radius:24px;
  padding:38px 42px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  gap:30px;
}

.feature-orb-wrap{
  height:220px;
  display:grid;
  place-items:center;
}

.orb-card-box{
  width:120px;
  height:120px;
  border-radius:26px;
  display:grid;
  place-items:center;
  box-shadow:0 0 40px rgba(34,211,238,0.15);
}

/* ═══ FEATURE PAGE HEADER ═══ */
.feature-page-header{
  text-align:center;
  max-width:700px;
  margin:0 auto 28px;
}

.feature-page-header h1{
  font-family:var(--font-body);
  font-size:clamp(28px,3vw,42px);
  font-weight:800;
  letter-spacing:-1px;
  margin-bottom:10px;
}

.feature-page-header p{
  color:var(--muted);
  font-size:15px;
}

/* ═══ DETECTION TABS ═══ */
.detect-tabs{
  display:flex;
  max-width:520px;
  margin:0 auto 32px;
  padding:5px;
  border-radius:14px;
  gap:4px;
}

.detect-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  padding:12px 10px;
  border-radius:10px;
  transition:background .25s,color .25s;
}

.detect-tab.active{
  background:var(--green);
  color:var(--bg);
}

.detect-panel{
  display:none;
}

.detect-panel.active{
  display:block;
  animation:pageFade .4s ease both;
}

.detect-panel-grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:22px;
}

.detect-main{
  border-radius:24px;
  padding:32px;
}

.detect-main h3{
  font-family:var(--font-body);
  font-size:22px;
  font-weight:800;
  margin-bottom:8px;
}

.detect-main p{
  color:var(--muted);
  font-size:14px;
  margin-bottom:18px;
}

.char-count{
  text-align:right;
  color:var(--soft);
  font-size:11.5px;
  margin:-10px 0 14px;
  font-family:var(--font-mono);
}

.detect-side{
  border-radius:24px;
  padding:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
}

/* Scan progress ring */
.scan-ring-wrap{
  position:relative;
  width:150px;
  height:150px;
  display:grid;
  place-items:center;
}

.scan-ring-svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.scan-ring-fill{
  transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1);
}

.scan-ring-label{
  position:absolute;
  font-family:var(--font-body);
  font-size:26px;
  font-weight:800;
  color:var(--text);
}

.scan-status-text{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* How it works */
.how-it-works{
  max-width:1400px;
  margin:36px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.hiw-step{
  border-radius:20px;
  padding:26px;
  text-align:center;
}

.hiw-step span{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(34,211,238,0.12);
  color:var(--green);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
  margin-bottom:14px;
}

.hiw-step h4{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
}

.hiw-step p{
  color:var(--muted);
  font-size:13px;
}

/* Recent scans */
.recent-scans{
  max-width:1400px;
  margin:22px auto 0;
  border-radius:22px;
  padding:26px;
}

.recent-scans h4{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  margin-bottom:16px;
}

.scan-list{
  list-style:none;
  display:grid;
  gap:10px;
}

.scan-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--glass-border);
}

.scan-list-main{
  color:var(--text);
  font-size:13px;
  font-family:var(--font-mono);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.risk-tag{
  flex-shrink:0;
  padding:4px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}

.risk-tag-danger{
  background:rgba(255,107,107,0.14);
  color:var(--danger);
}

.risk-tag-warning{
  background:rgba(255,207,107,0.12);
  color:var(--warning);
}

.risk-tag-safe{
  background:rgba(52,211,153,0.12);
  color:var(--safe);
}

/* Link detection globe */
.mini-globe-wrap{
  position:relative;
  width:160px;
  height:160px;
  display:grid;
  place-items:center;
  perspective:800px;
}

.mini-globe-3d{
  position:relative;
  width:130px;
  height:130px;
  transform-style:preserve-3d;
  animation:globeSpin 16s linear infinite;
}

.mini-globe-3d .globe-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(56,189,248,0.35);
}

.mini-globe-icon{
  position:absolute;
  font-size:32px;
  filter:drop-shadow(0 0 12px rgba(34,211,238,0.6));
}

/* What we check */
.what-we-check{
  max-width:1400px;
  margin:28px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.wwc-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius:18px;
  padding:18px;
}

.wwc-icon{
  font-size:20px;
  flex-shrink:0;
}

.wwc-item h4{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  margin-bottom:4px;
}

.wwc-item p{
  color:var(--muted);
  font-size:12px;
}

.wwc-item-sm{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  color:var(--text);
  font-size:13px;
  margin-top:8px;
}

/* ═══ TOOL CARDS ═══ */
.cybernet-grid{
  max-width:1400px;
  margin:26px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.cybernet-tool-card{
  min-height:420px;
  padding:28px;
  border-radius:24px;
}

.cybernet-tool-card h3{
  font-family:var(--font-mono);
  font-size:17px;
  margin-bottom:10px;
  font-weight:700;
}

.cybernet-tool-card p{
  color:var(--muted);
  line-height:1.7;
  margin-bottom:16px;
  font-size:14px;
}

.feature-icon{
  display:inline-flex;
  padding:8px 14px;
  border-radius:10px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--green);
  background:rgba(34,211,238,0.08);
  border:1px solid var(--glass-border);
  margin-bottom:16px;
}

/* Inputs */
textarea,
input[type="text"],
input[type="password"],
input[type="email"]{
  width:100%;
  border:1px solid var(--glass-border);
  background:rgba(0,0,0,0.2);
  color:var(--text);
  font-family:var(--font-mono);
  border-radius:12px;
  padding:14px;
  outline:none;
  margin-bottom:14px;
  transition:border-color .25s,box-shadow .25s;
  font-size:13.5px;
}

textarea{
  height:140px;
  resize:none;
}

.feature-textarea{
  min-height:190px;
}

textarea:focus,
input:focus{
  border-color:var(--glass-border-strong);
  box-shadow:0 0 18px rgba(34,211,238,0.12);
}

textarea::placeholder,
input::placeholder{
  color:var(--soft);
  font-family:var(--font-body);
}

/* Upload */
.real-upload-box{
  min-height:230px;
  border:1.5px dashed var(--glass-border-strong);
  border-radius:20px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  color:var(--muted);
  margin-bottom:16px;
  transition:border-color .25s,transform .25s;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.real-upload-box:hover,
.real-upload-box.drag-over{
  border-color:var(--green);
  transform:translateY(-3px);
}

.real-upload-box input{
  display:none;
}

.upload-icon{
  width:60px;
  height:60px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  font-size:28px;
  background:rgba(34,211,238,0.1);
  border:1px solid var(--glass-border);
  color:var(--green);
}

.real-upload-box h3{
  font-family:var(--font-mono);
  font-size:15px;
  margin-bottom:6px;
  color:var(--text);
  font-weight:600;
}

.real-upload-box p{
  color:var(--muted);
  font-size:13px;
}

.upload-preview{
  position:absolute;
  inset:0;
  border-radius:18px;
  overflow:hidden;
}

.upload-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.3;
  margin:0;
}

.upload-preview-label{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--green);
  background:rgba(0,0,0,0.7);
  padding:4px 12px;
  border-radius:999px;
  white-space:nowrap;
}

/* Result box */
.result-box{
  min-height:76px;
  margin-top:14px;
  padding:16px;
  border-radius:14px;
  border:1px solid var(--glass-border);
  background:rgba(0,0,0,0.18);
  color:var(--muted);
  line-height:1.55;
  font-size:13.5px;
  transition:border-color .4s;
  position:relative;
  overflow:hidden;
}

.result-box.result-has-danger{
  border-color:rgba(255,107,107,0.5);
}

.result-box.result-has-warning{
  border-color:rgba(255,207,107,0.4);
}

.result-box.result-has-safe{
  border-color:rgba(34,211,238,0.5);
}

.result-box.result-has-uncertain{
  border-color:rgba(167,139,250,.32)!important;
  box-shadow:0 0 28px rgba(167,139,250,.07);
}

.scan-report{
  animation:reportReveal .4s ease both;
  font-family:var(--font-mono);
}

.report-top-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.risk-badge{
  padding:5px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.risk-danger{
  background:rgba(255,107,107,0.14);
  border:1px solid rgba(255,107,107,0.5);
  color:var(--danger);
}

.risk-warning{
  background:rgba(255,207,107,0.1);
  border:1px solid rgba(255,207,107,0.4);
  color:var(--warning);
}

.risk-safe{
  background:rgba(34,211,238,0.1);
  border:1px solid rgba(34,211,238,0.45);
  color:var(--safe);
}

.risk-uncertain{
  color:#d8ccff;
  background:rgba(167,139,250,.13);
  border:1px solid rgba(167,139,250,.38);
}

.scam-type-tag{
  padding:5px 12px;
  border-radius:999px;
  font-size:11.5px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border);
  color:var(--muted);
}

.score-display{
  margin-left:auto;
  font-size:24px;
  font-weight:700;
  color:var(--text);
}

.score-display span{
  font-size:11px;
  color:var(--muted);
  font-weight:400;
}

.risk-meter-wrap{
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
  margin-bottom:16px;
}

.risk-meter-bar{
  height:100%;
  border-radius:999px;
  width:0;
  transition:width .9s cubic-bezier(.34,1.56,.64,1);
}

.report-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.report-col{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--glass-border);
  border-radius:12px;
  padding:14px;
}

.report-col-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:9px;
  color:var(--text);
}

.col-warn{color:var(--warning)}
.col-safe{color:var(--safe)}

.report-list{
  list-style:none;
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
  font-family:var(--font-body);
}

.report-list li{
  padding-left:14px;
  position:relative;
}

.report-list li::before{
  content:'•';
  position:absolute;
  left:0;
  color:var(--soft);
}

.report-list.safe-list li::before{
  content:'→';
  color:var(--safe);
}

.analysis-confidence{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:13px 0 10px;
  padding:10px 12px;
  border:1px solid var(--glass-border);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}

.analysis-confidence strong{
  color:var(--text);
  font-weight:600;
  text-align:right;
}

.verdict-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 15px;
  padding:12px 13px;
  border-radius:11px;
  background:rgba(34,211,238,.06);
  border:1px solid rgba(34,211,238,.16);
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.verdict-note>span{
  color:var(--green);
  font-family:var(--font-mono);
  font-weight:800;
}

.verdict-note.verdict-uncertain{
  background:rgba(167,139,250,.08);
  border-color:rgba(167,139,250,.25);
  color:#c7bddf;
}

.verdict-note.verdict-uncertain>span{
  color:#b9a4ff;
}

.counter-evidence{
  margin:0 0 15px;
  padding:12px 14px;
  border-radius:11px;
  background:rgba(52,211,153,.055);
  border:1px solid rgba(52,211,153,.18);
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}

.counter-evidence strong{
  display:block;
  margin-bottom:7px;
  color:var(--safe);
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.counter-evidence ul{
  padding-left:18px;
}

.counter-evidence li+li{
  margin-top:5px;
}

.scanning-placeholder{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px;
}

.scanning-placeholder-text{
  color:var(--green);
  font-size:13px;
  font-weight:600;
}

.scan-dots{
  display:flex;
  gap:5px;
}

.scan-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  animation:scanDot 1.1s ease-in-out infinite;
}

.scan-dots span:nth-child(2){
  animation-delay:.2s;
}

.scan-dots span:nth-child(3){
  animation-delay:.4s;
}

/* ═══ AI CHAT ═══ */
.ai-layout{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:.85fr 1.5fr;
  gap:22px;
  align-items:start;
}

.ai-config{
  border-radius:24px;
  padding:28px;
}

.ai-config h4{
  font-family:var(--font-body);
  font-size:16px;
  font-weight:800;
  margin-bottom:8px;
}

.ai-config p{
  color:var(--muted);
  font-size:13px;
  margin-bottom:16px;
  line-height:1.6;
}

.api-warning{
  color:var(--soft);
  font-size:12px;
  display:block;
  margin-top:8px;
}

.ai-status-block{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--glass-border);
}

.ai-status-block h5{
  font-family:var(--font-body);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  margin-bottom:12px;
}

.ai-status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  font-size:13px;
  color:var(--text);
}

.ai-status-row span:first-child{
  color:var(--muted);
}

.status-pill{
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:rgba(255,107,107,0.12);
  color:var(--danger);
}

.status-pill-warn{
  background:rgba(255,207,107,0.12);
  color:var(--warning);
}

.status-pill-safe{
  background:rgba(52,211,153,0.12);
  color:var(--safe);
}

.ai-chat{
  border-radius:24px;
  display:flex;
  flex-direction:column;
  height:600px;
  overflow:hidden;
}

.ai-chat-tabs{
  display:flex;
  border-bottom:1px solid var(--glass-border);
  flex-shrink:0;
}

.chat-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  padding:16px 10px;
  transition:color .25s,background .25s;
}

.chat-tab.active{
  color:var(--green);
  background:rgba(34,211,238,0.05);
  box-shadow:inset 0 -2px 0 var(--green);
}

.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.chat-bubble{
  display:flex;
  max-width:78%;
}

.chat-bubble-ai{
  align-self:flex-start;
}

.chat-bubble-user{
  align-self:flex-end;
  margin-left:auto;
}

.chat-bubble-inner{
  padding:13px 16px;
  border-radius:16px;
  font-size:13.5px;
  line-height:1.65;
}

.chat-bubble-ai .chat-bubble-inner{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--glass-border);
  color:var(--text);
  border-bottom-left-radius:4px;
}

.chat-bubble-user .chat-bubble-inner{
  background:var(--green);
  color:var(--bg);
  font-weight:600;
  border-bottom-right-radius:4px;
}

.chat-input-row{
  display:flex;
  gap:10px;
  padding:16px;
  border-top:1px solid var(--glass-border);
  flex-shrink:0;
}

.chat-input-row input{
  margin-bottom:0;
  flex:1;
}

.send-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:none;
  background:var(--green);
  color:var(--bg);
  font-size:16px;
  flex-shrink:0;
  transition:transform .2s ease;
}

.send-btn:hover{
  transform:scale(1.06);
}

.chat-upload-row{
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  color:var(--muted);
  font-size:13px;
}

.chat-upload-row input{
  display:none;
}

.upload-icon-sm{
  width:30px;
  height:30px;
  border-radius:8px;
  background:rgba(34,211,238,0.1);
  color:var(--green);
  display:grid;
  place-items:center;
  font-size:14px;
}

/* ═══ LEARN ROADMAP ═══ */
.learn-search-card{
  border-radius:20px;
  padding:22px;
}

.learn-search-card label{
  display:block;
  font-family:var(--font-mono);
  font-weight:600;
  margin-bottom:10px;
  color:var(--text);
  font-size:13px;
}

.learn-search-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}

.learn-search-row input{
  margin-bottom:0;
}

.learn-search-result{
  margin-top:14px;
  color:var(--muted);
  line-height:1.6;
  font-size:13.5px;
}

.search-result-item{
  padding:13px;
  border-radius:14px;
  border:1px solid var(--glass-border);
  background:rgba(34,211,238,0.04);
  margin-top:10px;
}

.search-result-item strong{
  color:var(--text);
}

.search-result-item button{
  margin-top:9px;
}

.roadmap{
  max-width:880px;
  margin:36px auto 0;
  position:relative;
  padding-left:34px;
}

.roadmap::before{
  content:'';
  position:absolute;
  left:12px;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(
    180deg,
    var(--green-dim),
    transparent
  );
}

.rm-module{
  margin-bottom:44px;
}

.rm-module-head{
  padding:16px 0 14px;
}

.rm-module-head span{
  color:var(--green);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:1px;
}

.rm-module-head h2{
  font-family:var(--font-mono);
  font-size:clamp(19px,2vw,26px);
  font-weight:700;
  margin-top:4px;
}

.rm-nodes{
  display:grid;
  gap:12px;
}

.rm-node{
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .3s,transform .3s;
}

.rm-node:hover{
  transform:translateX(3px);
  border-color:var(--glass-border-strong);
}

.rm-node.expanded{
  border-color:rgba(34,211,238,0.4);
}

.rm-node-info{
  padding:18px 22px;
}

.rm-node-info h3{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
}

.rm-node-info p{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.rm-node-expand{
  max-height:0;
  overflow:hidden;
  transition:
    max-height .5s cubic-bezier(.34,1.56,.64,1),
    padding .3s;
  padding:0 22px;
}

.rm-node.expanded .rm-node-expand{
  max-height:600px;
  padding:0 22px 22px;
}

.rm-lesson,
.rm-example,
.rm-tip{
  padding:13px;
  border-radius:12px;
  margin-top:10px;
  line-height:1.65;
  font-size:13.5px;
  color:var(--text);
}

.rm-lesson{
  background:rgba(34,211,238,0.04);
  border:1px solid var(--glass-border);
}

.rm-example{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
}

.rm-tip{
  background:rgba(34,211,238,0.07);
  border:1px solid rgba(34,211,238,0.2);
}

.rm-lesson strong,
.rm-example strong,
.rm-tip strong{
  color:var(--green);
}

/* ═══ PRICING ═══ */
.section-head{
  text-align:center;
  max-width:900px;
  margin:0 auto 34px;
}

.section-head h1{
  font-family:var(--font-mono);
  font-size:clamp(28px,2.8vw,44px);
  letter-spacing:-0.5px;
}

.section-head p{
  margin:0 auto;
  font-size:15px;
  color:var(--muted);
}

.pricing-toggle-wrap{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
}

.pricing-toggle{
  display:inline-flex;
  position:relative;
  padding:4px;
  border-radius:999px;
  gap:2px;
}

.toggle-option{
  position:relative;
  z-index:2;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  padding:9px 20px;
  border-radius:999px;
  transition:color .3s ease;
  width:100px;
  text-align:center;
}

.toggle-option.active{
  color:var(--bg);
}

.save-tag{
  background:rgba(52,211,153,0.12);
  color:var(--safe);
  font-size:11px;
  font-family:var(--font-mono);
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(52,211,153,0.3);
  white-space:nowrap;
}

.toggle-thumb{
  position:absolute;
  top:4px;
  left:4px;
  height:calc(100% - 8px);
  width:100px;
  background:var(--green);
  border-radius:999px;
  z-index:1;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
  box-shadow:0 0 20px rgba(34,211,238,0.4);
}

.pricing-toggle[data-cycle="yearly"] .toggle-thumb{
  transform:translateX(100px);
}

.pricing-grid{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.price-card{
  border-radius:22px;
  padding:26px;
  transition:transform .3s;
}

.price-card h3{
  font-family:var(--font-mono);
  color:var(--muted);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
}

.price-card h2{
  font-family:var(--font-mono);
  font-size:34px;
  margin-bottom:10px;
}

.price-card h2 span{
  font-size:15px;
  color:var(--muted);
}

.price-card p{
  color:var(--muted);
  line-height:1.6;
  margin-bottom:16px;
  font-size:14px;
}

.price-card ul{
  list-style:none;
  display:grid;
  gap:11px;
  margin-bottom:22px;
  color:var(--text);
  font-size:13.5px;
}

.price-card li::before{
  content:"✓ ";
  color:var(--green);
}

.featured-price{
  position:relative;
  border-color:rgba(34,211,238,0.4);
  box-shadow:0 0 50px rgba(34,211,238,0.1);
}

.popular-ribbon{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:var(--bg);
  font-family:var(--font-body);
  font-size:11px;
  font-weight:800;
  padding:6px 16px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(34,211,238,0.4);
}

/* ═══ ABOUT ═══ */
.about-top{
  text-align:center;
  margin-bottom:32px;
}

.fetch-panel{
  max-width:640px;
  margin:0 auto 40px;
  border-radius:16px;
}

.fetch-body{
  padding:22px;
  font-family:var(--font-mono);
  font-size:13.5px;
  display:grid;
  gap:11px;
}

.fetch-line{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--text);
}

.fetch-key{
  color:var(--muted);
}

.safe-text{
  color:var(--safe);
}

.about-grid{
  max-width:1140px;
  margin:0 auto 32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.about-block{
  padding:26px;
  border-radius:20px;
  transition:transform .3s;
}

.about-block h2{
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--green);
}

.about-block p{
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}

.about-values{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.about-value{
  text-align:center;
  padding:26px 18px;
  border-radius:18px;
  transition:transform .3s;
}

.av-icon{
  font-size:20px;
  color:var(--green);
  margin-bottom:12px;
}

.about-value h3{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  margin-bottom:8px;
}

.about-value p{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}

/* ═══ AUTH MODAL ═══ */
.modal{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.modal.show{
  display:flex;
}

.modal-card{
  width:min(420px,100%);
  border-radius:22px;
  padding:30px;
  position:relative;
  animation:modalSlide .3s ease both;
}

.close-modal{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.02);
  border-radius:50%;
  color:var(--text);
  font-size:20px;
}

.auth-logo{
  text-align:center;
  margin-bottom:18px;
}

.auth-logo .brand-mark{
  font-size:34px;
}

.auth-tabs{
  display:flex;
  gap:0;
  margin-bottom:22px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--glass-border);
}

.auth-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  padding:11px;
}

.auth-tab.active{
  background:rgba(34,211,238,0.1);
  color:var(--green);
}

.auth-form{
  display:none;
}

.active-auth-form{
  display:block;
}

.auth-form label{
  display:block;
  margin-bottom:7px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
}

.modal-card small{
  color:var(--soft);
  display:block;
  text-align:center;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11px;
}

.social-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  color:var(--soft);
  font-size:12px;
}

.social-divider::before,
.social-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--glass-border);
}

.social-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.social-btn{
  padding:11px;
  border-radius:12px;
  color:var(--text);
  font-size:13px;
  font-weight:600;
}

.social-btn:hover{
  border-color:var(--glass-border-strong);
}

.safe{color:var(--safe)}
.warning{color:var(--warning)}
.danger{color:var(--danger)}

/* Footer */
footer{
  width:min(1500px,calc(100% - 48px));
  margin:26px auto 22px;
  text-align:center;
  color:var(--soft);
  font-family:var(--font-mono);
  font-size:12.5px;
}

/* ═══ LOADER ═══ */
.loader-screen{
  position:fixed;
  inset:0;
  z-index:500;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity .5s,visibility .5s;
  gap:26px;
}

.loader-screen.hide{
  opacity:0;
  visibility:hidden;
}

.loader-term{
  width:320px;
}

.loader-dots::after{
  content:'';
  animation:loaderDots 1.2s steps(4) infinite;
}

.loading-bar{
  width:280px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
  position:relative;
}

.loading-progress{
  width:0;
  height:100%;
  background:var(--green);
  border-radius:inherit;
  animation:loadProgress 1.5s ease forwards;
  box-shadow:0 0 12px var(--green);
}

/* ═══ ANIMATIONS ═══ */
@keyframes topBarShift{
  0%{background-position:0% 0}
  100%{background-position:200% 0}
}

@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-40px) scale(1.08)}
  66%{transform:translate(-20px,20px) scale(0.95)}
}

@keyframes loadProgress{
  0%{width:0}
  100%{width:100%}
}

@keyframes loaderDots{
  to{content:'....'}
}

@keyframes pageFade{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes scanDot{
  0%,100%{
    opacity:.25;
    transform:scale(.75);
  }
  50%{
    opacity:1;
    transform:scale(1.2);
  }
}

@keyframes reportReveal{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes modalSlide{
  from{
    opacity:0;
    transform:scale(.96) translateY(10px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

@keyframes btnSpin{
  to{transform:rotate(360deg)}
}

@keyframes cursorBlink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

@keyframes termLineIn{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Cursor glow */
.cursor-glow{
  position:absolute;
  width:460px;
  height:460px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(34,211,238,0.14),
    transparent 70%
  );
  pointer-events:none;
  transform:translate(-50%,-50%);
  left:0;
  top:0;
  opacity:0;
  transition:opacity .5s ease;
  z-index:0;
}

.hero.glow-active .cursor-glow{
  opacity:1;
}

/* Performance */
button,
a,
input,
textarea,
label{
  touch-action:manipulation;
}

img{
  max-width:100%;
  height:auto;
}

.why-choose,
.wow-section,
.how-it-works,
.what-we-check,
.recent-scans,
.pricing-grid,
.about-values,
.roadmap{
  content-visibility:auto;
  contain-intrinsic-size:1px 700px;
}

.detect-panel:not(.active),
.page:not(.active-page){
  content-visibility:hidden;
}

/* ═══════════════════════════════════════════════════════
   GHOSTSCAN
   ═══════════════════════════════════════════════════════ */

:root{
  --ghost:#45f579;
  --ghost-bright:#b8ffcb;
  --ghost-dark:#07351f;
  --ghost-soft:rgba(69,245,121,.12);
  --ghost-border:rgba(69,245,121,.28);
  --ghost-panel:#07111d;
  --ghost-panel-2:#0a1725;
}

.ghost-page{
  padding:28px 0 40px;
}

.ghost-app{
  position:relative;
  min-height:720px;
  border:1px solid rgba(77,119,151,.18);
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 72% 48%,
      rgba(69,245,121,.1),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #06101c 0%,
      #040b14 60%,
      #06101c 100%
    );
  box-shadow:0 30px 90px rgba(0,0,0,.42);
}

.ghost-app::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(
      rgba(69,245,121,.026) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(69,245,121,.026) 1px,
      transparent 1px
    );
  background-size:45px 45px;
  mask-image:radial-gradient(
    circle at 70% 45%,
    black,
    transparent 64%
  );
  opacity:.58;
}

.ghost-hidden{
  display:none!important;
}

.ghost-landing{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  min-height:720px;
  align-items:center;
  padding:58px 48px;
  gap:42px;
}

.ghost-hero-copy{
  position:relative;
  z-index:4;
  max-width:665px;
}

.ghost-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  margin-bottom:20px;
}

.ghost-kicker span{
  padding:5px 9px;
  border:1px solid rgba(69,245,121,.55);
  border-radius:7px;
  background:rgba(69,245,121,.08);
  font-size:10px;
  letter-spacing:.07em;
}

.ghost-hero-copy h1{
  font-family:var(--font-body);
  font-size:clamp(43px,4.1vw,68px);
  line-height:1.03;
  letter-spacing:-2.5px;
  margin-bottom:22px;
  font-weight:800;
}

.ghost-hero-copy h1 strong{
  color:var(--text);
  text-shadow:0 0 35px rgba(69,245,121,.15);
}

.ghost-hero-copy>p{
  color:#b6c2d1;
  max-width:630px;
  line-height:1.75;
  font-size:16px;
}

.ghost-input-shell{
  margin-top:30px;
  padding:8px;
  border:1px solid rgba(97,141,174,.33);
  border-radius:15px;
  background:rgba(6,16,28,.86);
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    0 0 30px rgba(69,245,121,.06);
}

.ghost-input-row{
  display:flex;
  gap:9px;
}

.ghost-input-row input{
  flex:1;
  min-width:0;
  height:51px;
  border:none;
  background:transparent;
  color:var(--text);
  padding:0 14px;
  font-size:15px;
  outline:none;
  margin:0;
  box-shadow:none;
}

.ghost-input-row input::placeholder{
  color:#718399;
}

.ghost-primary-btn{
  height:51px;
  border:none;
  border-radius:10px;
  padding:0 22px;
  background:linear-gradient(
    120deg,
    var(--ghost),
    #71ffa0
  );
  color:#032114;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:800;
  box-shadow:0 0 24px rgba(69,245,121,.26);
  transition:.2s transform,.2s box-shadow;
  white-space:nowrap;
}

.ghost-primary-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 35px rgba(69,245,121,.4);
}

.ghost-primary-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

.ghost-upload-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px 3px;
  color:#61768b;
  font-size:11px;
}

.ghost-upload-btn{
  border:none;
  background:transparent;
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  padding:3px 0;
}

.ghost-upload-row small{
  margin-left:auto;
  color:#566a7e;
}

.ghost-helper{
  margin-top:13px!important;
  font-size:12.5px!important;
  color:#7f91a5!important;
}

.ghost-feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
  margin-top:34px;
}

.ghost-feature-strip>div{
  min-height:80px;
  padding:17px 15px;
  background:linear-gradient(
    145deg,
    rgba(12,29,45,.9),
    rgba(7,18,30,.78)
  );
  border:1px solid rgba(77,119,151,.17);
  display:grid;
  grid-template-columns:28px 1fr;
  grid-template-rows:auto auto;
  column-gap:8px;
  align-content:center;
}

.ghost-feature-strip>div:first-child{
  border-radius:12px 0 0 12px;
}

.ghost-feature-strip>div:last-child{
  border-radius:0 12px 12px 0;
}

.ghost-feature-strip span{
  grid-row:1/3;
  color:var(--ghost);
  font-size:20px;
  align-self:center;
}

.ghost-feature-strip strong{
  font-size:12px;
}

.ghost-feature-strip small{
  color:#708398;
  font-size:10px;
  margin-top:4px;
}

.ghost-service-line{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  color:#7890a5;
  font-family:var(--font-mono);
  font-size:11px;
}

.ghost-service-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffcf6b;
  box-shadow:0 0 10px #ffcf6b;
}

.ghost-service-line.online .ghost-service-dot{
  background:var(--ghost);
  box-shadow:0 0 11px var(--ghost);
}

.ghost-service-line.offline .ghost-service-dot{
  background:#ff6b6b;
  box-shadow:0 0 11px #ff6b6b;
}

.ghost-hero-art{
  position:relative;
  min-height:520px;
  display:grid;
  place-items:center;
  perspective:1100px;
}

.ghost-window-stack,
.ghost-window-main{
  position:absolute;
  width:min(470px,86%);
  height:340px;
  border:1px solid rgba(69,245,121,.36);
  border-radius:17px;
  background:linear-gradient(
    135deg,
    rgba(17,46,62,.72),
    rgba(5,17,28,.78)
  );
  box-shadow:0 25px 65px rgba(0,0,0,.34);
}

.stack-back{
  transform:translate(74px,-34px) rotateY(-7deg);
  opacity:.42;
}

.stack-mid{
  transform:translate(36px,-17px) rotateY(-4deg);
  opacity:.66;
}

.ghost-window-main{
  position:relative;
  overflow:hidden;
  transform:rotateY(-4deg);
  box-shadow:
    0 30px 75px rgba(0,0,0,.42),
    0 0 55px rgba(69,245,121,.13);
}

.ghost-window-main::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at center,
      rgba(69,245,121,.18),
      transparent 48%
    ),
    linear-gradient(
      90deg,
      transparent 49.6%,
      rgba(69,245,121,.15) 50%,
      transparent 50.4%
    ),
    linear-gradient(
      transparent 49.6%,
      rgba(69,245,121,.15) 50%,
      transparent 50.4%
    );
  background-size:auto,48px 48px,48px 48px;
  opacity:.58;
}

.ghost-window-bar{
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 17px;
  border-bottom:1px solid rgba(69,245,121,.18);
  background:rgba(4,13,22,.64);
}

.ghost-window-bar span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#57ff8d;
  box-shadow:0 0 10px rgba(87,255,141,.65);
}

.ghost-mascot{
  position:absolute;
  left:50%;
  top:51%;
  width:176px;
  transform:translate(-50%,-50%);
  animation:ghostFloat 4s ease-in-out infinite;
}

.ghost-orb-ring{
  position:absolute;
  left:50%;
  top:53%;
  border-radius:50%;
  border:1px solid rgba(69,245,121,.25);
  transform:translate(-50%,-50%);
}

.ring-one{
  width:265px;
  height:265px;
  animation:ghostRing 5s ease-out infinite;
}

.ring-two{
  width:190px;
  height:190px;
  animation:ghostRing 5s 2.5s ease-out infinite;
}

.ghost-scan-beam{
  position:absolute;
  left:9%;
  right:9%;
  height:2px;
  top:45%;
  background:linear-gradient(
    90deg,
    transparent,
    var(--ghost),
    transparent
  );
  box-shadow:0 0 18px var(--ghost);
  animation:ghostBeam 3.2s ease-in-out infinite;
}

.ghost-art-label{
  position:absolute;
  right:16px;
  bottom:14px;
  padding:5px 8px;
  border:1px solid rgba(69,245,121,.34);
  border-radius:6px;
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.08em;
}

.ghost-art-warning{
  position:absolute;
  left:2%;
  top:11%;
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  border:1px solid rgba(112,171,198,.42);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  color:#8bb9cd;
  font-family:var(--font-mono);
  font-size:16px;
  padding-top:12px;
  filter:drop-shadow(0 0 18px rgba(69,245,121,.18));
}

@keyframes ghostFloat{
  0%,100%{
    transform:translate(-50%,-50%) translateY(0);
  }
  50%{
    transform:translate(-50%,-50%) translateY(-12px);
  }
}

@keyframes ghostRing{
  0%{
    opacity:.85;
    transform:translate(-50%,-50%) scale(.65);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.3);
  }
}

@keyframes ghostBeam{
  0%,100%{
    top:30%;
    opacity:.25;
  }
  50%{
    top:77%;
    opacity:1;
  }
}

/* Workspace */
.ghost-workspace{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:720px;
  background:#050d17;
}

.ghost-side-panel{
  display:flex;
  flex-direction:column;
  padding:24px 14px;
  border-right:1px solid rgba(89,128,158,.17);
  background:linear-gradient(180deg,#06111d,#040b13);
}

.ghost-back-home,
.ghost-back-results{
  border:none;
  background:transparent;
  color:#a0b0c1;
  font-family:var(--font-mono);
  font-size:11px;
  text-align:left;
  padding:6px 4px;
}

.ghost-side-brand{
  display:flex;
  align-items:center;
  gap:9px;
  margin:24px 7px 28px;
  font-weight:800;
}

.ghost-side-brand>div{
  font-size:16px;
}

.ghost-side-brand small{
  display:block;
  color:var(--ghost);
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ghost-side-menu{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ghost-side-menu button{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:43px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#8193a6;
  padding:0 12px;
  font-size:12px;
  text-align:left;
}

.ghost-side-menu button:hover{
  color:var(--text);
  background:rgba(255,255,255,.025);
}

.ghost-side-menu button.active{
  color:var(--ghost);
  border-color:rgba(69,245,121,.16);
  background:rgba(69,245,121,.075);
}

.ghost-side-menu em{
  margin-left:auto;
  color:var(--ghost);
  font-size:7px;
  font-style:normal;
  border:1px solid rgba(69,245,121,.35);
  padding:2px 4px;
  border-radius:5px;
}

.ghost-private-note{
  margin-top:auto;
  display:flex;
  gap:9px;
  padding:12px;
  border:1px solid rgba(69,245,121,.14);
  border-radius:10px;
  background:rgba(69,245,121,.045);
  color:#6e8496;
}

.ghost-private-note>span{
  color:var(--ghost);
}

.ghost-private-note p{
  font-size:9.5px;
  line-height:1.5;
}

.ghost-private-note strong{
  display:block;
  color:#9fb2c1;
  font-size:10px;
}

.ghost-main-panel{
  min-width:0;
  padding:30px;
  background:
    radial-gradient(
      circle at 45% 5%,
      rgba(69,245,121,.045),
      transparent 30%
    ),
    #050d17;
}

.ghost-topbar,
.ghost-results-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.ghost-eyebrow{
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
}

.ghost-topbar h2,
.ghost-results-head h2{
  font-size:25px;
  margin:5px 0 5px;
}

.ghost-topbar p,
.ghost-results-head p{
  color:#71869a;
  font-size:12px;
}

.ghost-cancel-btn,
.ghost-clear-history{
  border:1px solid rgba(255,107,107,.28);
  border-radius:8px;
  background:rgba(255,107,107,.07);
  color:#ff8b8b;
  padding:8px 13px;
  font-family:var(--font-mono);
  font-size:10px;
}

.ghost-target-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:20px 0;
  padding:13px 15px;
  border:1px solid rgba(94,136,167,.22);
  border-radius:10px;
  background:rgba(10,24,38,.78);
  color:#c8d2dd;
  font-family:var(--font-mono);
  font-size:11px;
  overflow:hidden;
}

.ghost-target-bar span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ghost-target-bar button{
  border:none;
  background:transparent;
  color:#8195a7;
}

.ghost-stepper{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin:26px 8px 28px;
}

.ghost-step{
  position:relative;
  text-align:center;
  color:#607487;
}

.ghost-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:58%;
  right:-42%;
  top:17px;
  height:1px;
  background:#203448;
}

.ghost-step span{
  position:relative;
  z-index:2;
  width:35px;
  height:35px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #2f465a;
  background:#081522;
  color:#71879a;
  font-family:var(--font-mono);
  font-size:10px;
}

.ghost-step small{
  font-size:9.5px;
}

.ghost-step.active span,
.ghost-step.done span{
  border-color:var(--ghost);
  color:var(--ghost);
  box-shadow:0 0 18px rgba(69,245,121,.18);
}

.ghost-step.done span{
  background:var(--ghost);
  color:#032114;
}

.ghost-step.done:not(:last-child)::after{
  background:linear-gradient(
    90deg,
    var(--ghost),
    rgba(69,245,121,.28)
  );
}

.ghost-step.active small,
.ghost-step.done small{
  color:#adc0cd;
}

.ghost-live-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(250px,.65fr);
  gap:16px;
}

.ghost-browser-preview,
.ghost-live-log,
.ghost-score-card,
.ghost-findings-card,
.ghost-actions-card,
.ghost-limitations-card,
.ghost-replay-card,
.ghost-screenshot-card,
.ghost-tech-card{
  border:1px solid rgba(93,137,168,.2);
  border-radius:12px;
  background:linear-gradient(
    145deg,
    rgba(10,25,40,.92),
    rgba(6,17,29,.92)
  );
  box-shadow:0 14px 38px rgba(0,0,0,.2);
}

.ghost-browser-preview{
  overflow:hidden;
  min-height:370px;
}

.ghost-preview-chrome{
  display:flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 11px;
  border-bottom:1px solid rgba(88,129,159,.19);
  background:#081522;
}

.ghost-preview-chrome>span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#456071;
}

.ghost-preview-chrome>div{
  margin-left:7px;
  flex:1;
  border:1px solid rgba(88,129,159,.15);
  border-radius:5px;
  background:#06101b;
  padding:5px 8px;
  color:#607589;
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ghost-preview-stage{
  position:relative;
  min-height:332px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(145deg,#0c1d2f,#081420);
}

.ghost-preview-stage img{
  width:100%;
  height:100%;
  min-height:332px;
  object-fit:contain;
  background:#0a1520;
}

.ghost-preview-loader{
  text-align:center;
  color:#99aebd;
}

.ghost-preview-loader strong,
.ghost-preview-loader small{
  display:block;
}

.ghost-preview-loader strong{
  margin-top:14px;
  font-size:13px;
}

.ghost-preview-loader small{
  margin-top:6px;
  color:#63788b;
  font-size:9px;
}

.ghost-radar{
  width:72px;
  height:72px;
  margin:auto;
  border-radius:50%;
  border:1px solid rgba(69,245,121,.35);
  background:conic-gradient(
    from 0deg,
    rgba(69,245,121,.36),
    transparent 24%
  );
  animation:ghostRadar 1.6s linear infinite;
  box-shadow:0 0 22px rgba(69,245,121,.09);
}

@keyframes ghostRadar{
  to{transform:rotate(360deg)}
}

.ghost-live-log{
  min-height:370px;
  padding:17px;
}

.ghost-log-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:12px;
  border-bottom:1px solid rgba(90,131,161,.15);
}

.ghost-log-head h3{
  font-size:13px;
}

.ghost-log-head span{
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-log-list{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-top:14px;
  max-height:305px;
  overflow:auto;
}

.ghost-log-item{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:9px;
  font-family:var(--font-mono);
  font-size:8.7px;
  line-height:1.45;
  color:#8fa1b0;
}

.ghost-log-item time{
  color:#52687a;
}

.ghost-log-item.warn p{
  color:#ffcf6b;
}

.ghost-log-item.danger p{
  color:#ff8585;
}

.ghost-log-item.safe p{
  color:#72f99a;
}

.ghost-progress-foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  color:#607487;
  font-size:9.5px;
}

.ghost-progress-foot span{
  color:var(--ghost);
}

/* Results */
.ghost-result-actions{
  display:flex;
  gap:8px;
}

.ghost-result-actions button{
  border:1px solid rgba(101,144,176,.24);
  border-radius:8px;
  background:#081522;
  color:#9eb0bf;
  padding:8px 12px;
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-result-alert{
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:13px;
  margin-top:20px;
  padding:16px;
  border:1px solid rgba(167,139,250,.28);
  border-radius:11px;
  background:linear-gradient(
    90deg,
    rgba(167,139,250,.11),
    rgba(26,21,45,.24)
  );
  color:#cfcae7;
}

.ghost-result-alert.high,
.ghost-result-alert.critical{
  border-color:rgba(255,107,107,.45);
  background:linear-gradient(
    90deg,
    rgba(255,107,107,.14),
    rgba(48,13,18,.28)
  );
  color:#ffd0d0;
}

.ghost-result-alert.medium{
  border-color:rgba(255,207,107,.42);
  background:linear-gradient(
    90deg,
    rgba(255,207,107,.12),
    rgba(40,31,11,.25)
  );
  color:#ffe7a9;
}

.ghost-result-alert.low{
  border-color:rgba(69,245,121,.31);
  background:linear-gradient(
    90deg,
    rgba(69,245,121,.09),
    rgba(8,39,23,.2)
  );
  color:#c7ffd7;
}

.ghost-alert-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:currentColor;
  color:#06101b;
  font-size:22px;
  font-weight:900;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  padding-top:8px;
}

.ghost-result-alert h3{
  font-size:17px;
  margin-bottom:3px;
}

.ghost-result-alert p{
  font-size:11px;
  line-height:1.5;
  color:inherit;
  opacity:.82;
}

.ghost-result-alert>span{
  font-family:var(--font-mono);
  font-size:8px;
  border:1px solid currentColor;
  border-radius:6px;
  padding:6px 8px;
  white-space:nowrap;
}

.ghost-result-tabs{
  display:flex;
  gap:5px;
  margin:18px 0 14px;
  padding:4px;
  border:1px solid rgba(95,137,168,.2);
  border-radius:10px;
  background:rgba(8,21,34,.72);
  width:max-content;
  max-width:100%;
  overflow:auto;
}

.ghost-result-tabs button,
.ghost-screen-tabs button{
  border:none;
  border-radius:7px;
  background:transparent;
  color:#71879a;
  padding:8px 13px;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.ghost-result-tabs button.active,
.ghost-screen-tabs button.active{
  background:rgba(69,245,121,.1);
  color:var(--ghost);
}

.ghost-result-tab{
  display:none;
}

.ghost-result-tab.active{
  display:block;
  animation:pageFade .3s ease;
}

.ghost-overview-grid{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:14px;
}

.ghost-score-card,
.ghost-findings-card,
.ghost-actions-card,
.ghost-limitations-card,
.ghost-replay-card,
.ghost-screenshot-card,
.ghost-tech-card{
  padding:18px;
}

.ghost-score-card h3,
.ghost-findings-card h3,
.ghost-actions-card h3,
.ghost-limitations-card h3,
.ghost-tech-card h3{
  font-size:12px;
  margin-bottom:14px;
}

.ghost-score-ring{
  position:relative;
  width:130px;
  height:130px;
  margin:8px auto 12px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:conic-gradient(
    #a78bfa var(--score,0%),
    #15283a 0
  );
  box-shadow:0 0 24px rgba(167,139,250,.12);
}

.ghost-score-ring::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:#07121f;
}

.ghost-score-ring span,
.ghost-score-ring small{
  position:relative;
  z-index:2;
}

.ghost-score-ring span{
  font-size:37px;
  font-weight:800;
}

.ghost-score-ring small{
  position:absolute;
  top:78px;
  font-size:9px;
  color:#74889a;
}

.ghost-score-card>p{
  text-align:center;
  color:#8fa1b0;
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-findings-list,
.ghost-actions-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ghost-finding,
.ghost-action{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:8px;
  color:#93a5b4;
  font-size:10.5px;
  line-height:1.55;
}

.ghost-finding span,
.ghost-action span{
  color:var(--ghost);
  font-weight:800;
}

.ghost-finding.danger span{
  color:#ff6b6b;
}

.ghost-finding.warn span{
  color:#ffcf6b;
}

.ghost-finding strong,
.ghost-action strong{
  display:block;
  color:#d8e1e8;
  font-size:10.5px;
}

.ghost-actions-card,
.ghost-limitations-card{
  margin-top:14px;
}

.ghost-limitations-card{
  border-color:rgba(167,139,250,.22);
  background:rgba(167,139,250,.045);
}

.ghost-limitations-card ul{
  padding-left:18px;
  color:#a9a0c3;
  font-size:10.5px;
  line-height:1.7;
}

.ghost-section-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  margin-bottom:16px;
}

.ghost-section-title h3{
  font-size:15px;
}

.ghost-section-title p{
  color:#71869a;
  font-size:10px;
  margin-top:4px;
}

.ghost-section-title>span{
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-replay-track{
  display:flex;
  align-items:stretch;
  gap:28px;
  overflow-x:auto;
  padding:4px 3px 12px;
}

.ghost-replay-node{
  position:relative;
  flex:0 0 155px;
  min-height:155px;
  padding:13px;
  border:1px solid rgba(92,134,165,.2);
  border-radius:9px;
  background:#081522;
}

.ghost-replay-node:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-22px;
  top:50%;
  color:#8ba0af;
}

.ghost-replay-node small{
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:8px;
}

.ghost-replay-node strong{
  display:block;
  margin:11px 0 7px;
  font-size:10px;
  overflow-wrap:anywhere;
}

.ghost-replay-node p{
  color:#6e8395;
  font-size:8.5px;
  line-height:1.5;
}

.ghost-replay-node img{
  width:100%;
  height:74px;
  object-fit:cover;
  border-radius:5px;
  margin-top:8px;
  background:#0b1926;
}

.ghost-screenshot-card{
  margin-top:14px;
}

.ghost-screen-tabs{
  display:flex;
  gap:4px;
  margin-bottom:11px;
}

.ghost-screen-frame{
  position:relative;
  min-height:380px;
  display:grid;
  place-items:center;
  border:1px solid rgba(91,133,164,.17);
  border-radius:9px;
  background:#040b12;
  overflow:hidden;
}

.ghost-screen-frame img{
  display:block;
  max-width:100%;
  max-height:650px;
  object-fit:contain;
}

.ghost-no-shot{
  position:absolute;
  color:#64798b;
  font-family:var(--font-mono);
  font-size:10px;
}

.ghost-tech-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.ghost-tech-card ol,
.ghost-tech-card ul{
  padding-left:18px;
  color:#8fa2b1;
  font-size:9.5px;
  line-height:1.75;
}

.ghost-tech-card li{
  overflow-wrap:anywhere;
}

.ghost-tech-card li::marker{
  color:var(--ghost);
}

.ghost-tech-card dl{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px 12px;
  font-size:9.5px;
}

.ghost-tech-card dt{
  color:#5f7487;
}

.ghost-tech-card dd{
  color:#b0bfca;
  overflow-wrap:anywhere;
}

.ghost-form-item{
  padding:10px 0;
  border-bottom:1px solid rgba(91,133,164,.12);
  font-size:9.5px;
  color:#8fa2b1;
}

.ghost-form-item:last-child{
  border-bottom:none;
}

.ghost-form-item strong{
  display:block;
  color:#d3dce3;
  margin-bottom:4px;
}

.ghost-reputation-badge{
  display:inline-flex;
  padding:5px 8px;
  border-radius:6px;
  background:rgba(69,245,121,.08);
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:9px;
}

.ghost-reputation-badge.listed{
  background:rgba(255,107,107,.11);
  color:#ff8585;
}

.ghost-tech-card p{
  color:#7b8fa0;
  font-size:9.5px;
  line-height:1.65;
  margin-top:9px;
}

.ghost-history-list{
  display:grid;
  gap:10px;
  margin-top:20px;
}

.ghost-history-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:15px;
  align-items:center;
  padding:14px 16px;
  border:1px solid rgba(92,134,165,.18);
  border-radius:10px;
  background:#081522;
}

.ghost-history-item strong{
  display:block;
  font-size:11px;
  overflow-wrap:anywhere;
}

.ghost-history-item small{
  display:block;
  color:#657a8d;
  margin-top:5px;
  font-size:9px;
}

.ghost-history-score{
  font-family:var(--font-mono);
  font-size:16px;
  color:var(--ghost);
}

.ghost-history-empty{
  padding:60px 20px;
  text-align:center;
  color:#63788a;
  border:1px dashed rgba(92,134,165,.22);
  border-radius:12px;
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1250px){
  .nav-tabs{
    gap:18px;
  }

  .ghost-landing{
    padding:46px 32px;
  }

  .ghost-feature-strip{
    grid-template-columns:1fr 1fr;
  }

  .ghost-feature-strip>div:first-child{
    border-radius:12px 0 0 0;
  }

  .ghost-feature-strip>div:nth-child(2){
    border-radius:0 12px 0 0;
  }

  .ghost-feature-strip>div:nth-child(3){
    border-radius:0 0 0 12px;
  }

  .ghost-feature-strip>div:last-child{
    border-radius:0 0 12px 0;
  }
}

@media(max-width:1150px){
  .hero,
  .feature-hero,
  .learn-hero{
    grid-template-columns:1fr;
  }

  .hero-visual{
    min-height:auto;
    margin-top:30px;
  }

  .cybernet-grid,
  .pricing-grid,
  .about-grid{
    grid-template-columns:1fr;
  }

  .about-values{
    grid-template-columns:1fr 1fr;
  }

  .why-choose-grid{
    grid-template-columns:1fr 1fr;
  }

  .report-body{
    grid-template-columns:1fr;
  }

  .wow-stats{
    grid-template-columns:1fr;
  }

  .globe-shield-wrap{
    width:360px;
    height:360px;
  }

  .globe-3d-pos{
    width:300px;
    height:300px;
  }
}

@media(max-width:1040px){
  .ghost-landing{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .ghost-hero-art{
    min-height:430px;
  }

  .ghost-workspace{
    grid-template-columns:1fr;
  }

  .ghost-side-panel{
    display:none;
  }

  .ghost-main-panel{
    padding:24px;
  }

  .ghost-tech-grid{
    grid-template-columns:1fr;
  }

  .ghost-live-grid{
    grid-template-columns:1fr;
  }

  .ghost-live-log{
    min-height:auto;
  }

  .ghost-log-list{
    max-height:210px;
  }
}

@media(max-width:920px){
  .navbar{
    width:calc(100% - 26px);
  }

  .nav-tabs,
  .nav-actions{
    display:none;
  }

  .navbar.open{
    height:auto;
    align-items:flex-start;
    flex-direction:column;
    padding:18px;
  }

  .navbar.open .nav-tabs,
  .navbar.open .nav-actions{
    display:flex;
    flex-direction:column;
    width:100%;
    align-items:flex-start;
    padding-top:14px;
  }

  .navbar.open .nav-tabs{
    gap:6px;
  }

  .navbar.open .nav-link{
    width:100%;
    padding:11px 4px;
    text-align:left;
  }

  .navbar.open .nav-actions{
    gap:10px;
  }

  .mobile-menu{
    display:block;
    position:absolute;
    right:16px;
    top:14px;
  }

  main{
    width:calc(100% - 26px);
  }

  .page{
    padding:48px 4px 30px;
  }

  .hero-content h1,
  .section-head h1,
  .about-top h1,
  .feature-hero h1,
  .learn-hero h1{
    font-size:38px;
  }

  .brand-text{
    font-size:18px;
  }

  .brand-text small{
    font-size:8px;
    margin-left:5px;
    padding:2px 5px;
  }

  .hero-visual{
    display:flex;
    flex-direction:column;
  }

  .globe-shield-wrap{
    width:300px;
    height:300px;
  }

  .globe-3d-pos{
    width:250px;
    height:250px;
  }

  .hero-status-badge{
    width:150px;
    padding:10px 12px;
    animation-duration:8s;
  }

  .badge-threat{
    left:-2%;
  }

  .badge-secure{
    right:-2%;
  }

  .roadmap{
    padding-left:24px;
  }

  .roadmap::before{
    left:8px;
  }

  .about-values,
  .why-choose-grid{
    grid-template-columns:1fr;
  }

  .detect-panel-grid,
  .how-it-works,
  .ai-layout{
    grid-template-columns:1fr;
  }

  .what-we-check{
    grid-template-columns:1fr 1fr;
  }

  .ai-chat{
    height:480px;
  }

  .hero-stats-row{
    gap:16px;
  }

  .hero-stats-row div{
    padding-right:16px;
    margin-right:16px;
  }

  .social-buttons{
    grid-template-columns:1fr;
  }

  .glass{
    backdrop-filter:blur(12px) saturate(120%);
    -webkit-backdrop-filter:blur(12px) saturate(120%);
    box-shadow:
      0 6px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.03);
  }

  .tilt-card{
    will-change:auto;
    transform:none!important;
  }

  .cursor-glow{
    display:none!important;
  }

  .blur-orb{
    filter:blur(52px);
    opacity:.24;
  }

  .ticker-track{
    animation-duration:42s;
  }

  .globe-3d{
    animation-duration:34s;
  }

  .primary-btn:hover,
  .secondary-btn:hover,
  .login-btn:hover{
    transform:none;
  }
}

@media(max-width:720px){
  .ghost-page{
    padding-top:22px;
  }

  .ghost-app{
    border-radius:18px;
    min-height:0;
  }

  .ghost-landing{
    padding:34px 18px;
    gap:24px;
  }

  .ghost-hero-copy h1{
    font-size:clamp(38px,12vw,52px);
    letter-spacing:-1.7px;
  }

  .ghost-hero-copy>p{
    font-size:14px;
  }

  .ghost-input-row{
    flex-direction:column;
  }

  .ghost-primary-btn{
    width:100%;
  }

  .ghost-upload-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .ghost-upload-row small{
    width:100%;
    margin-left:0;
  }

  .ghost-feature-strip{
    grid-template-columns:1fr 1fr;
  }

  .ghost-feature-strip>div{
    min-height:72px;
    padding:13px 11px;
  }

  .ghost-hero-art{
    min-height:330px;
  }

  .ghost-window-stack,
  .ghost-window-main{
    height:260px;
    width:90%;
  }

  .ghost-mascot{
    width:128px;
  }

  .ghost-main-panel{
    padding:17px 12px;
  }

  .ghost-topbar,
  .ghost-results-head{
    flex-direction:column;
  }

  .ghost-cancel-btn{
    align-self:flex-end;
    margin-top:-42px;
  }

  .ghost-stepper{
    overflow-x:auto;
    grid-template-columns:repeat(5,105px);
    padding-bottom:5px;
    margin-inline:0;
  }

  .ghost-browser-preview{
    min-height:290px;
  }

  .ghost-preview-stage,
  .ghost-preview-stage img{
    min-height:252px;
  }

  .ghost-overview-grid{
    grid-template-columns:1fr;
  }

  .ghost-result-alert{
    grid-template-columns:40px 1fr;
  }

  .ghost-result-alert>span{
    grid-column:2;
  }

  .ghost-result-actions{
    width:100%;
  }

  .ghost-result-actions button{
    flex:1;
  }

  .ghost-score-ring{
    width:115px;
    height:115px;
  }

  .ghost-score-ring small{
    top:69px;
  }

  .ghost-screen-frame{
    min-height:250px;
  }
}

@media(max-width:700px){
  body::after{
    display:none;
  }

  #particleCanvas{
    display:none!important;
  }

  .aurora-sweep{
    display:none;
  }

  .grid-glow{
    opacity:.28;
    background-size:80px 80px;
  }

  .page{
    padding-top:32px;
  }

  .detect-main,
  .detect-side,
  .ai-config{
    padding:21px;
    border-radius:18px;
  }

  .detect-tabs{
    position:sticky;
    top:92px;
    z-index:20;
    overflow-x:auto;
    max-width:100%;
    scrollbar-width:none;
  }

  .detect-tabs::-webkit-scrollbar{
    display:none;
  }

  .detect-tab{
    min-width:125px;
    white-space:nowrap;
  }

  .result-box{
    overflow-wrap:anywhere;
  }

  .scan-report{
    padding:16px;
    content-visibility:visible;
  }

  .report-top-row{
    align-items:flex-start;
  }

  .score-display{
    margin-left:auto;
  }

  .ai-layout{
    gap:14px;
  }

  .ai-chat{
    height:min(68vh,610px);
    min-height:500px;
  }

  .chat-messages{
    overscroll-behavior:contain;
  }

  .chat-input-row input,
  .feature-textarea,
  .detect-main input{
    font-size:16px;
  }

  .hero{
    min-height:auto;
  }

  .hero-content{
    padding-top:8px;
  }

  .hero-title{
    font-size:clamp(36px,12vw,52px);
  }

  .wow-section{
    padding:30px 18px;
  }

  .blur-orb.orb-b,
  .blur-orb.orb-c,
  .globe-glow,
  .shield-pulse{
    display:none!important;
  }

  .background{
    contain:strict;
  }

  .glass{
    backdrop-filter:blur(8px) saturate(110%);
    -webkit-backdrop-filter:blur(8px) saturate(110%);
  }

  .reveal{
    transition-duration:.35s;
  }

  .ticker-track{
    animation:none;
    transform:none;
    overflow:hidden;
  }

  .ticker-track .ticker-item:nth-child(n+4){
    display:none;
  }

  .scan-ring-fill{
    transition-duration:.65s;
  }

  .home-quote,
  .wow-section,
  .detect-main,
  .detect-side,
  .recent-scans,
  .ai-chat,
  .ai-config{
    contain:layout paint style;
  }

  .feature-textarea{
    min-height:150px;
  }
}

@media(max-width:600px){
  .analysis-confidence{
    align-items:flex-start;
    flex-direction:column;
  }

  .analysis-confidence strong{
    text-align:left;
  }
}

@media(max-width:480px){
  main,
  .navbar{
    width:calc(100% - 18px);
  }

  .navbar{
    margin-top:9px;
    top:8px;
    min-height:62px;
    padding-inline:15px;
  }

  .page{
    padding-inline:0;
  }

  .feature-page-header{
    margin-bottom:20px;
    padding-inline:8px;
  }

  .detect-tabs{
    top:79px;
    border-radius:12px;
    scroll-snap-type:x proximity;
  }

  .detect-tab{
    scroll-snap-align:start;
  }

  .detect-main,
  .detect-side{
    padding:18px;
  }

  .real-upload-box{
    padding:26px 14px;
  }

  .report-top-row{
    gap:8px;
  }

  .risk-badge,
  .scam-type-tag{
    font-size:10px;
  }

  .score-display{
    font-size:23px;
  }

  .report-body{
    gap:16px;
  }

  .report-list{
    font-size:11.5px;
  }

  .ai-chat{
    height:72vh;
    min-height:520px;
    border-radius:18px;
  }

  .chat-bubble{
    max-width:92%;
  }

  .chat-input-row{
    padding:10px;
  }

  .send-btn{
    width:44px;
    height:44px;
    flex:0 0 44px;
  }

  .hero-visual{
    display:none;
  }

  .brand{
    gap:7px;
    font-size:16px;
  }

  .brand-mark{
    font-size:15px;
  }

  .brand-text small{
    letter-spacing:.04em;
  }

  .navbar.open .brand-text small{
    display:inline-flex;
  }

  .hero-status-badge{
    position:relative;
    inset:auto!important;
    width:100%;
    margin:6px 0;
  }

  .globe-shield-wrap{
    display:flex;
    flex-direction:column;
    height:auto;
    gap:14px;
  }

  .what-we-check{
    grid-template-columns:1fr;
  }

  .hero-stats-row{
    flex-direction:column;
    gap:14px;
  }

  .hero-stats-row div{
    border-right:none;
    padding-right:0;
    margin-right:0;
  }

  .ghost-feature-strip{
    grid-template-columns:1fr;
  }

  .ghost-feature-strip>div,
  .ghost-feature-strip>div:first-child,
  .ghost-feature-strip>div:nth-child(2),
  .ghost-feature-strip>div:nth-child(3),
  .ghost-feature-strip>div:last-child{
    border-radius:9px;
  }

  .ghost-hero-art{
    display:none;
  }

  .ghost-landing{
    padding:30px 14px;
  }

  .ghost-main-panel{
    padding:14px 9px;
  }

  .ghost-target-bar{
    font-size:9px;
  }

  .ghost-live-grid{
    gap:10px;
  }

  .ghost-result-tabs{
    width:100%;
  }

  .ghost-result-tabs button{
    flex:1;
  }

  .ghost-tech-card{
    padding:14px;
  }

  .ghost-result-alert{
    padding:13px;
  }

  .ghost-result-alert h3{
    font-size:15px;
  }

  .ghost-replay-node{
    flex-basis:135px;
  }

  .ghost-score-card,
  .ghost-findings-card,
  .ghost-actions-card,
  .ghost-limitations-card,
  .ghost-replay-card,
  .ghost-screenshot-card{
    padding:14px;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .reveal{
    transition:opacity .2s linear;
    transform:none;
  }

  .reveal.show{
    transform:none;
  }

  .tilt-card{
    transition:none;
  }

  .blur-orb,
  .aurora-sweep,
  .grid-glow,
  .globe-3d,
  .globe-glow,
  .shield-pulse,
  .hero-status-badge,
  .ghost-mascot,
  .ghost-orb-ring,
  .ghost-scan-beam,
  .ghost-radar{
    animation:none;
  }

  .active-page{
    animation:none;
  }

  .cursor-glow{
    display:none;
  }

  .page{
    transition:none!important;
    transform:none!important;
  }

  .ghost-primary-btn:hover{
    transform:none;
  }
}

@media(prefers-reduced-transparency:reduce){
  .glass{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(8,17,31,.94);
  }
}

@media(update:slow){
  .ticker-track,
  .globe-3d,
  .blur-orb,
  .aurora-sweep,
  .grid-glow,
  .hero-status-badge{
    animation:none!important;
  }

  #particleCanvas{
    display:none;
  }
}

/* Print GhostScan report */
@media print{
  body{
    background:#fff!important;
    color:#111!important;
  }

  .navbar,
  .background,
  #particleCanvas,
  footer,
  .ghost-side-panel,
  .ghost-result-actions,
  .ghost-result-tabs,
  .ghost-back-results{
    display:none!important;
  }

  .page{
    display:none!important;
  }

  .page#ghostscan{
    display:block!important;
    padding:0!important;
  }

  .ghost-app,
  .ghost-workspace,
  .ghost-main-panel{
    display:block!important;
    background:#fff!important;
    border:none!important;
    box-shadow:none!important;
  }

  .ghost-progress-view,
  .ghost-history-view{
    display:none!important;
  }

  .ghost-results-view{
    display:block!important;
  }

  .ghost-result-tab{
    display:block!important;
    margin-top:20px!important;
  }

  .ghost-result-alert,
  .ghost-score-card,
  .ghost-findings-card,
  .ghost-actions-card,
  .ghost-limitations-card,
  .ghost-replay-card,
  .ghost-screenshot-card,
  .ghost-tech-card{
    background:#fff!important;
    color:#111!important;
    border:1px solid #ccc!important;
    box-shadow:none!important;
  }

  .ghost-result-alert p,
  .ghost-section-title p,
  .ghost-tech-card p,
  .ghost-tech-card li,
  .ghost-tech-card dd,
  .ghost-finding,
  .ghost-action{
    color:#333!important;
  }

  .ghost-screen-frame{
    background:#fff!important;
  }
}

/* ═══ CYBERNET AI API KEY PANEL ═══ */
.api-key-label{
  display:block;
  margin:18px 0 8px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
}
.api-key-field{
  position:relative;
}
.api-key-field input{
  padding-right:72px;
  margin-bottom:12px;
}
.api-key-toggle{
  position:absolute;
  right:8px;
  top:7px;
  height:34px;
  padding:0 12px;
  border:1px solid var(--glass-border);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:var(--green-bright);
  font-family:var(--font-mono);
  font-size:11px;
}
.api-key-toggle:hover{border-color:var(--glass-border-strong)}
.api-key-actions{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:10px;
  margin-bottom:10px;
}
.api-service-check{margin-top:0}

/* ═══ GHOSTSCAN — IN THE WORKS ═══ */
.ghost-coming-soon{
  position:relative;
  z-index:2;
  min-height:760px;
  display:grid;
  place-items:center;
  padding:90px 48px;
  overflow:hidden;
  border-top:1px solid rgba(69,245,121,.16);
  background:
    radial-gradient(circle at 50% 30%,rgba(69,245,121,.12),transparent 38%),
    linear-gradient(180deg,#040b14 0%,#06111c 100%);
}
.ghost-coming-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(69,245,121,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(69,245,121,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at center,black,transparent 74%);
}
.ghost-coming-content{
  position:relative;
  width:min(960px,100%);
  text-align:center;
}
.ghost-coming-badge{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 15px;
  border:1px solid rgba(69,245,121,.42);
  border-radius:999px;
  color:var(--ghost);
  background:rgba(69,245,121,.08);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}
.ghost-coming-icon{
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  margin:24px auto 18px;
  border:1px solid var(--ghost-border);
  border-radius:24px;
  color:var(--ghost);
  background:rgba(69,245,121,.08);
  box-shadow:0 0 46px rgba(69,245,121,.13);
  font-size:38px;
  animation:ghostGearPulse 3s ease-in-out infinite;
}
.ghost-coming-content h2{
  font-family:var(--font-body);
  font-size:clamp(34px,4vw,58px);
  letter-spacing:-1.8px;
  margin-bottom:16px;
}
.ghost-coming-content>p{
  max-width:760px;
  margin:0 auto;
  color:#9fb0c3;
  font-size:15.5px;
  line-height:1.75;
}
.ghost-build-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:38px 0 28px;
  text-align:left;
}
.ghost-build-list>div{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:2px 12px;
  padding:20px;
  border:1px solid rgba(69,245,121,.15);
  border-radius:16px;
  background:rgba(7,17,29,.72);
}
.ghost-build-list span{
  grid-row:1/3;
  color:var(--ghost);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:800;
}
.ghost-build-list strong{font-size:14px}
.ghost-build-list small{color:#8193a8;line-height:1.5}
.ghost-development-progress{
  max-width:680px;
  margin:0 auto 24px;
  padding:18px;
  border:1px solid rgba(69,245,121,.18);
  border-radius:16px;
  background:rgba(7,17,29,.74);
}
.ghost-progress-copy{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:12px;
  color:#8ea0b4;
}
.ghost-progress-copy strong{color:var(--ghost)}
.ghost-development-track{
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.ghost-development-track span{
  display:block;
  width:68%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--ghost),#7cffaa);
  box-shadow:0 0 18px rgba(69,245,121,.45);
  animation:ghostBuildGlow 2.4s ease-in-out infinite;
}
.ghost-coming-note{font-size:13px!important;color:#7e91a7!important}
.ghost-use-link-check{margin:22px auto 0}
.ghost-service-development .ghost-service-dot{background:var(--warning)!important;box-shadow:0 0 12px rgba(255,207,107,.45)!important}
@keyframes ghostGearPulse{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(8deg) scale(1.06)}}
@keyframes ghostBuildGlow{0%,100%{opacity:.72}50%{opacity:1}}

@media(max-width:760px){
  .api-key-actions{grid-template-columns:1fr}
  .ghost-coming-soon{padding:72px 20px;min-height:820px}
  .ghost-build-list{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════
   CYBERNET AI SAAS ACCESS + PRICING
   ═══════════════════════════════════════════════════════ */

[hidden]{display:none!important}

.nav-actions{
  gap:10px;
  min-width:210px;
  justify-content:flex-end;
}

.account-summary{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.account-summary[hidden]{display:none!important}

.nav-greeting{
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.plan-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  border:1px solid transparent;
}

.plan-badge-free{
  color:#b9c8d8;
  background:rgba(125,147,173,.12);
  border-color:rgba(125,147,173,.25);
}

.plan-badge-pro{
  color:#03111b;
  background:linear-gradient(100deg,var(--green),#69d7ff);
  border-color:rgba(165,240,255,.55);
  box-shadow:0 0 20px rgba(34,211,238,.24);
}

.usage-chip{
  padding:4px 8px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--green-bright);
  background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.18);
}

.account-action-btn,
.auth-text-btn{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.account-action-btn:hover,
.auth-text-btn:hover{color:var(--green-bright)}

.auth-text-btn{
  justify-self:center;
  margin-top:-2px;
}

.auth-message{
  min-height:20px;
  margin-top:14px;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  text-align:center;
}

.auth-message.error{color:#ff9d9d}
.auth-message.success{color:var(--safe)}

/* Reserve number width so the hero never jumps while counters animate. */
.hero-stats-row strong{
  min-width:94px;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  contain:layout paint;
}

.hero-stats-row div:nth-child(3) strong{min-width:76px}
.hero-stats-row div:nth-child(4) strong{min-width:56px}

/* Account access panel */
.account-access-panel{overflow:hidden}

.account-access-head,
.price-card-topline,
.usage-meter-labels,
.pro-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.account-eyebrow,
.price-plan-label{
  display:block;
  color:var(--green);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.4px;
  margin-bottom:7px;
}

.account-access-head h4{margin:0}
.account-access-panel>p{margin-top:14px}

.usage-meter-card{
  margin:20px 0;
  padding:16px;
  border-radius:15px;
  background:rgba(4,12,24,.45);
  border:1px solid rgba(34,211,238,.14);
}

.usage-meter-labels span,
.usage-meter-card small{
  color:var(--muted);
  font-size:11.5px;
}

.usage-meter-labels strong{
  font-family:var(--font-mono);
  color:var(--green-bright);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.usage-meter-track{
  height:8px;
  margin:12px 0 9px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.055);
}

.usage-meter-track span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--green),#3b82f6);
  box-shadow:0 0 14px rgba(34,211,238,.42);
  transition:width .45s ease;
}

.plan-benefit-list{
  display:grid;
  gap:10px;
  margin:0 0 18px;
  color:var(--text);
  font-size:12.5px;
}

.plan-benefit-list div{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.plan-benefit-list div span{
  color:var(--safe);
  font-family:var(--font-mono);
  font-weight:800;
}

.plan-benefit-list .benefit-locked{color:var(--muted)}
.plan-benefit-list .benefit-locked span{color:#ff8f8f}

.pro-history-card{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--glass-border);
}

.pro-history-head h5{font-size:12px}
.pro-history-head span{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:9px;
}

.pro-history-list{
  display:grid;
  gap:8px;
  margin-top:12px;
  max-height:210px;
  overflow:auto;
}

.pro-history-list p{
  margin:0;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.6;
}

.history-entry{
  padding:10px 11px;
  border-radius:11px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.055);
}

.history-entry strong{
  display:block;
  font-size:11.5px;
  color:var(--text);
}

.history-entry span{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:var(--muted);
}

.report-download-btn{
  margin-top:12px;
  width:100%;
  border:1px solid rgba(34,211,238,.25);
  background:rgba(34,211,238,.08);
  color:var(--green-bright);
  border-radius:10px;
  padding:10px 12px;
  font-size:11px;
  font-weight:800;
}

.report-download-btn:hover{
  background:rgba(34,211,238,.14);
  border-color:rgba(34,211,238,.42);
}

/* Two-plan pricing */
.pricing-head{max-width:780px;margin-left:auto;margin-right:auto}

.pricing-grid.pricing-grid-two{
  max-width:960px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:24px;
}

.pricing-grid-two .price-card{
  display:flex;
  flex-direction:column;
  min-height:620px;
  padding:34px;
}

.pricing-grid-two .price-card h3{
  margin-top:24px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:23px;
  text-transform:none;
  letter-spacing:-.4px;
}

.pricing-grid-two .price-card h2{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin:12px 0 10px;
}

.pricing-grid-two .price-card .price-amount{
  color:var(--text);
  font-size:47px;
  line-height:1;
  -webkit-text-fill-color:initial;
  font-variant-numeric:tabular-nums;
}

.pricing-grid-two .price-period{
  padding-bottom:5px;
  color:var(--muted);
  font-size:13px;
}

.pricing-grid-two .price-card>p{
  min-height:68px;
  margin-bottom:10px;
}

.billing-equivalent{
  min-height:22px!important;
  margin:0 0 16px!important;
  color:var(--green-bright)!important;
  font-family:var(--font-mono);
  font-size:11px!important;
}

.pricing-grid-two .price-card ul{
  flex:1;
  margin-top:15px;
}

.pricing-grid-two .price-card li{
  position:relative;
  padding-left:23px;
  line-height:1.45;
}

.pricing-grid-two .price-card li::before{
  position:absolute;
  left:0;
  top:0;
}

.pricing-grid-two .price-card li.feature-unavailable{
  color:var(--muted);
}

.pricing-grid-two .price-card li.feature-unavailable::before{
  content:"— ";
  color:#ff8f8f;
}

.pro-price-card{
  transform:translateY(-6px);
}

.pricing-notice{
  display:none;
  max-width:960px;
  margin:20px auto 0;
  padding:14px 18px;
  border-radius:14px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

.pricing-notice.show{display:block}
.pricing-notice.error{color:#ffb0b0;border-color:rgba(255,107,107,.28)}
.pricing-notice.success{color:var(--safe);border-color:rgba(52,211,153,.28)}

.comparison-wrap{
  max-width:1080px;
  margin:78px auto 0;
}

.comparison-heading{
  text-align:center;
  margin-bottom:24px;
}

.comparison-heading h2{
  margin:6px 0 9px;
  font-size:30px;
}

.comparison-heading p{
  color:var(--muted);
  font-size:14px;
}

.comparison-table-shell{
  overflow:auto;
  border-radius:20px;
}

.comparison-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
}

.comparison-table th,
.comparison-table td{
  padding:17px 20px;
  border-bottom:1px solid rgba(255,255,255,.055);
  text-align:left;
  font-size:12.5px;
  line-height:1.45;
}

.comparison-table th{
  color:var(--green-bright);
  background:rgba(34,211,238,.055);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.4px;
}

.comparison-table th:not(:first-child),
.comparison-table td:not(:first-child){text-align:center}

.comparison-table tbody tr:hover{background:rgba(255,255,255,.018)}
.comparison-table td:first-child{color:var(--text);font-weight:700}
.comparison-table td:not(:first-child){color:var(--muted)}
.table-yes{color:var(--safe);font-weight:900;font-size:16px}
.table-no{color:#ff8f8f;font-weight:900}

.pricing-footnote{
  max-width:960px;
  margin:20px auto 0;
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:11.5px;
}

.pricing-footnote strong{color:var(--green-bright)}

/* GhostScan entitlement gate */
.feature-paywall{
  display:none;
  max-width:760px;
  margin:80px auto;
  padding:46px;
  border-radius:26px;
  text-align:center;
}

.ghost-page.is-locked #ghostPaywall{display:block}
.ghost-page.is-locked>#ghostLanding,
.ghost-page.is-locked>#ghostComingSoon,
.ghost-page.is-locked>#ghostWorkspace{display:none!important}

.feature-paywall-icon{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  border-radius:22px;
  color:var(--green-bright);
  font-size:32px;
  background:rgba(34,211,238,.09);
  border:1px solid rgba(34,211,238,.22);
  box-shadow:0 0 40px rgba(34,211,238,.12);
}

.feature-paywall h1{
  margin:8px 0 14px;
  font-size:34px;
}

.feature-paywall p{
  max-width:620px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.75;
}

.feature-paywall-points{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin:24px 0 28px;
}

.feature-paywall-points span{
  padding:8px 11px;
  border-radius:999px;
  color:var(--green-bright);
  background:rgba(34,211,238,.07);
  border:1px solid rgba(34,211,238,.15);
  font-size:10.5px;
}

/* Better visual stability on the first home render. */
#home .hero,
#home .hero-content,
#home .hero-visual{
  backface-visibility:hidden;
  transform:translateZ(0);
}

#home .hero{opacity:1!important}

@media (max-width:1100px){
  .nav-actions{min-width:auto}
  .usage-chip{display:none}
  .account-action-btn{display:none}
}

@media (max-width:820px){
  .pricing-grid.pricing-grid-two{grid-template-columns:1fr;max-width:590px}
  .pricing-grid-two .price-card{min-height:auto}
  .pro-price-card{transform:none}
  .comparison-wrap{margin-top:52px}
  .feature-paywall{margin:50px auto;padding:34px 24px}
}

@media (max-width:620px){
  .account-summary{gap:6px}
  .nav-greeting{max-width:80px;font-size:11px}
  .plan-badge{min-height:21px;padding:3px 7px;font-size:9px}
  .pricing-grid-two .price-card{padding:27px 22px}
  .pricing-grid-two .price-card .price-amount{font-size:41px}
  .pricing-toggle-wrap{flex-direction:column}
  .pricing-footnote{display:grid;text-align:center}
  .feature-paywall h1{font-size:28px}
}