/* Swipe It – Static Site Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg: hsl(270,30%,98%);
  --fg: hsl(270,20%,15%);
  --primary: hsl(270,65%,55%);
  --primary-fg: hsl(0,0%,100%);
  --secondary: hsl(270,20%,94%);
  --secondary-fg: hsl(270,20%,15%);
  --muted: hsl(270,15%,94%);
  --muted-fg: hsl(270,10%,45%);
  --border: hsl(270,15%,88%);
  --radius: 0.75rem;
  --primary-10: hsla(270,65%,55%,0.1);
  --primary-5: hsla(270,65%,55%,0.05);
  --primary-20: hsla(270,65%,55%,0.2);
}

body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ─── Header ─── */
.header{background:var(--primary);padding:1.25rem 1.5rem}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.5rem;font-weight:700;color:var(--primary-fg)}
.nav-desktop{display:flex;align-items:center;gap:1.5rem}
.nav-link{font-size:.875rem;color:hsla(0,0%,100%,.9);transition:color .2s}
.nav-link:hover{color:var(--primary-fg)}
.lang-btn{display:inline-flex;align-items:center;gap:.375rem;font-size:.875rem;color:hsla(0,0%,100%,.9);background:none;border:none;cursor:pointer;transition:color .2s}
.lang-btn:hover{color:var(--primary-fg)}
.btn-secondary{font-size:.875rem;font-weight:500;padding:.5rem 1rem;border-radius:calc(var(--radius) - 4px);background:var(--secondary);color:var(--secondary-fg);border:none;cursor:pointer}
.btn-primary{font-size:1rem;font-weight:500;padding:.75rem 3rem;border-radius:calc(var(--radius) - 4px);background:var(--primary);color:var(--primary-fg);border:none;cursor:pointer}

/* Mobile nav */
.mobile-controls{display:none;align-items:center;gap:.75rem}
.hamburger{background:none;border:none;color:var(--primary-fg);cursor:pointer;padding:.25rem;font-size:1.5rem;line-height:1}
.nav-mobile{display:none;flex-direction:column;gap:.75rem;padding:.5rem 0;max-width:1200px;margin:0 auto}
.nav-mobile.open{display:flex}

@media(max-width:768px){
  .nav-desktop{display:none}
  .mobile-controls{display:flex}
}

/* ─── Hero ─── */
.hero{padding:5rem 1.5rem}
.hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hero h1{font-size:2.5rem;font-weight:700;margin-bottom:1.5rem;line-height:1.2}
.hero .desc{font-size:1.125rem;color:var(--muted-fg);margin-bottom:1rem}
.hero .sub{color:var(--muted-fg);margin-bottom:2rem}
.hero-card{border-radius:1rem;text-align:center}
.hero-card .emoji{font-size:2.5rem;font-weight:700;color:var(--primary);margin-bottom:1rem}
.hero-card p{color:var(--muted-fg)}
@media(max-width:768px){.hero-inner{grid-template-columns:1fr}.hero h1{font-size:2rem}}

/* ─── Features ─── */
.features{background:var(--secondary);padding:4rem 1.5rem}
.features-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}
.feature-card{background:var(--bg);border-radius:var(--radius);padding:1.5rem;display:flex;align-items:flex-start;gap:1rem;transition:box-shadow .2s}
.feature-card:hover{box-shadow:0 10px 25px -5px rgba(0,0,0,.1)}
.feature-icon{width:3.5rem;height:3.5rem;flex-shrink:0;background:var(--primary-10);border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.feature-card h3{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}
.feature-card p{font-size:.875rem;color:var(--muted-fg)}

/* ─── Steps ─── */
.steps{padding:4rem 1.5rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.steps-inner{max-width:1100px;margin:0 auto}
.steps h2{font-size:1.875rem;font-weight:700;margin-bottom:.75rem}
.steps .sub{color:var(--muted-fg);margin-bottom:2.5rem}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.step-card{background:var(--primary-5);border-radius:var(--radius);padding:1.5rem;border-left:4px solid var(--primary)}
.step-card .num{font-size:1.875rem;font-weight:700;color:var(--primary);margin-bottom:.75rem}
.step-card h3{font-size:1.125rem;font-weight:600}
@media(max-width:768px){.steps-grid{grid-template-columns:1fr}}

/* ─── Contacts ─── */
.contacts{padding:4rem 1.5rem;text-align:center}
.contacts h2{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}
.contact-box{display:inline-flex;align-items:center;gap:.75rem;background:var(--secondary);padding:1rem 1.5rem;border-radius:.5rem}
.contact-box a{font-weight:500;color:var(--fg)}
.contact-box a:hover{color:var(--primary)}

/* ─── Footer ─── */
.footer{background:var(--secondary);padding:2rem 1.5rem;margin-top:auto}
.footer-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:1.5rem}
.footer a{font-size:.875rem;color:var(--muted-fg);transition:color .2s}
.footer a:hover{color:var(--primary)}
.footer .dot{color:var(--muted-fg)}

/* ─── Content pages (About, Terms, Privacy) ─── */
.page-content{padding:4rem 1.5rem;flex-grow:1}
.page-content-inner{max-width:900px;margin:0 auto}
.page-content h1{font-size:1.875rem;font-weight:700;color:var(--primary);margin-bottom:2rem}
.page-content h2{font-size:1.25rem;font-weight:700;color:var(--primary);margin-bottom:1rem;margin-top:1.5rem}
.page-content h3{font-size:1.125rem;font-weight:600;margin-bottom:.5rem;margin-top:1.5rem}
.page-content h4{font-size:1rem;font-weight:600;margin-bottom:.5rem;margin-top:1rem}
.page-content p{color:var(--muted-fg);line-height:1.7;margin-bottom:.75rem}
.page-content ul,.page-content ol{color:var(--muted-fg);line-height:1.7;padding-left:1.25rem;margin-top:.5rem;margin-bottom:.75rem}
.page-content li{margin-bottom:.5rem}
.page-content ol{list-style:decimal}
.page-content ul{list-style:disc}
.page-content a{color:var(--primary)}
.page-content a:hover{text-decoration:underline}
.page-content .subtitle{color:var(--muted-fg);margin-bottom:2rem}

/* About layout */
.about-flex{display:flex;gap:2rem;align-items:center}
.about-flex .text{flex:1}
.about-flex .text p{font-size:1.125rem;line-height:1.7}
.about-flex .text p:last-child{font-size:1rem;color:var(--muted-fg)}
.about-flex .img{flex:1;display:flex;justify-content:center}
.about-flex img{border-radius:1rem;max-width:20rem;width:100%;box-shadow:0 10px 25px -5px rgba(0,0,0,.15)}
@media(max-width:768px){.about-flex{flex-direction:column}}

/* Globe SVG icon inline */
.icon-globe{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-mail{width:1.25rem;height:1.25rem;fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}