ny herosec

 

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>RLD Printstore – Premium Preview</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #050608;
      --bg-soft: #0b0e12;
      --panel: rgba(255,255,255,.06);
      --panel-2: rgba(255,255,255,.035);
      --stroke: rgba(255,255,255,.1);
      --stroke-soft: rgba(255,255,255,.06);
      --text: #f4f6f8;
      --muted: #aeb8c3;
      --silver-1: #f1f3f5;
      --silver-2: #d9dfe5;
      --silver-3: #aeb8c4;
      --silver-4: #66717d;
      --cyan: #00d9ff;
      --magenta: #ff35c8;
      --yellow: #ffd400;
      --shadow: 0 30px 80px rgba(0,0,0,.45);
      --radius-xl: 34px;
      --radius-lg: 26px;
      --radius-md: 18px;
      --container: 1280px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.11), transparent 0 18%),
        radial-gradient(circle at 85% 18%, rgba(255,255,255,.07), transparent 0 18%),
        radial-gradient(circle at 82% 80%, rgba(0,217,255,.06), transparent 0 20%),
        radial-gradient(circle at 18% 84%, rgba(255,53,200,.06), transparent 0 18%),
        linear-gradient(135deg, #020304 0%, #0b0e12 26%, #191f26 44%, #0b0f14 72%, #020304 100%);
      overflow-x: hidden;
      min-height: 100vh;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(115deg, rgba(255,255,255,.04), transparent 16%, transparent 84%, rgba(255,255,255,.03)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.013) 0 1px, transparent 1px 120px);
      opacity: .9;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.55));
    }

    .container {
      width: min(calc(100% - 32px), var(--container));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 18px 0 16px;
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(16px);
      background: linear-gradient(180deg, rgba(5,6,8,.68), rgba(5,6,8,.32));
      border-bottom: 1px solid rgba(255,255,255,.04);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .brand-chip {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      position: relative;
      background:
        linear-gradient(155deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
        linear-gradient(135deg, rgba(0,217,255,.2), rgba(255,53,200,.18) 45%, rgba(255,212,0,.18));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 30px rgba(0,0,0,.22);
      overflow: hidden;
    }

    .brand-chip::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.4), transparent 40%);
      mix-blend-mode: screen;
    }

    .brand-text strong {
      display: block;
      font-size: 15px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .brand-text span {
      display: block;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-top: 3px;
    }

    .nav {
      display: flex;
      gap: 28px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
    }

    .nav a {
      color: #d7dee6;
      text-decoration: none;
      font-weight: 500;
      font-size: 15px;
      padding: 10px 0;
      position: relative;
      transition: color .22s ease;
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
      opacity: .6;
      transform: scaleX(.45);
      transform-origin: center;
      transition: transform .22s ease, opacity .22s ease, background .22s ease;
    }

    .nav a:nth-child(1):hover::after { background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
    .nav a:nth-child(2):hover::after { background: linear-gradient(90deg, transparent, var(--magenta), transparent); }
    .nav a:nth-child(3):hover::after { background: linear-gradient(90deg, transparent, var(--yellow), transparent); }
    .nav a:nth-child(4):hover::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); }
    .nav a:hover { color: #fff; }
    .nav a:hover::after { transform: scaleX(1); opacity: 1; }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      color: #eef4f8;
      text-decoration: none;
      font-weight: 700;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.2);
    }

    .hero {
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 24px;
      padding: 34px 0 28px;
      align-items: stretch;
    }

    .panel {
      position: relative;
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.1);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.09);
      backdrop-filter: blur(16px);
      overflow: hidden;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 42%);
    }

    .hero-main {
      border-radius: var(--radius-xl);
      padding: 34px 34px 30px;
      min-height: 700px;
    }

    .hero-main::after {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 18%, rgba(0,217,255,.5) 34%, rgba(255,53,200,.44) 62%, rgba(255,212,0,.55) 82%, rgba(255,255,255,.16));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: .5;
      pointer-events: none;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #dce5ec;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.09);
    }

    .eyebrow i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow));
      box-shadow: 0 0 18px rgba(0,217,255,.45);
      animation: pulse 2.8s ease-in-out infinite;
    }

    .hero-logo-wrap {
      margin-top: 18px;
      position: relative;
      width: min(100%, 760px);
    }

    .hero-logo-wrap::before {
      content: "";
      position: absolute;
      inset: auto 3% -10% 3%;
      height: 34%;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
      filter: blur(26px);
      opacity: .7;
      z-index: -1;
    }

    .hero-logo {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 22px 30px rgba(0,0,0,.34));
    }

    h1 {
      margin: 22px 0 0;
      font-size: clamp(38px, 5vw, 76px);
      line-height: .95;
      letter-spacing: -.055em;
      max-width: 11ch;
    }

    .headline-accent {
      background: linear-gradient(90deg, var(--silver-2), #ffffff 28%, var(--cyan) 58%, var(--magenta) 78%, var(--yellow) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .lead {
      margin: 18px 0 0;
      max-width: 60ch;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.75;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 58px;
      padding: 0 24px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 800;
      font-size: 15px;
      letter-spacing: .01em;
      color: #f7f9fb;
      text-shadow: 0 1px 0 rgba(0,0,0,.35);
      position: relative;
      overflow: hidden;
      isolation: isolate;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }

    .btn::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background:
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.025) 46%, rgba(0,0,0,.11)),
        linear-gradient(135deg, rgba(255,255,255,.045), transparent 42%);
      z-index: -1;
    }

    .btn::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 1;
    }

    .btn:hover { transform: translateY(-3px); filter: brightness(1.05); }
    .btn-cyan::after { background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(0,217,255,.95), rgba(255,255,255,.16)); }
    .btn-magenta::after { background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,53,200,.95), rgba(255,255,255,.16)); }
    .btn-yellow::after { background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,212,0,.95), rgba(255,255,255,.16)); }
    .btn-cyan { box-shadow: 0 0 0 1px rgba(0,217,255,.11), 0 18px 36px rgba(0,217,255,.14), 0 14px 28px rgba(0,0,0,.3); }
    .btn-magenta { box-shadow: 0 0 0 1px rgba(255,53,200,.11), 0 18px 36px rgba(255,53,200,.14), 0 14px 28px rgba(0,0,0,.3); }
    .btn-yellow { box-shadow: 0 0 0 1px rgba(255,212,0,.12), 0 18px 36px rgba(255,212,0,.12), 0 14px 28px rgba(0,0,0,.3); }
    .btn-cyan:hover { box-shadow: 0 0 0 1px rgba(0,217,255,.18), 0 20px 38px rgba(0,217,255,.2), 0 16px 32px rgba(0,0,0,.3); }
    .btn-magenta:hover { box-shadow: 0 0 0 1px rgba(255,53,200,.18), 0 20px 38px rgba(255,53,200,.2), 0 16px 32px rgba(0,0,0,.3); }
    .btn-yellow:hover { box-shadow: 0 0 0 1px rgba(255,212,0,.18), 0 20px 38px rgba(255,212,0,.18), 0 16px 32px rgba(0,0,0,.3); }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 34px;
    }

    .stat {
      border-radius: 20px;
      padding: 18px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.08);
    }

    .stat strong {
      display: block;
      font-size: 24px;
      letter-spacing: -.04em;
      margin-bottom: 6px;
    }

    .stat span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .hero-side {
      display: grid;
      gap: 18px;
    }

    .side-card {
      border-radius: 30px;
      padding: 24px;
    }

    .side-card.top {
      min-height: 380px;
      background:
        radial-gradient(circle at 12% 22%, rgba(255,255,255,.18), transparent 0 20%),
        linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    }

    .side-label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: #d6dfe8;
    }

    .print-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 20px;
    }

    .swatch {
      min-height: 144px;
      border-radius: 24px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.1);
      background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

    .swatch::before {
      content: attr(data-title);
      position: absolute;
      left: 16px;
      bottom: 14px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #f4f6f8;
    }

    .swatch::after {
      content: "";
      position: absolute;
      inset: auto -10% -32% auto;
      width: 74%;
      height: 74%;
      filter: blur(18px);
      opacity: .75;
      background: radial-gradient(circle, rgba(255,255,255,.5), transparent 60%);
      transform: rotate(-10deg);
    }

    .swatch.c { background: linear-gradient(135deg, rgba(0,217,255,.56), rgba(255,255,255,.03)); }
    .swatch.m { background: linear-gradient(135deg, rgba(255,53,200,.56), rgba(255,255,255,.03)); }
    .swatch.y { background: linear-gradient(135deg, rgba(255,212,0,.6), rgba(255,255,255,.03)); }
    .swatch.k { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(8,10,13,.18)); }

    .side-card.bottom {
      min-height: 300px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .subpanel {
      border-radius: 22px;
      padding: 18px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.08);
    }

    .subpanel h3 {
      margin: 0 0 14px;
      font-size: 18px;
      letter-spacing: -.03em;
    }

    .steps, .badge-list {
      display: grid;
      gap: 10px;
    }

    .step {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--muted);
      font-size: 14px;
    }

    .no {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #071015;
      background: linear-gradient(120deg, var(--cyan), var(--magenta), var(--yellow));
      font-size: 12px;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .badge-list {
      grid-template-columns: repeat(2, 1fr);
    }

    .badge {
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      font-size: 12px;
      font-weight: 700;
      color: #eef3f7;
      white-space: nowrap;
      text-align: center;
    }

    section {
      padding: 26px 0;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 18px;
    }

    .section-head h2 {
      margin: 0;
      font-size: clamp(28px, 3.8vw, 46px);
      letter-spacing: -.05em;
    }

    .section-head p {
      margin: 0;
      max-width: 62ch;
      color: var(--muted);
      line-height: 1.75;
    }

    .cards-4, .cards-3 {
      display: grid;
      gap: 18px;
    }

    .cards-4 { grid-template-columns: repeat(4, 1fr); }
    .cards-3 { grid-template-columns: repeat(3, 1fr); }

    .info-card {
      border-radius: 28px;
      padding: 22px;
    }

    .info-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .icon {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      font-size: 22px;
    }

    .chip {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #dfe7ee;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.05);
    }

    .info-card h3 {
      margin: 0 0 10px;
      font-size: 21px;
      letter-spacing: -.03em;
    }

    .info-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.75;
    }

    .info-card a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
      text-decoration: none;
      color: #f4f8fb;
      font-weight: 700;
      font-size: 14px;
    }

    .info-card:hover, .side-card:hover, .hero-main:hover {
      transform: translateY(-3px);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .cta-band {
      margin: 20px 0 60px;
      border-radius: 34px;
      padding: 34px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 20px;
      align-items: center;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 14% 30%, rgba(0,217,255,.12), transparent 0 20%),
        radial-gradient(circle at 88% 70%, rgba(255,53,200,.1), transparent 0 22%),
        linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.1);
      box-shadow: var(--shadow);
    }

    .cta-band::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.06) 48%, transparent 78%);
      transform: translateX(-100%);
      animation: shine 7.5s linear infinite;
      pointer-events: none;
    }

    .cta-band h2 {
      margin: 0 0 12px;
      font-size: clamp(30px, 4vw, 48px);
      letter-spacing: -.05em;
      max-width: 12ch;
    }

    .cta-band p {
      margin: 0;
      color: var(--muted);
      line-height: 1.8;
      max-width: 58ch;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 12px;
    }

    footer {
      padding: 0 0 42px;
      color: #9aa5b0;
      font-size: 14px;
    }

    .footer-line {
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    @keyframes pulse {
      0%,100% { transform: scale(1); opacity: .88; }
      50% { transform: scale(1.18); opacity: 1; }
    }

    @keyframes shine {
      from { transform: translateX(-100%); }
      to { transform: translateX(100%); }
    }

    @media (max-width: 1180px) {
      .hero, .cta-band { grid-template-columns: 1fr; }
      .cards-4 { grid-template-columns: repeat(2, 1fr); }
      .cards-3 { grid-template-columns: 1fr; }
      .cta-actions { justify-content: flex-start; }
    }

    @media (max-width: 860px) {
      .topbar { padding: 14px 0; }
      .nav { display: none; }
      .hero-main { min-height: auto; padding: 24px; }
      .hero-stats, .side-card.bottom, .badge-list, .cards-4 { grid-template-columns: 1fr; }
      .section-head { flex-direction: column; align-items: flex-start; }
      h1 { max-width: unset; }
      .cta-band { padding: 24px; }
      .cta-band h2 { max-width: unset; }
    }

    @media (max-width: 560px) {
      .container { width: min(calc(100% - 20px), var(--container)); }
      .button-row, .cta-actions { flex-direction: column; }
      .btn, .nav-cta { width: 100%; }
      .hero-logo-wrap { width: 100%; }
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="topbar">
      <div class="brand">
        <div class="brand-chip"></div>
        <div class="brand-text">
          <strong>RLD Printstore</strong>
          <span>DTF • profil • företag</span>
        </div>
      </div>

      <nav class="nav">
        <a href="#produkter">Produkter</a>
        <a href="#losningar">Företagslösningar</a>
        <a href="#sa-funkar-det">Så funkar det</a>
        <a href="#kontakt">Kontakt</a>
      </nav>

      <a class="nav-cta" href="#kontakt">Begär offert</a>
    </header>

    <main class="hero">
      <section class="panel hero-main">
        <div class="eyebrow"><i></i> Premium Shopify-preview</div>

        <div class="hero-logo-wrap">
          <img class="hero-logo" src="Vittext3d_70mm.png" alt="RLD Printstore logotyp">
        </div>

        <h1>Arbetskläder och <span class="headline-accent">DTF-tryck</span> med tydlig premiumkänsla.</h1>

        <p class="lead">
          Byggd för företag, föreningar och kunder som vill ha en rak väg till rätt flöde direkt. Mörk silvrig bas, bättre kontrast, mer exklusiva paneler och CMYK som kontrollerad accent i knappar, ramar och detaljer.
        </p>

        <div class="button-row">
          <a class="btn btn-cyan" href="#produkter">Se produkter</a>
          <a class="btn btn-magenta" href="#kontakt">Begär offert</a>
          <a class="btn btn-yellow" href="#sa-funkar-det">Ladda upp design</a>
        </div>

        <div class="hero-stats">
          <div class="stat">
            <strong>3 tydliga vägar</strong>
            <span>Köp direkt, ladda upp egen design eller skicka offertförfrågan.</span>
          </div>
          <div class="stat">
            <strong>Silvrig bas</strong>
            <span>Mer premium än hård blå overlay och bättre balans mot logotypen.</span>
          </div>
          <div class="stat">
            <strong>CMYK-accenter</strong>
            <span>Cyan, magenta och gul används smart istället för att ta över sidan.</span>
          </div>
        </div>
      </section>

      <aside class="hero-side">
        <section class="panel side-card top">
          <div class="side-label">CMYK-detaljer / premiumkänsla</div>
          <div class="print-grid">
            <div class="swatch c" data-title="Cyan"></div>
            <div class="swatch m" data-title="Magenta"></div>
            <div class="swatch y" data-title="Yellow"></div>
            <div class="swatch k" data-title="Silver / Black"></div>
          </div>
        </section>

        <section class="panel side-card bottom" id="sa-funkar-det">
          <div class="subpanel">
            <h3>Så funkar det</h3>
            <div class="steps">
              <div class="step"><div class="no">01</div><div>Välj plagg eller kategori</div></div>
              <div class="step"><div class="no">02</div><div>Ladda upp logga, design eller idé</div></div>
              <div class="step"><div class="no">03</div><div>Beställ direkt eller begär offert</div></div>
            </div>
          </div>

          <div class="subpanel">
            <h3>Passar för</h3>
            <div class="badge-list">
              <div class="badge">Företag</div>
              <div class="badge">Föreningar</div>
              <div class="badge">Arbetskläder</div>
              <div class="badge">Profilplagg</div>
              <div class="badge">DTF-transfer</div>
              <div class="badge">Specialbeställning</div>
            </div>
          </div>
        </section>
      </aside>
    </main>

    <section id="produkter">
      <div class="section-head">
        <h2>Tydliga ingångar från startsidan</h2>
        <p>Besökaren ska direkt förstå skillnaden mellan att köpa färdigt, ladda upp egen design eller gå vidare med större företagsbeställningar.</p>
      </div>

      <div class="cards-4">
        <article class="panel info-card">
          <div class="info-top">
            <div class="icon">🧥</div>
            <div class="chip">Köp direkt</div>
          </div>
          <h3>Arbetskläder</h3>
          <p>Robusta plagg för företag som vill beställa snabbt med tydlig struktur och enkel väg till rätt produkt.</p>
          <a href="#">Visa kategori →</a>
        </article>

        <article class="panel info-card">
          <div class="info-top">
            <div class="icon">👕</div>
            <div class="chip">Profil</div>
          </div>
          <h3>Profilkläder</h3>
          <p>Hoodies, tees och andra profilplagg som presenteras mer som färdiga lösningar än som vanliga listprodukter.</p>
          <a href="#">Utforska →</a>
        </article>

        <article class="panel info-card">
          <div class="info-top">
            <div class="icon">🎨</div>
            <div class="chip">Egen design</div>
          </div>
          <h3>Ladda upp design</h3>
          <p>För kunder som redan har logga, underlag eller en idé och vill ha hjälp att komma vidare direkt.</p>
          <a href="#">Skicka fil →</a>
        </article>

        <article class="panel info-card">
          <div class="info-top">
            <div class="icon">📋</div>
            <div class="chip">Företag</div>
          </div>
          <h3>Begär offert</h3>
          <p>För större volymer, föreningskläder, specialupplägg och mer anpassade företagslösningar.</p>
          <a href="#kontakt">Skicka förfrågan →</a>
        </article>
      </div>
    </section>

    <section id="losningar">
      <div class="section-head">
        <h2>Mer premium, mindre standardmall</h2>
        <p>Riktningen här är att startsidan ska kännas som ett seriöst tryck- och profilföretag, inte som en generisk klädbutik med några produkter upplagda.</p>
      </div>

      <div class="cards-3">
        <article class="panel info-card">
          <div class="info-top">
            <div class="icon">🏢</div>
            <div class="chip">Företag</div>
          </div>
          <h3>Företagsprofilering</h3>
          <p>Bygg upp produktsidor och sektioner som tydligt visar användningsområde, trycktyp, volymer och möjligheten till företagsanpassning.</p>
          <a href="#kontakt">Bygg upplägg →</a>
        </article>

        <article class="panel info-card">
          <div class="info-top">
            <div class="icon">⚙️</div>
            <div class="chip">DTF</div>
          </div>
          <h3>DTF-transfer</h3>
          <p>En separat väg för transfers, specialmotiv och mer renodlade tryckjobb där kunden redan vet vad de vill ha.</p>
          <a href="#">Se DTF →</a>
        </article>

        <article class="panel info-card">
          <div class="info-top">
            <div class="icon">🏷️</div>
            <div class="chip">Föreningar</div>
          </div>
          <h3>Klubb- och föreningspaket</h3>
          <p>För större beställningar där man vill visa direkt att sidan klarar mer än bara vanliga enstaka köp.</p>
          <a href="#">Visa paket →</a>
        </article>
      </div>
    </section>

    <section id="kontakt">
      <div class="cta-band">
        <div>
          <h2>Det här är en mer exklusiv riktning för startsidan.</h2>
          <p>Den är byggd för att ge dig en tydlig förhandsvisning i VS Code. Därifrån kan Joel eller du själv ta vidare layouten till riktiga Shopify-sektioner, produktkort, offertformulär och uppladdning av design.</p>
        </div>
        <div class="cta-actions">
          <a class="btn btn-cyan" href="#produkter">Se produkter</a>
          <a class="btn btn-magenta" href="#kontakt">Begär offert</a>
          <a class="btn btn-yellow" href="#sa-funkar-det">Ladda upp design</a>
        </div>
      </div>
    </section>

    <footer>
      <div class="footer-line">
        <span>RLD Printstore – premium preview</span>
        <span>Silvrig bas • kontrollerad CMYK • mörk premiumkänsla</span>
      </div>
    </footer>
  </div>
</body>
</html>

Vad är DTF-transfer?

  • Färdigt transfertryck

    DTF-transfer är ett färdigt tryck på film som används för att applicera motiv, logotyper och texter på textilier.

  • Kolumn

    Para ihop text med en bild för att ge fokus åt vald produkt, produktserie eller blogginlägg. Lägg till information om tillgänglighet, stil eller tillhandahåll en recension.

  • Kolumn

    Para ihop text med en bild för att ge fokus åt vald produkt, produktserie eller blogginlägg. Lägg till information om tillgänglighet, stil eller tillhandahåll en recension.
Knappetikett

Så fungerar det

  • Kolumn

    Para ihop text med en bild för att ge fokus åt vald produkt, produktserie eller blogginlägg. Lägg till information om tillgänglighet, stil eller tillhandahåll en recension.

  • Kolumn

    Para ihop text med en bild för att ge fokus åt vald produkt, produktserie eller blogginlägg. Lägg till information om tillgänglighet, stil eller tillhandahåll en recension.

  • Kolumn

    Para ihop text med en bild för att ge fokus åt vald produkt, produktserie eller blogginlägg. Lägg till information om tillgänglighet, stil eller tillhandahåll en recension.
Knappetikett