/* ======================================================
   Casper Phone — main stylesheet
   Mobile-first · lightweight · Google PageSpeed optimized
   ====================================================== */

:root{
  /* Brand */
  --orange:        #ff6a00;
  --orange-deep:   #e55d00;
  --orange-tint:   #fff5ed;

  /* Neutrals */
  --white:         #ffffff;
  --off-white:     #fafaf7;
  --light-black:   #2a2d33;
  --dark-charcoal: #18181b;
  --ink:           #111114;
  --muted:         #6b7280;
  --line:          #e9e7e1;
  --line-soft:     #f0ede4;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(17,17,20,0.05);
  --shadow:    0 4px 24px rgba(17,17,20,0.06);
  --shadow-lg: 0 18px 50px -10px rgba(17,17,20,0.18);
  --shadow-orange: 0 12px 30px -8px rgba(255,106,0,0.45);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;

  --content-max: 1200px;

  --font:     'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-disp:'Instrument Serif', Georgia, serif;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; padding:0;
  font-family:var(--font);
  font-size:16px; line-height:1.6;
  color:var(--dark-charcoal);
  background:var(--off-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
ul,ol{padding:0; margin:0; list-style:none}
h1,h2,h3,h4,h5{margin:0; font-weight:700; line-height:1.15; letter-spacing:-0.02em; color:var(--ink)}

.container{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 20px;
}

/* ======================================================
   HEADER (sticky)
   ====================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.logo-link{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--ink); letter-spacing:-0.02em}
.logo-link img{height:36px; width:auto}
.logo-link .logo-text{display:flex; flex-direction:column; line-height:1}
.logo-link .logo-text span{font-size:10px; font-weight:600; color:var(--orange); text-transform:uppercase; letter-spacing:0.18em; margin-top:3px}

.main-nav{display:none}
.main-nav ul{display:flex; gap:6px}
.main-nav a{
  padding:8px 14px; border-radius:8px;
  font-size:14px; font-weight:600; color:var(--light-black);
  transition:.15s;
}
.main-nav a:hover{background:var(--orange-tint); color:var(--orange-deep)}

.btn-call{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange); color:var(--white);
  padding:11px 18px; border-radius:999px;
  font-size:14px; font-weight:700;
  box-shadow:var(--shadow-orange);
  transition:.18s;
  white-space:nowrap;
}
.btn-call:hover{background:var(--orange-deep); transform:translateY(-1px); box-shadow:0 14px 32px -8px rgba(255,106,0,0.55)}
.btn-call .pulse{
  width:8px; height:8px; border-radius:50%; background:#fff;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.7); opacity:1}
  50%{box-shadow:0 0 0 6px rgba(255,255,255,0); opacity:0.7}
}
.btn-call .label-full{display:none}
.btn-call .label-short{display:inline}

@media(min-width:760px){
  .main-nav{display:block}
  .btn-call .label-full{display:inline}
  .btn-call .label-short{display:none}
}

/* ======================================================
   BUTTONS
   ====================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:999px;
  font-size:15px; font-weight:700;
  transition:.18s; cursor:pointer; border:none;
  white-space:nowrap;
}
.btn-primary{
  background:var(--orange); color:var(--white);
  box-shadow:var(--shadow-orange);
}
.btn-primary:hover{background:var(--orange-deep); transform:translateY(-2px); box-shadow:0 18px 40px -8px rgba(255,106,0,0.55)}

.btn-secondary{
  background:var(--ink); color:var(--white);
}
.btn-secondary:hover{background:#000; transform:translateY(-2px)}

.btn-outline{
  background:transparent; color:var(--ink);
  border:2px solid var(--ink);
}
.btn-outline:hover{background:var(--ink); color:var(--white)}

/* ======================================================
   HERO
   ====================================================== */
.hero{
  position:relative;
  padding:50px 0 70px;
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 90% -10%, rgba(255,106,0,0.10), transparent 60%),
    radial-gradient(600px 300px at -10% 110%, rgba(24,24,27,0.05), transparent 60%);
  z-index:-1; pointer-events:none;
}
.hero-grid{display:grid; gap:40px; align-items:center}
.hero-pretitle{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--white); border:1px solid var(--line);
  padding:8px 16px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--light-black);
  margin-bottom:22px;
  box-shadow:var(--shadow-sm);
}
.hero-pretitle .dot{width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,0.15)}
.hero h1{
  font-size:clamp(34px, 6vw, 60px);
  line-height:1.05;
  letter-spacing:-0.03em;
  margin-bottom:20px;
}
.hero h1 em{font-family:var(--font-disp); font-style:italic; color:var(--orange); font-weight:400}
.hero-sub{
  font-size:clamp(16px, 1.6vw, 19px);
  color:var(--light-black); line-height:1.55;
  max-width:560px; margin-bottom:30px;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px}
.hero-trust{
  display:flex; flex-wrap:wrap; gap:24px;
  padding-top:26px; border-top:1px solid var(--line);
}
.hero-trust .item{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--light-black)}
.hero-trust .ic{
  width:36px; height:36px; border-radius:10px;
  background:var(--orange-tint); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}

/* Hero visual */
.hero-visual{
  position:relative; aspect-ratio:1/1; max-width:520px; margin:0 auto;
}
.hero-visual .frame{
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--ink) 0%, var(--light-black) 100%);
  border-radius:36px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.hero-visual .frame::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,106,0,0.35), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,106,0,0.15), transparent 50%);
}
.hero-visual .grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero-visual .phone{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-8deg);
  width:48%; aspect-ratio:9/19;
  background:linear-gradient(180deg,#1a1a1c,#0a0a0c);
  border-radius:34px;
  border:3px solid #2a2d33;
  box-shadow:0 30px 80px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.04);
}
.hero-visual .phone::after{
  content:''; position:absolute; inset:8px;
  background:linear-gradient(135deg, var(--orange) 0%, #ff8533 100%);
  border-radius:24px;
  opacity:0.92;
}
.hero-visual .badge{
  position:absolute; right:-14px; top:38%;
  background:#fff; padding:14px 18px; border-radius:14px;
  box-shadow:var(--shadow);
  font-weight:700; font-size:14px;
  display:flex; align-items:center; gap:10px;
  animation:float 4s ease-in-out infinite;
}
.hero-visual .badge .ic{
  width:32px; height:32px; border-radius:8px; background:#10b981;
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.hero-visual .badge.b2{
  top:auto; bottom:18%; right:auto; left:-20px;
  animation-delay:-2s;
}
.hero-visual .badge.b2 .ic{background:var(--orange)}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

@media(min-width:900px){
  .hero{padding:80px 0 100px}
  .hero-grid{grid-template-columns:1.1fr 1fr; gap:60px}
}

/* ======================================================
   SECTION basics
   ====================================================== */
section{padding:70px 0}
.section-head{text-align:center; max-width:680px; margin:0 auto 50px}
.section-eyebrow{
  display:inline-block; font-size:12px; font-weight:700;
  color:var(--orange); text-transform:uppercase; letter-spacing:0.16em;
  margin-bottom:14px;
}
.section-title{
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.1; letter-spacing:-0.025em;
  margin-bottom:14px;
}
.section-title em{font-family:var(--font-disp); font-style:italic; font-weight:400; color:var(--orange)}
.section-sub{font-size:17px; color:var(--light-black); line-height:1.55}

/* ======================================================
   SERVICES GRID
   ====================================================== */
.services{background:var(--white)}
.services-grid{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:680px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.services-grid{grid-template-columns:repeat(3,1fr)}}

.service-card{
  position:relative;
  background:var(--off-white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  transition:.25s;
  overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--orange);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s;
}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; background:#fff}
.service-card:hover::before{transform:scaleX(1)}
.service-card .ic{
  width:54px; height:54px; border-radius:14px;
  background:var(--ink); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  margin-bottom:22px;
  transition:.25s;
}
.service-card:hover .ic{background:var(--orange); color:var(--white); transform:rotate(-6deg)}
.service-card h3{font-size:22px; margin-bottom:10px}
.service-card p{color:var(--light-black); font-size:15px; line-height:1.55; margin-bottom:18px}
.service-card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px}
.service-card .tag{
  font-size:11px; font-weight:700; padding:4px 10px;
  background:var(--white); border:1px solid var(--line);
  border-radius:999px; color:var(--light-black);
}
.service-card .more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; color:var(--orange-deep);
}
.service-card .more::after{content:'→'; transition:.2s}
.service-card:hover .more::after{transform:translateX(4px)}

/* ======================================================
   TRUST BADGES STRIP
   ====================================================== */
.trust-strip{
  background:var(--ink); color:var(--white);
  padding:50px 0;
}
.trust-row{display:grid; gap:30px; grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.trust-row{grid-template-columns:repeat(4,1fr)}}
.trust-item{display:flex; align-items:flex-start; gap:14px}
.trust-item .ic{
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,106,0,0.15); color:var(--orange);
  border:1px solid rgba(255,106,0,0.3);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:20px;
}
.trust-item .t{font-weight:700; font-size:15px; color:#fff; margin-bottom:4px}
.trust-item .d{font-size:13px; color:rgba(255,255,255,0.65); line-height:1.45}

/* ======================================================
   PRICING / DEVICES
   ====================================================== */
.devices-section{background:var(--off-white)}
.devices-row{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.devices-row{grid-template-columns:repeat(4,1fr)}}
.device-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 20px; text-align:center;
  transition:.2s;
}
.device-card:hover{border-color:var(--orange); transform:translateY(-3px)}
.device-card .ic{
  font-size:36px; margin-bottom:10px;
}
.device-card .name{font-weight:700; font-size:15px; margin-bottom:4px; color:var(--ink)}
.device-card .from{font-size:13px; color:var(--muted)}
.device-card .from b{color:var(--orange-deep); font-size:14px}

/* ======================================================
   PROCESS (3 STEPS) — used on rachat page
   ====================================================== */
.process-section{background:var(--white)}
.process-grid{display:grid; gap:30px; grid-template-columns:1fr; counter-reset:step}
@media(min-width:880px){.process-grid{grid-template-columns:repeat(3,1fr)}}
.step-card{
  position:relative;
  background:var(--off-white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 28px 30px;
  counter-increment:step;
}
.step-card::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; top:-22px; left:24px;
  font-family:var(--font-disp); font-style:italic;
  font-size:64px; line-height:1; color:var(--orange);
  font-weight:400;
}
.step-card h3{font-size:21px; margin:24px 0 10px}
.step-card p{color:var(--light-black); font-size:15px; line-height:1.55}

/* ======================================================
   BUYBACK HERO (rachat page)
   ====================================================== */
.rachat-hero{
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(255,106,0,0.12), transparent 60%),
    var(--off-white);
  padding:60px 0 80px;
}
.rachat-hero-grid{display:grid; gap:40px; align-items:center}
@media(min-width:900px){.rachat-hero-grid{grid-template-columns:1.2fr 1fr; gap:60px}}
.rachat-hero h1{font-size:clamp(34px, 6vw, 56px); line-height:1.05; letter-spacing:-0.03em; margin-bottom:20px}
.rachat-hero h1 em{font-family:var(--font-disp); font-style:italic; color:var(--orange); font-weight:400}
.rachat-hero p{font-size:18px; color:var(--light-black); margin-bottom:28px; max-width:540px}
.rachat-cards-list{display:flex; flex-direction:column; gap:14px; max-width:380px; margin:0 auto}
.rachat-card-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:16px;
  transition:.2s;
}
.rachat-card-item:hover{transform:translateX(4px); border-color:var(--orange)}
.rachat-card-item .ic{font-size:28px}
.rachat-card-item .t{font-weight:700; font-size:15px; color:var(--ink)}
.rachat-card-item .d{font-size:13px; color:var(--muted)}
.rachat-card-item .price{margin-left:auto; font-weight:800; color:var(--orange-deep); font-size:16px}

/* Buyback list / brands accepted */
.brands-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
  max-width:760px; margin:30px auto 0;
}
@media(min-width:680px){.brands-grid{grid-template-columns:repeat(4,1fr)}}
.brand-item{
  background:var(--white); border:1px solid var(--line);
  padding:24px 18px; border-radius:var(--radius);
  text-align:center; font-weight:700; font-size:14px; color:var(--ink);
  transition:.2s;
}
.brand-item:hover{border-color:var(--orange); transform:translateY(-2px); color:var(--orange-deep)}
.brand-item .ic{font-size:28px; margin-bottom:6px}

/* ======================================================
   CTA SECTION
   ====================================================== */
.cta-section{
  position:relative; padding:80px 0;
  background:var(--ink); color:var(--white);
  overflow:hidden;
}
.cta-section::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(255,106,0,0.25), transparent 60%),
    radial-gradient(500px 250px at 90% 100%, rgba(255,106,0,0.15), transparent 60%);
  pointer-events:none;
}
.cta-inner{position:relative; text-align:center; max-width:680px; margin:0 auto; padding:0 20px}
.cta-inner h2{
  font-size:clamp(30px, 5vw, 46px); color:#fff;
  letter-spacing:-0.025em; line-height:1.1; margin-bottom:18px;
}
.cta-inner h2 em{font-family:var(--font-disp); font-style:italic; color:var(--orange); font-weight:400}
.cta-inner p{font-size:17px; color:rgba(255,255,255,0.75); margin-bottom:32px}
.cta-buttons{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.cta-buttons .btn-secondary{background:#fff; color:var(--ink)}
.cta-buttons .btn-secondary:hover{background:rgba(255,255,255,0.9)}

/* ======================================================
   LOCATION SECTION
   ====================================================== */
.location-section{background:var(--off-white)}
.location-grid{display:grid; gap:40px; align-items:start}
@media(min-width:900px){.location-grid{grid-template-columns:1fr 1.1fr}}
.location-info h2{font-size:clamp(28px,4vw,40px); line-height:1.1; margin-bottom:20px}
.location-info h2 em{font-family:var(--font-disp); font-style:italic; color:var(--orange); font-weight:400}
.location-info > p{font-size:16px; color:var(--light-black); margin-bottom:30px}
.contact-block{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:14px;
  display:flex; align-items:flex-start; gap:18px;
  transition:.2s;
}
.contact-block:hover{border-color:var(--orange); transform:translateY(-2px); box-shadow:var(--shadow)}
.contact-block .ic{
  width:46px; height:46px; border-radius:12px;
  background:var(--orange-tint); color:var(--orange-deep);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  flex-shrink:0;
}
.contact-block h4{font-size:14px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px}
.contact-block .v{font-size:17px; font-weight:700; color:var(--ink); line-height:1.4}
.contact-block .v small{display:block; font-weight:500; color:var(--light-black); font-size:14px; margin-top:2px}

.map-wrap{
  position:relative; aspect-ratio:1/1;
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); background:#f0ede4;
  box-shadow:var(--shadow);
}
.map-wrap iframe{width:100%; height:100%; border:0}

/* ======================================================
   FOOTER
   ====================================================== */
.site-footer{background:var(--ink); color:rgba(255,255,255,0.7); padding:60px 0 30px}
.footer-grid{
  display:grid; gap:40px;
  grid-template-columns:1fr;
}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-grid h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; font-weight:700}
.footer-grid a{color:rgba(255,255,255,0.7); transition:.15s; font-size:14px; line-height:2}
.footer-grid a:hover{color:var(--orange)}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.footer-brand img{height:40px}
.footer-brand-name{font-size:18px; font-weight:800; color:#fff}
.footer-about{font-size:14px; line-height:1.6; max-width:300px}
.footer-bottom{
  margin-top:40px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  font-size:13px; color:rgba(255,255,255,0.5);
}

/* ======================================================
   FLOATING MOBILE CALL BUTTON
   ====================================================== */
.mobile-call-fab{
  position:fixed; bottom:20px; right:20px; z-index:90;
  width:62px; height:62px; border-radius:50%;
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  box-shadow:0 16px 36px -8px rgba(255,106,0,0.55);
  animation:pulse-fab 2.5s ease-in-out infinite;
}
@keyframes pulse-fab{
  0%,100%{box-shadow:0 16px 36px -8px rgba(255,106,0,0.55), 0 0 0 0 rgba(255,106,0,0.4)}
  50%{box-shadow:0 16px 36px -8px rgba(255,106,0,0.55), 0 0 0 14px rgba(255,106,0,0)}
}
@media(min-width:760px){.mobile-call-fab{display:none}}

/* ======================================================
   SCROLL ANIMATIONS (lightweight)
   ====================================================== */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s}
.reveal.visible{opacity:1; transform:translateY(0)}
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important; transition-duration:0.01ms !important}
}