/* YBE — base design taken verbatim from candidate A. */
/* Additions for version C are appended at the end, clearly marked. */

:root{
  --navy:#14213d;
  --navy-2:#1d2f56;
  --blue:#5b8def;            /* brand blue — decorative + large text only */
  --blue-text:#3569cf;       /* AA-safe blue for normal-size text/links (5.16:1 on white) */
  --orange-ink:#965400;      /* AA-safe orange ink on --orange-soft (5.36:1) */
  --blue-soft:#eaf0ff;
  --orange:#fca311;
  --orange-soft:#fff3dc;
  --ink:#172033;
  --muted:#667085;
  --line:#e5e9f2;
  --paper:#ffffff;
  --surface:#f6f8fc;
  --success:#13795b;
  --shadow:0 24px 60px rgba(20,33,61,.12);
  --shadow-sm:0 12px 30px rgba(20,33,61,.08);
  --radius:26px;
  --radius-sm:18px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
img,svg{display:block;max-width:100%}
.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.section{padding:92px 0}
.section-soft{background:var(--surface)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 14px;padding:7px 12px;border-radius:999px;
  color:var(--navy);background:var(--orange-soft);
  font-weight:800;font-size:14px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(42px,6vw,78px);line-height:1.03;letter-spacing:-2.4px;margin-bottom:24px;color:var(--navy)}
h1 span{color:var(--blue)}
h2{font-size:clamp(32px,4.4vw,52px);line-height:1.1;letter-spacing:-1.3px;margin-bottom:18px;color:var(--navy)}
h3{font-size:22px;line-height:1.25;color:var(--navy);margin-bottom:10px}
.lead{font-size:20px;color:#4a5568;max-width:720px;margin-bottom:30px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-bottom:38px}
.section-head>div{max-width:760px}
.section-head>p{max-width:420px;margin:0;color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 22px;border-radius:14px;border:1px solid transparent;
  font-weight:800;transition:.2s ease;cursor:pointer;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#111827;box-shadow:0 12px 28px rgba(252,163,17,.25)}
.btn-primary:hover{background:#ffad22}
.btn-dark{background:var(--navy);color:#fff}
.btn-outline{border-color:#cad2e1;background:#fff;color:var(--navy)}
.btn-outline:hover{border-color:var(--blue-text);color:var(--blue-text)}

/* header */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(20,33,61,.95);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;min-width:250px}
.brand svg{width:260px;height:auto}
.nav-links{display:flex;align-items:center;gap:26px;color:#dce4f2;font-weight:700;font-size:15px}
.nav-links a:hover{color:#fff}
.nav-links .nav-cta{padding:10px 15px;border:1px solid rgba(255,255,255,.2);border-radius:12px;color:#fff}
.menu-btn{display:none;border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}

/* hero */
.hero{
  position:relative;overflow:hidden;
  padding:88px 0 78px;
  background:
    radial-gradient(circle at 14% 15%, rgba(91,141,239,.15), transparent 31%),
    radial-gradient(circle at 90% 20%, rgba(252,163,17,.14), transparent 28%),
    linear-gradient(180deg,#fbfcff 0%,#fff 100%);
}
.hero::after{
  content:"";position:absolute;left:-140px;bottom:-180px;width:420px;height:420px;border-radius:50%;
  border:70px solid rgba(91,141,239,.04);pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center;position:relative;z-index:1}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hero-contact{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:15px;font-weight:650}
.hero-contact a{display:flex;align-items:center;gap:7px}
.hero-contact a:hover{color:var(--blue-text)}
.hero-contact svg{width:18px;height:18px}

.browser-card{
  border-radius:28px;background:var(--navy);color:#fff;padding:14px;box-shadow:var(--shadow);
  transform:rotate(-1deg);
}
.browser-bar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 10px}
.browser-dots{display:flex;gap:6px;direction:ltr}
.browser-dots i{width:9px;height:9px;border-radius:50%;background:#52617d}
.browser-dots i:first-child{background:var(--orange)}
.browser-label{font-size:13px;color:#b7c2d7;font-weight:700}
.browser-content{background:#fff;border-radius:18px;padding:24px;color:var(--ink)}
.mini-logo{width:170px;margin-bottom:24px}
.mini-title{font-size:27px;line-height:1.15;font-weight:900;color:var(--navy);margin-bottom:8px}
.mini-sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mini-stat{padding:15px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.mini-stat b{display:block;color:var(--navy);font-size:17px}
.mini-stat span{font-size:12px;color:var(--muted)}
.mini-strip{margin-top:10px;height:12px;border-radius:999px;background:#edf1f8;overflow:hidden}
.mini-strip i{display:block;width:72%;height:100%;background:linear-gradient(90deg,var(--blue),var(--orange));border-radius:inherit}

.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trust-row{min-height:92px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.trust-item{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;border-left:1px solid var(--line);font-weight:800;color:#344054;text-align:center}
.trust-item:first-child{border-left:0}
.trust-item svg{width:21px;height:21px;color:var(--blue);flex:none}

/* cards */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{position:relative;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.service-card::after{content:"";position:absolute;left:-50px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:rgba(91,141,239,.05)}
.icon-box{width:52px;height:52px;border-radius:15px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;margin-bottom:20px}
.icon-box.orange{background:var(--orange-soft);color:var(--orange-ink)}
.icon-box svg{width:25px;height:25px}
.service-card p{color:var(--muted);margin-bottom:18px}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.check-list li{display:flex;gap:9px;align-items:flex-start;color:#344054;font-size:15px}
.check-list li::before{content:"✓";color:var(--success);font-weight:900}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price-card{position:relative;padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.price-card.featured{border:2px solid var(--blue);transform:translateY(-8px);box-shadow:0 24px 60px rgba(91,141,239,.17)}
.badge{position:absolute;top:18px;left:18px;background:var(--navy);color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}
.price-card .desc{color:var(--muted);min-height:52px}
.price{display:flex;align-items:baseline;gap:8px;color:var(--navy);margin:12px 0 20px}
.price strong{font-size:42px;letter-spacing:-1px}
.price small{color:var(--muted);font-weight:700}
.price-card .check-list{margin-bottom:24px;flex:1}
.price-card .btn{width:100%}
.pricing-note{margin:24px 0 0;color:var(--muted);font-size:14px;text-align:center}

.software-box{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;margin-top:64px}
.software-main{background:var(--navy);color:#fff;border-radius:var(--radius);padding:34px;position:relative;overflow:hidden}
.software-main::after{content:"</>";position:absolute;left:20px;bottom:-20px;font-weight:900;font-size:120px;color:rgba(255,255,255,.035);direction:ltr}
.software-main h3{color:#fff;font-size:29px}
.software-main p{color:#c5cee0}
.software-main .software-price{font-size:42px;font-weight:900;color:#fff;margin-top:25px}
.software-main .software-price small{font-size:14px;color:#aebbd1;display:block;font-weight:700}
.software-options{display:grid;gap:12px}
.software-option{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:18px}
.software-option h3{font-size:18px;margin:0}
.software-option p{margin:4px 0 0;color:var(--muted);font-size:14px}
.software-option strong{white-space:nowrap;color:var(--blue-text);font-size:17px}

/* process */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:steps}
.step{counter-increment:steps;padding:26px;border-radius:22px;background:#fff;border:1px solid var(--line);position:relative}
.step::before{content:"0" counter(steps);display:block;font-size:13px;font-weight:900;letter-spacing:1px;color:var(--orange);margin-bottom:20px}
.step p{color:var(--muted);margin:0;font-size:15px}

/* why */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.why-panel{background:var(--navy);border-radius:32px;padding:38px;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;box-shadow:var(--shadow)}
.why-panel h3{font-size:32px;color:#fff;max-width:430px}
.why-panel p{color:#c5cee0;max-width:480px}
.quote{padding:20px 22px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.05);color:#fff;font-weight:700}
.benefits{display:grid;gap:16px}
.benefit{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start}
.benefit .num{width:46px;height:46px;border-radius:14px;background:var(--orange-soft);color:#b86700;display:grid;place-items:center;font-weight:900}
.benefit h3{font-size:19px;margin-bottom:4px}
.benefit p{color:var(--muted);font-size:15px;margin:0}

/* FAQ */
.faq{max-width:900px;margin-inline:auto}
details{border-bottom:1px solid var(--line);padding:0}
summary{cursor:pointer;list-style:none;padding:22px 4px;font-weight:850;color:var(--navy);font-size:18px;display:flex;align-items:center;justify-content:space-between;gap:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:25px;color:var(--blue-text);font-weight:400}
details[open] summary::after{content:"−"}
details p{padding:0 4px 22px;color:var(--muted);margin:0;max-width:760px}

/* contact */
.contact-section{padding:0 0 92px}
.contact-box{background:linear-gradient(135deg,var(--navy),#20365f);border-radius:32px;color:#fff;padding:48px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;box-shadow:var(--shadow);overflow:hidden;position:relative}
.contact-box::after{content:"";position:absolute;left:-90px;top:-120px;width:300px;height:300px;border-radius:50%;border:55px solid rgba(252,163,17,.08)}
.contact-box h2{color:#fff;margin-bottom:12px}
.contact-box p{color:#c6d0e2;max-width:630px;margin-bottom:0}
.contact-actions{display:grid;gap:12px;position:relative;z-index:1}
.contact-link{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 18px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:#fff;font-weight:800}
.contact-link:hover{background:rgba(255,255,255,.13)}
.contact-link span{direction:ltr}
.contact-link svg{width:21px;height:21px;color:var(--orange)}

footer{background:#0d172b;color:#aab7cd;padding:28px 0}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:30px}
.footer-logo{width:240px}
.footer-meta{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;font-size:14px}
.footer-meta a:hover{color:#fff}

.floating-call{display:none}

@media(max-width:960px){
  .hero-grid,.software-box,.why-grid,.contact-box{grid-template-columns:1fr}
  .hero-grid{gap:44px}
  .browser-card{max-width:620px;margin-inline:auto;width:100%;transform:none}
  .services-grid,.pricing-grid{grid-template-columns:1fr 1fr}
  .pricing-grid .price-card:last-child{grid-column:1/-1;max-width:560px;width:100%;justify-self:center}
  .process-grid{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(2){border-left:0}
  .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .section-head{align-items:start;flex-direction:column;gap:8px}
  .nav-links{position:absolute;inset:76px 0 auto 0;background:var(--navy);padding:18px 24px 24px;display:none;flex-direction:column;align-items:stretch;border-top:1px solid rgba(255,255,255,.08)}
  .nav-links.open{display:flex}
  .menu-btn{display:block}
}
@media(max-width:680px){
  .wrap{width:min(100% - 28px,var(--max))}
  .section{padding:68px 0}
  .hero{padding:58px 0 55px}
  h1{font-size:45px;letter-spacing:-1.5px}
  .lead{font-size:18px}
  .brand{min-width:auto}
  .brand svg{width:210px}
  .services-grid,.pricing-grid,.process-grid{grid-template-columns:1fr}
  .pricing-grid .price-card:last-child{grid-column:auto}
  .price-card.featured{transform:none}
  .trust-row{grid-template-columns:1fr}
  .trust-item{border-left:0;border-bottom:1px solid var(--line)!important}
  .trust-item:last-child{border-bottom:0!important}
  .software-option{align-items:flex-start;flex-direction:column}
  .contact-box{padding:32px 24px}
  .footer-row{align-items:flex-start;flex-direction:column}
  .footer-meta{justify-content:flex-start}
  .floating-call{display:flex;position:fixed;left:16px;bottom:16px;z-index:30;width:58px;height:58px;border-radius:50%;background:var(--orange);color:#111827;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(20,33,61,.28)}
  .floating-call svg{width:25px;height:25px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ════════════════════════════════════════════════════════════════
   VERSION C — additions only.
   Design language, colours and layout above are candidate A, unchanged.
   Everything here either (a) restores assets NetFree stripped from A,
   or (b) brings an organisational idea across from candidate B.
   ════════════════════════════════════════════════════════════════ */

/* ---- logo (A shipped blank 1x1 placeholders; these are the real files) ---- */
.brand img{width:300px;height:auto}
.footer-logo-img{width:250px;height:auto}
.mini-logo-img{width:150px;height:auto;margin-bottom:22px}

/* ---- icon images (were inline <svg>, now files so NetFree cannot strip them) ---- */
.trust-item img{width:22px;height:22px;flex:none}
.icon-box img{width:26px;height:26px}
.hero-contact img{width:18px;height:18px}
.contact-link img{width:22px;height:22px}
.floating-call img{width:26px;height:26px}

/* ---- B idea: pricing split into two clearly labelled groups ---- */
.price-group{margin-top:8px}
.price-group + .price-group{margin-top:56px}
.group-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.group-head h3{font-size:26px;margin:0;letter-spacing:-.6px}
.group-head span{color:var(--muted);font-size:15px;font-weight:650}

/* ---- B idea: commercial rules, in A's light styling ---- */
.rules{
  margin-top:58px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:34px 36px;box-shadow:var(--shadow-sm);
}
.rules-head{margin-bottom:20px}
.rules-head h3{font-size:28px;margin:0;letter-spacing:-.8px}
.rules-head p{margin:6px 0 0;color:var(--muted)}
.rules-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rules-list li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:15px 0;border-top:1px solid var(--line);color:#344054;font-size:15.5px;
}
.rules-list li:first-child{border-top:0;padding-top:0}
.rules-list b{color:var(--navy);white-space:nowrap}

/* ---- B idea: one primary CTA, phone + mail clearly secondary ---- */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-secondary{display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:15px;font-weight:650}
.cta-secondary a{display:inline-flex;align-items:center;gap:7px}
.cta-secondary a:hover{color:var(--blue-text)}
.cta-secondary span{direction:ltr}

/* ---- B idea: tidier footer, with the logo in it ---- */
.footer-row{align-items:center}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.footer-nav a:hover{color:#fff}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;align-items:center}
.footer-legal a{text-decoration:underline;text-underline-offset:3px}
.footer-legal a:hover{color:#fff}

/* ---- tightened rhythm (B is 32% shorter; this closes most of the gap) ---- */
.section{padding:78px 0}
.hero{padding:74px 0 64px}
.software-box{margin-top:52px}
.price-card .desc{min-height:0}

/* ---- privacy page ---- */
.doc{max-width:820px;margin-inline:auto;padding:64px 0 80px}
.doc h1{font-size:clamp(34px,4.6vw,52px);margin-bottom:6px}
.doc .updated{color:#5a6678;margin:0 0 30px}        /* darkened from --muted */
.doc h2{font-size:23px;margin:34px 0 10px;letter-spacing:-.5px}
.doc p,.doc li{color:#2b3648}                       /* darkened for readability — 12.7:1 */
.doc ul{padding-inline-start:20px;display:grid;gap:7px}
.doc .callout{background:var(--orange-soft);border:1px solid #f6dcae;border-radius:var(--radius-sm);padding:20px 24px;margin:0 0 8px}
.doc .callout p{margin:0;color:#4a3b1b}
.doc .notice{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px 26px;margin-top:14px}
.doc .notice p:last-child{margin-bottom:0}
.doc-foot{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}

/* ---- responsive: the mobile page is the one that needed shortening ---- */
@media(max-width:960px){
  .brand img{width:250px}
}
@media(max-width:680px){
  .section{padding:54px 0}
  .hero{padding:44px 0 42px}
  .brand img{width:200px}
  .footer-logo-img{width:200px}
  .price-group + .price-group{margin-top:40px}
  .group-head h3{font-size:22px}
  .rules{padding:24px 20px;margin-top:40px}
  .rules-head h3{font-size:23px}
  .rules-list li{grid-template-columns:1fr;gap:4px;padding:13px 0}
  .rules-list b{white-space:normal}
  .software-box{margin-top:38px}
  .doc{padding:40px 0 56px}
  .footer-row{gap:20px}
}

/* ---- FAQ: closed by default on phones so the page is not padded out ---- */
@media(max-width:680px){
  summary{padding:17px 4px;font-size:16.5px}
  details p{padding-bottom:17px}
}

/* ---- accessibility ---- */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:40;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;font-weight:800;
}
.skip-link:focus{inset-inline-start:0}

/* ---- mobile density pass ------------------------------------------------
   Goal from B: a shorter, easier phone page — without dropping any content.
   Nothing here changes colours, type scale or layout on desktop.            */
@media(max-width:680px){
  .section{padding:44px 0}
  .hero{padding:36px 0 34px}
  .section-head{margin-bottom:26px}
  h2{margin-bottom:12px}
  .lead{margin-bottom:22px}

  /* the forced 420px panel was the single biggest empty block on a phone */
  .why-panel{min-height:0;padding:26px;gap:18px}
  .why-grid{gap:26px}
  .benefits{gap:12px}
  .benefit{grid-template-columns:40px 1fr;gap:11px}
  .benefit .num{width:40px;height:40px;border-radius:12px}

  /* cards: same design, less air */
  .service-card{padding:22px}
  .icon-box{width:44px;height:44px;border-radius:13px;margin-bottom:14px}
  .service-card p{margin-bottom:14px}
  .price-card{padding:24px}
  .price{margin:10px 0 16px}
  .price-card .check-list{margin-bottom:18px}
  .check-list{gap:7px}
  .step{padding:20px}
  .step::before{margin-bottom:12px}
  .software-main{padding:26px}
  .software-option{padding:16px 18px}
  .software-options{gap:10px}

  .browser-card{padding:10px}
  .browser-content{padding:18px}
  .mini-logo-img{width:130px;margin-bottom:16px}
  .mini-grid{gap:8px}
  .mini-stat{padding:12px}

  .contact-box{padding:26px 20px;gap:22px}
  .contact-link{padding:14px 16px}
  .pricing-note{margin-top:18px}
}