diff --git a/ermin-zoronjic.html b/ermin-zoronjic.html index 9ba9d58..31c3c8c 100644 --- a/ermin-zoronjic.html +++ b/ermin-zoronjic.html @@ -3,14 +3,507 @@ - Basic Setup + Atelier Nord — Digitale Markenauftritte mit Substanz + -
-

Hallihallöchen

-

Wasgehtwasgehtwasgeht

+
+ +
+ +
+
+
+
+
+
Digitale Präsenz mit Haltung, Klarheit und Wirkung
+

Webseiten, die nicht nur gut aussehen, sondern auch überzeugen.

+

+ Wir gestalten moderne Markenauftritte für Unternehmen, Dienstleister und ambitionierte Teams, die + professionell wahrgenommen werden möchten. Mit klarer Struktur, starker Typografie und präzisem Design + entsteht ein Auftritt, der Vertrauen schafft und Anfragen fördert. +

+ + + +
+
+ +120 + realisierte digitale Markenauftritte +
+
+ 98 % + Weiterempfehlungsquote aus laufenden Projekten +
+
+ 7 Tage + bis zu einem ersten klaren Designkonzept +
+
+
+ +
+
+ Strategie trifft Design +

+ Jede Seite wird entlang von Positionierung, Zielgruppe und gewünschter Wirkung aufgebaut. Das Ergebnis ist + ein hochwertiger Onepager oder Webauftritt mit klarer Botschaft und sauberem Fokus. +

+
+ + Conversion-Fokus +
+
+ +
+
+ Premium-Look +

Reduziertes, elegantes Interface mit hochwertigen Abständen, sauberen Flächen und klaren Kontrasten.

+
+
+ Klare Inhalte +

Texte, die Orientierung geben, Leistungen verständlich machen und Vertrauen aufbauen.

+
+
+ Responsiv gedacht +

Optimierte Darstellung auf Desktop, Tablet und Smartphone ohne gestalterische Kompromisse.

+
+
+ Saubere Umsetzung +

Klare Struktur, semantisches HTML und konsistentes visuelles System für nachhaltige Qualität.

+
+
+
+
+ +
+
+ Klar positioniert +

Wir verdichten komplexe Inhalte zu einer nachvollziehbaren, starken Markenbotschaft.

+
+
+ Visuell hochwertig +

Ein ruhiger Premium-Look sorgt für Professionalität, Lesbarkeit und Wiedererkennbarkeit.

+
+
+ Messbar sinnvoll +

Jede Sektion dient einem Zweck: Vertrauen aufbauen, Nutzen erklären, Kontakt erleichtern.

+
+
+ Verlässlich im Prozess +

Transparente Schritte, klare Abstimmung und ein Ergebnis, das strategisch wie gestalterisch trägt.

+
+
+
+
+ +
+
+
+ Leistungen +

Alles, was ein moderner digitaler Auftritt heute leisten muss.

+

+ Von der inhaltlichen Schärfung bis zur visuellen Ausarbeitung entwickeln wir Seiten, die professionell wirken, + leicht verständlich sind und Ihre Zielgruppe präzise ansprechen. +

+
+ +
+
+

Positionierung & Struktur

+

+ Wir entwickeln eine klare Seitenlogik, definieren inhaltliche Prioritäten und schaffen eine starke + Dramaturgie über den gesamten Onepager hinweg. +

+

+ So entsteht eine Seite, die nicht überfordert, sondern führt. +

+
+ +
+

UI-Design mit Premium-Anspruch

+

+ Typografie, Weißraum, Farbklima und Flächen werden zu einem ruhigen, eleganten Gesamtbild verdichtet, das + modern wirkt und Vertrauen transportiert. +

+

+ Reduziert, präzise und hochwertig. +

+
+ +
+

Texte mit Klarheit und Wirkung

+

+ Wir formulieren Inhalte verständlich, glaubwürdig und zielgerichtet, damit Leistungen nicht nur genannt, + sondern überzeugend vermittelt werden. +

+

+ Für bessere Orientierung und stärkere Resonanz. +

+
+ +
+

Responsive Umsetzung

+

+ Alle Layouts werden so konzipiert, dass sie auf mobilen Endgeräten ebenso ruhig, lesbar und professionell + funktionieren wie auf großen Bildschirmen. +

+

+ Ohne visuelle Brüche. +

+
+ +
+

Conversion-orientierte Nutzerführung

+

+ Wir setzen klare Call-to-Actions, logische Informationsfolgen und überzeugende Vertrauenselemente ein, um + den Weg zur Anfrage bewusst zu verkürzen. +

+

+ Weniger Reibung, mehr Relevanz. +

+
+ +
+

Markentaugliches Designsystem

+

+ Farben, Abstände, Buttons, Karten und Headlines folgen einem konsistenten System. Dadurch wirkt der gesamte + Auftritt professionell, ruhig und aus einem Guss. +

+

+ Langfristig anschlussfähig und skalierbar. +

+
+
+
+
+ +
+
+
+
+ Über uns +

Wir gestalten digitale Auftritte mit Substanz statt bloßer Oberfläche.

+

+ Gute Webseiten entstehen nicht zufällig. Sie sind das Ergebnis aus klarer Strategie, präziser Gestaltung und + einem feinen Gespür für Zielgruppen, Markenwirkung und digitale Nutzerführung. +

+
+

+ Atelier Nord begleitet Unternehmen, Selbstständige und wachsende Teams bei der Entwicklung moderner + Webseiten, die professionell aussehen und gleichzeitig konkret funktionieren. Unser Ansatz verbindet + inhaltliche Klarheit mit einer gestalterischen Sprache, die zeitgemäß, ruhig und hochwertig wirkt. +

+
    +
  • Klare Markenbotschaften statt austauschbarer Standardtexte
  • +
  • Präzise Designentscheidungen mit Fokus auf Vertrauen und Wertigkeit
  • +
  • Saubere Struktur für bessere Lesbarkeit und nachvollziehbare Nutzerwege
  • +
  • Ein Ergebnis, das sowohl ästhetisch als auch geschäftlich sinnvoll ist
  • +
+
+ +
+
+ 10+ +

Jahre Erfahrung in Webdesign, Markenkommunikation und digitaler Nutzerführung.

+
+
+ 360° +

Denken über Design hinaus: Inhalte, Struktur, Wirkung, Conversion und Positionierung.

+
+
+ 1 Ziel +

Eine Webseite zu schaffen, die professionell wirkt, leicht verständlich ist und echte Resonanz erzeugt.

+
+
+
+
+
+ +
+
+
+ Warum wir +

Ein Onepager reicht nicht, wenn er nur schön ist. Er muss präzise wirken.

+

+ Unser Mehrwert liegt in der Kombination aus Designqualität, strategischer Klarheit und einem konsequenten Blick + auf Wirkung, Lesbarkeit und Vertrauen. +

+
+ +
+
+

Reduktion mit Anspruch

+

+ Weniger visuelle Unruhe bedeutet mehr Aufmerksamkeit für das Wesentliche. Wir arbeiten mit präzisen Abständen, + ruhigen Farbflächen und einer typografischen Hierarchie, die Inhalte aufwertet, statt sie zu überdecken. +

+
+ +
+

Design, das Positionierung unterstützt

+

+ Eine gute Webseite transportiert nicht nur Informationen, sondern Haltung. Deshalb wird jedes Layout entlang + Ihres Angebots, Ihrer Tonalität und Ihrer Zielgruppe entwickelt. +

+
+ +
+

Vertrauen auf den ersten Blick

+

+ Hochwertige Gestaltung erhöht nicht nur die wahrgenommene Qualität, sondern reduziert auch Zweifel. Das ist + besonders relevant bei erklärungsbedürftigen Leistungen und beratungsintensiven Angeboten. +

+
+ +
+

Effizienz im gesamten Projekt

+

+ Ein klarer Prozess, schnelle Abstimmung und fokussierte Entscheidungen sorgen dafür, dass Projekte zielgerichtet + vorankommen und nicht in endlosen Schleifen hängen bleiben. +

+
+
+
+
+ +
+
+
+ Prozess +

So entsteht aus einer Idee ein moderner Auftritt mit klarer Wirkung.

+

+ Transparent, strukturiert und effizient. Jeder Schritt ist darauf ausgelegt, Komplexität zu reduzieren und die + richtigen Entscheidungen sichtbar zu machen. +

+
+ +
+
+

Analyse & Zielbild

+

+ Wir klären Zielgruppe, Angebotskern, Tonalität und inhaltliche Prioritäten. Daraus entsteht ein präzises + Fundament für die spätere Gestaltung. +

+
+ +
+

Struktur & Wireflow

+

+ Anschließend entwickeln wir eine klare Seitenarchitektur mit sinnvoller Reihenfolge, starken Überschriften und + nachvollziehbaren Übergängen zwischen den Inhalten. +

+
+ +
+

Design & Feinschliff

+

+ Jetzt wird die Richtung visuell greifbar: Typografie, Farbwelt, Karten, Flächen und Buttons formen einen + hochwertigen, markentauglichen Gesamtauftritt. +

+
+ +
+

Launch & Optimierung

+

+ Nach finaler Abstimmung wird die Seite sauber umgesetzt. Auf Wunsch begleiten wir anschließend auch die + Weiterentwicklung und inhaltliche Schärfung. +

+
+
+
+
+ +
+
+
+ Kundenstimmen +

Was unsere Zusammenarbeit für Kundinnen und Kunden spürbar verändert hat.

+

+ Gute Gestaltung wirkt nicht nur visuell, sondern auch im Gespräch, in der Wahrnehmung und in der Qualität der + Anfragen. +

+
+ +
+
+
+ „Unsere neue Seite wirkt deutlich professioneller, klarer und hochwertiger. Besonders beeindruckt hat uns, + wie strukturiert Inhalte und Design zusammengeführt wurden. Seit dem Relaunch kommen die Anfragen gezielter + und passender herein.“ +
+
+ Laura M. + Geschäftsführerin, Beratungsunternehmen +
+
+ +
+
+ „Vorher hatten wir eine Webseite, die vieles sagte, aber wenig transportierte. Jetzt ist sofort erkennbar, + wofür wir stehen. Das Design fühlt sich modern an, ohne laut zu sein, und genau das wollten wir erreichen.“ +
+
+ Daniel R. + Gründer, Architektur- und Planungsbüro +
+
+ +
+
+ „Die Zusammenarbeit war klar, effizient und angenehm präzise. Wir hatten zu jedem Zeitpunkt das Gefühl, + dass Gestaltung hier nicht dekorativ verstanden wird, sondern als strategisches Werkzeug.“ +
+
+ Sophie M. + Leitung Marketing, B2B-Dienstleister +
+
+
+
+
+ +
+
+
+ FAQ +

Häufige Fragen vor dem Projektstart.

+

+ Klare Antworten schaffen Sicherheit. Hier finden Sie die wichtigsten Punkte rund um Zusammenarbeit, Ablauf und + Umfang. +

+
+ +
+
+ Für wen eignet sich ein Onepager besonders gut? +
+ Ein Onepager eignet sich besonders für Dienstleister, Agenturen, Expertenmarken, Beratungen oder neue Angebote, + die klar, fokussiert und ohne unnötige Komplexität präsentiert werden sollen. Wenn die Kernbotschaft präzise + ist, kann ein Onepager äußerst wirkungsvoll sein. +
+
+ +
+ Unterstützen Sie auch bei Texten und Struktur? +
+ Ja. In vielen Projekten liegt der größte Hebel nicht nur im visuellen Design, sondern in der sauberen Ordnung + der Inhalte. Wir helfen bei Struktur, Headlines, Formulierungen und der gesamten erzählerischen Führung der + Seite. +
+
+ +
+ Wie lange dauert ein Projekt in der Regel? +
+ Das hängt von Umfang, Freigabeschleifen und Materiallage ab. Für einen fokussierten Onepager lässt sich jedoch + meist innerhalb weniger Wochen ein hochwertiges, abgestimmtes Ergebnis realisieren. +
+
+ +
+ Kann die Seite später erweitert werden? +
+ Ja. Wenn Struktur und Designsystem sauber angelegt sind, lässt sich ein Onepager jederzeit zu einer größeren + Website ausbauen. Genau deshalb denken wir bereits am Anfang modular und konsistent. +
+
+ +
+ Ist auch eine Zusammenarbeit mit bestehenden Markenrichtlinien möglich? +
+ Selbstverständlich. Bestehende Farben, Schriftwelten, Tonalitäten oder Designvorgaben können sinnvoll + weiterentwickelt und in ein modernes, digitales System übersetzt werden, ohne die Marke zu verfremden. +
+
+
+
+
+ +
+
+
+
+
+ Kontakt +

Bereit für einen Auftritt, der Ihrer Qualität gerecht wird?

+

+ Wenn Ihre Webseite klarer, hochwertiger und überzeugender wirken soll, sprechen wir darüber. Gemeinsam + entwickeln wir einen digitalen Auftritt, der ästhetisch überzeugt und geschäftlich sinnvoll arbeitet. +

+
+ +
+ + +
+
+ E-Mail + hallo@ateliernord.de +
+
+ Telefon + +49 000 0000 0000 +
+
+ Standort + Berlin · Remote im DACH-Raum +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29..a33f078 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,968 @@ +:root { + --bg: #f5f7fb; + --surface: rgba(255, 255, 255, 0.78); + --surface-strong: #ffffff; + --surface-soft: #eef2f8; + --text: #0f1728; + --muted: #5f6b7d; + --line: rgba(15, 23, 40, 0.08); + --primary: #315efb; + --primary-dark: #2447c9; + --accent: #7c5cff; + --accent-soft: rgba(124, 92, 255, 0.12); + --success-soft: rgba(49, 94, 251, 0.10); + --shadow-lg: 0 24px 60px rgba(17, 24, 39, 0.10); + --shadow-md: 0 16px 32px rgba(17, 24, 39, 0.08); + --shadow-sm: 0 10px 20px rgba(17, 24, 39, 0.05); + --radius-xl: 28px; + --radius-lg: 20px; + --radius-md: 16px; + --radius-sm: 12px; + --container: 1180px; + --nav-h: 80px; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + color: var(--text); + background: + radial-gradient(circle at 12% 8%, rgba(124, 92, 255, 0.13), transparent 22%), + radial-gradient(circle at 88% 12%, rgba(49, 94, 251, 0.14), transparent 24%), + radial-gradient(circle at 50% 100%, rgba(124, 92, 255, 0.08), transparent 22%), + linear-gradient(180deg, #f8faff 0%, #f5f7fb 32%, #f7f9fc 100%); + line-height: 1.6; + letter-spacing: -0.01em; +} + +::selection { + background: rgba(49, 94, 251, 0.18); +} + +a { + color: inherit; + text-decoration: none; +} + +img { + max-width: 100%; + display: block; +} + +button, +.button { + font: inherit; + border: 0; + cursor: pointer; +} + +.container { + width: min(100% - 2rem, var(--container)); + margin: 0 auto; +} + +.section { + padding: 96px 0; + position: relative; +} + +.section-alt { + padding: 96px 0; + background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.90)); + border-top: 1px solid var(--line); + border-bottom: 1px solid var(--line); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); +} + +.section-head { + max-width: 720px; + margin-bottom: 40px; +} + +.eyebrow { + display: inline-flex; + align-items: center; + gap: 0.6rem; + padding: 0.45rem 0.8rem; + border: 1px solid rgba(49, 94, 251, 0.14); + background: rgba(255, 255, 255, 0.74); + color: var(--primary-dark); + border-radius: 999px; + font-size: 0.84rem; + font-weight: 700; + letter-spacing: 0.03em; + text-transform: uppercase; + box-shadow: var(--shadow-sm); + margin-bottom: 16px; +} + +.eyebrow::before { + content: ""; + width: 0.55rem; + height: 0.55rem; + border-radius: 50%; + background: linear-gradient(135deg, var(--primary), var(--accent)); + box-shadow: 0 0 0 6px rgba(49, 94, 251, 0.10); +} + +h1, h2, h3, h4 { + line-height: 1.05; + letter-spacing: -0.03em; +} + +h1 { + font-size: clamp(3rem, 6vw, 5.9rem); + font-weight: 800; + margin-bottom: 20px; +} + +h2 { + font-size: clamp(2rem, 4vw, 3.3rem); + font-weight: 800; + margin-bottom: 16px; +} + +h3 { + font-size: clamp(1.15rem, 2vw, 1.45rem); + font-weight: 700; + margin-bottom: 10px; +} + +p { + color: var(--muted); + font-size: 1.02rem; +} + +.lead { + font-size: clamp(1.04rem, 1.8vw, 1.22rem); + max-width: 700px; +} + +.muted { + color: var(--muted); +} + +.header { + position: sticky; + top: 0; + z-index: 50; + padding-top: 18px; +} + +.nav-shell { + min-height: var(--nav-h); + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 14px 18px; + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: 999px; + background: rgba(255, 255, 255, 0.72); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + box-shadow: var(--shadow-md); +} + +.brand { + display: flex; + align-items: center; + gap: 0.85rem; + min-width: 0; +} + +.brand-mark { + width: 44px; + height: 44px; + border-radius: 14px; + background: + linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.25)), + linear-gradient(135deg, var(--primary), var(--accent)); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 22px rgba(49, 94, 251, 0.18); + position: relative; + overflow: hidden; +} + +.brand-mark::before, +.brand-mark::after { + content: ""; + position: absolute; + inset: 8px; + border-radius: 10px; + border: 1px solid rgba(255,255,255,0.35); +} + +.brand-mark::after { + inset: 14px; + border-radius: 8px; + background: rgba(255,255,255,0.18); + border: 0; +} + +.brand-text { + min-width: 0; +} + +.brand-text strong { + display: block; + font-size: 1rem; + letter-spacing: -0.02em; +} + +.brand-text span { + display: block; + font-size: 0.84rem; + color: var(--muted); + white-space: nowrap; +} + +.nav { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.3rem; +} + +.nav a { + padding: 0.72rem 0.95rem; + border-radius: 999px; + color: #1f2a3d; + font-size: 0.95rem; + font-weight: 600; + transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; +} + +.nav a:hover { + background: rgba(49, 94, 251, 0.08); + color: var(--primary-dark); + transform: translateY(-1px); +} + +.nav-cta { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.92rem 1.2rem; + border-radius: 999px; + background: linear-gradient(135deg, var(--primary), var(--accent)); + color: #fff; + font-weight: 700; + box-shadow: 0 16px 26px rgba(49, 94, 251, 0.22); + transition: transform 0.2s ease, box-shadow 0.2s ease; + white-space: nowrap; +} + +.nav-cta:hover, +.button-primary:hover { + transform: translateY(-2px); + box-shadow: 0 20px 34px rgba(49, 94, 251, 0.24); +} + +.hero { + padding: 36px 0 56px; +} + +.hero-wrap { + position: relative; + display: grid; + grid-template-columns: 1.12fr 0.88fr; + gap: 28px; + align-items: stretch; + padding: 52px; + border-radius: 40px; + background: + linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.70)), + linear-gradient(135deg, rgba(49,94,251,0.08), rgba(124,92,255,0.06)); + border: 1px solid rgba(255,255,255,0.8); + box-shadow: var(--shadow-lg); + overflow: hidden; + isolation: isolate; +} + +.hero-wrap::before { + content: ""; + position: absolute; + inset: auto -120px -160px auto; + width: 420px; + height: 420px; + border-radius: 50%; + background: radial-gradient(circle, rgba(124, 92, 255, 0.22), transparent 62%); + z-index: -1; +} + +.hero-wrap::after { + content: ""; + position: absolute; + inset: -140px auto auto -90px; + width: 320px; + height: 320px; + border-radius: 50%; + background: radial-gradient(circle, rgba(49, 94, 251, 0.16), transparent 62%); + z-index: -1; +} + +.hero-copy { + display: flex; + flex-direction: column; + justify-content: center; +} + +.hero-copy p { + max-width: 680px; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 14px; + margin: 28px 0 30px; +} + +.button-primary, +.button-secondary { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 54px; + padding: 0 1.35rem; + border-radius: 999px; + font-weight: 700; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; +} + +.button-primary { + color: #fff; + background: linear-gradient(135deg, var(--primary), var(--accent)); + box-shadow: 0 16px 26px rgba(49, 94, 251, 0.22); +} + +.button-secondary { + color: var(--text); + background: rgba(255,255,255,0.85); + border: 1px solid rgba(15, 23, 40, 0.08); + box-shadow: var(--shadow-sm); +} + +.button-secondary:hover { + transform: translateY(-2px); + background: #fff; +} + +.hero-meta { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 8px; +} + +.meta-card { + padding: 18px 18px 16px; + border-radius: var(--radius-md); + background: rgba(255,255,255,0.72); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-sm); +} + +.meta-card strong { + display: block; + font-size: 1.35rem; + line-height: 1; + margin-bottom: 8px; +} + +.meta-card span { + font-size: 0.92rem; + color: var(--muted); +} + +.hero-panel { + display: grid; + gap: 16px; + align-content: center; +} + +.panel-card { + position: relative; + padding: 22px; + border-radius: 24px; + background: rgba(255,255,255,0.82); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-md); + overflow: hidden; +} + +.panel-card strong { + display: block; + font-size: 1rem; + margin-bottom: 8px; +} + +.panel-card p { + font-size: 0.98rem; +} + +.score-line { + display: grid; + grid-template-columns: 1fr auto; + gap: 12px; + align-items: center; + margin-top: 18px; + padding-top: 16px; + border-top: 1px solid var(--line); + font-size: 0.95rem; +} + +.score-bar { + width: 100%; + height: 10px; + border-radius: 999px; + background: #e8edf7; + overflow: hidden; +} + +.score-fill { + height: 100%; + width: 84%; + border-radius: inherit; + background: linear-gradient(90deg, var(--primary), var(--accent)); +} + +.highlight-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; +} + +.highlight-item { + padding: 20px; + border-radius: 22px; + background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.72)); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-sm); +} + +.highlight-item strong { + display: block; + font-size: 1.05rem; + margin-bottom: 8px; +} + +.trust-strip { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 16px; + margin-top: 28px; +} + +.trust-card { + padding: 24px; + border-radius: var(--radius-lg); + background: rgba(255,255,255,0.78); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-sm); +} + +.trust-card strong { + display: block; + font-size: 1.2rem; + margin-bottom: 10px; +} + +.grid-3, +.grid-2, +.grid-4 { + display: grid; + gap: 20px; +} + +.grid-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.grid-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.grid-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.card { + height: 100%; + padding: 28px; + border-radius: var(--radius-lg); + background: rgba(255,255,255,0.82); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-sm); +} + +.card p + p { + margin-top: 10px; +} + +.feature-card { + display: flex; + flex-direction: column; + gap: 14px; + position: relative; +} + +.feature-card::before { + content: ""; + width: 44px; + height: 44px; + border-radius: 14px; + background: linear-gradient(135deg, rgba(49,94,251,0.14), rgba(124,92,255,0.16)); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); +} + +.about-wrap { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 24px; + align-items: stretch; +} + +.about-main { + padding: 34px; + border-radius: 30px; + background: + linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.74)), + linear-gradient(135deg, rgba(49,94,251,0.06), rgba(124,92,255,0.07)); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-md); +} + +.about-stats { + display: grid; + gap: 16px; +} + +.stat-box { + padding: 26px; + border-radius: 26px; + background: rgba(255,255,255,0.84); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-sm); +} + +.stat-box strong { + display: block; + font-size: 2.2rem; + line-height: 1; + margin-bottom: 8px; +} + +.check-list { + display: grid; + gap: 12px; + margin-top: 22px; +} + +.check-list li { + list-style: none; + display: grid; + grid-template-columns: 22px 1fr; + gap: 12px; + align-items: start; + color: var(--muted); +} + +.check-list li::before { + content: ""; + width: 22px; + height: 22px; + border-radius: 50%; + margin-top: 2px; + background: + radial-gradient(circle at 50% 50%, #fff 0 27%, transparent 29%), + linear-gradient(135deg, var(--primary), var(--accent)); + box-shadow: 0 8px 18px rgba(49, 94, 251, 0.18); +} + +.advantage-card { + padding: 30px; + border-radius: 26px; + background: rgba(255,255,255,0.84); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-sm); +} + +.process { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 18px; + counter-reset: step; +} + +.step { + position: relative; + padding: 28px 24px; + border-radius: 24px; + background: rgba(255,255,255,0.84); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-sm); +} + +.step::before { + counter-increment: step; + content: "0" counter(step); + display: inline-flex; + align-items: center; + justify-content: center; + width: 54px; + height: 54px; + border-radius: 18px; + margin-bottom: 20px; + color: #fff; + font-weight: 800; + letter-spacing: -0.02em; + background: linear-gradient(135deg, var(--primary), var(--accent)); + box-shadow: 0 14px 24px rgba(49, 94, 251, 0.20); +} + +.testimonial { + padding: 30px; + border-radius: 26px; + background: rgba(255,255,255,0.88); + border: 1px solid rgba(15, 23, 40, 0.06); + box-shadow: var(--shadow-sm); + display: flex; + flex-direction: column; + gap: 18px; +} + +.testimonial blockquote { + font-size: 1.04rem; + color: #243044; +} + +.testimonial footer { + display: flex; + flex-direction: column; + gap: 2px; + color: var(--muted); + font-size: 0.94rem; +} + +.faq-list { + display: grid; + gap: 16px; +} + +.faq-item { + border-radius: 22px; + border: 1px solid rgba(15, 23, 40, 0.06); + background: rgba(255,255,255,0.84); + box-shadow: var(--shadow-sm); + overflow: hidden; +} + +.faq-item summary { + list-style: none; + cursor: pointer; + padding: 22px 24px; + font-weight: 700; + font-size: 1.02rem; + color: var(--text); + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; +} + +.faq-item summary::-webkit-details-marker { + display: none; +} + +.faq-item summary::after { + content: "+"; + width: 34px; + height: 34px; + border-radius: 10px; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--surface-soft); + color: var(--primary-dark); + font-size: 1.4rem; + line-height: 1; + flex-shrink: 0; +} + +.faq-item[open] summary::after { + content: "−"; +} + +.faq-content { + padding: 0 24px 22px; + color: var(--muted); +} + +.cta-panel { + position: relative; + padding: 44px; + border-radius: 34px; + overflow: hidden; + background: + linear-gradient(135deg, rgba(49,94,251,0.94), rgba(124,92,255,0.92)); + color: #fff; + box-shadow: var(--shadow-lg); +} + +.cta-panel::before { + content: ""; + position: absolute; + right: -100px; + top: -120px; + width: 280px; + height: 280px; + border-radius: 50%; + background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 64%); +} + +.cta-panel::after { + content: ""; + position: absolute; + left: -80px; + bottom: -120px; + width: 240px; + height: 240px; + border-radius: 50%; + background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 68%); +} + +.cta-grid { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 24px; + align-items: center; +} + +.cta-panel p { + color: rgba(255,255,255,0.86); + max-width: 700px; +} + +.cta-actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + justify-content: flex-start; +} + +.cta-actions .button-primary { + background: #fff; + color: var(--primary-dark); + box-shadow: 0 16px 28px rgba(9, 18, 45, 0.18); +} + +.cta-actions .button-secondary { + background: rgba(255,255,255,0.14); + color: #fff; + border-color: rgba(255,255,255,0.26); + box-shadow: none; +} + +.contact-boxes { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; + margin-top: 26px; +} + +.contact-box { + padding: 20px; + border-radius: 20px; + background: rgba(255,255,255,0.14); + border: 1px solid rgba(255,255,255,0.18); +} + +.contact-box strong { + display: block; + font-size: 0.95rem; + margin-bottom: 6px; +} + +.contact-box span { + color: rgba(255,255,255,0.82); + font-size: 0.95rem; +} + +.footer { + padding: 34px 0 44px; +} + +.footer-shell { + display: flex; + justify-content: space-between; + gap: 18px; + align-items: center; + padding-top: 22px; + border-top: 1px solid var(--line); +} + +.footer-nav { + display: flex; + flex-wrap: wrap; + gap: 16px; + color: var(--muted); + font-size: 0.95rem; +} + +.footer small { + color: var(--muted); + font-size: 0.95rem; +} + +.hero-kicker { + font-size: 1rem; + font-weight: 700; + color: var(--primary-dark); + margin-bottom: 18px; + letter-spacing: -0.02em; +} + +.divider { + width: 100%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(15, 23, 40, 0.12), transparent); + margin: 20px 0; +} + +.cta-eyebrow { + background: rgba(255,255,255,0.14); + color: #fff; + border-color: rgba(255,255,255,0.18); + box-shadow: none; +} + +@media (max-width: 1100px) { + .hero-wrap, + .about-wrap, + .cta-grid { + grid-template-columns: 1fr; + } + + .grid-4, + .trust-strip, + .process, + .contact-boxes { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .hero-panel { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 860px) { + .header { + padding-top: 12px; + } + + .nav-shell { + min-height: auto; + border-radius: 28px; + flex-direction: column; + align-items: stretch; + } + + .brand { + justify-content: space-between; + } + + .nav { + justify-content: flex-start; + } + + .nav-cta { + width: 100%; + justify-content: center; + } + + .hero { + padding-top: 20px; + } + + .hero-wrap { + padding: 28px; + border-radius: 28px; + } + + .hero-meta, + .grid-3, + .grid-2, + .trust-strip, + .grid-4, + .process, + .contact-boxes, + .hero-panel, + .highlight-grid { + grid-template-columns: 1fr; + } + + .section, + .section-alt { + padding: 72px 0; + } + + .cta-panel { + padding: 32px 24px; + border-radius: 28px; + } + + .footer-shell { + flex-direction: column; + align-items: flex-start; + } +} + +@media (max-width: 560px) { + .container { + width: min(100% - 1rem, var(--container)); + } + + .hero-wrap, + .about-main, + .card, + .advantage-card, + .step, + .testimonial, + .trust-card, + .panel-card, + .stat-box { + padding: 22px; + } + + h1 { + font-size: 2.7rem; + } + + h2 { + font-size: 2rem; + } + + .button-primary, + .button-secondary { + width: 100%; + } + + .hero-actions, + .cta-actions { + flex-direction: column; + } +} \ No newline at end of file