@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

:root{
    --pat-max-width:1140px;
    --pat-bg:#f7fbff;
    --pat-bg-2:#eef8ff;
    --pat-card:#ffffff;
    --pat-accent:#2f96d1;
    --pat-accent-2:#6fc8f1;
    --pat-accent-3:#f4c86a;
    --pat-text:#10222d;
    --pat-muted:#5f7582;
    --pat-radius:20px;
    --pat-gap:20px;
    --pat-border:rgba(47,150,209,0.16);
    --pat-shadow:0 18px 42px rgba(16,34,45,0.10);
}

/* Base */
.pat-container{
    position:relative;
    overflow:hidden;
    padding:48px 0 72px;
      /* Border */
    border: 2px solid #dbeafe; /* change color/thickness as needed */
    border-radius: 16px; /* optional rounded corners */

    background:radial-gradient(circle at 18% 8%, rgba(111,200,241,0.20), transparent 42%),
        radial-gradient(circle at 82% 18%, rgba(47,150,209,0.14), transparent 46%),
        linear-gradient(180deg, #ffffff 0%, var(--pat-bg) 42%, var(--pat-bg-2) 100%);
    color:var(--pat-text);
    font-family:"Plus Jakarta Sans","Trebuchet MS",sans-serif;
}

.pat-container *{box-sizing:border-box}

.pat-container::before,
.pat-container::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(6px);
    opacity:0.35;
    pointer-events:none;
    z-index:0;
}

.pat-container::before{background:radial-gradient(circle, rgba(111,200,241,0.58), transparent 60%);top:-160px;left:-120px}
.pat-container::after{background:radial-gradient(circle, rgba(47,150,209,0.40), transparent 60%);bottom:-180px;right:-140px}

.pat-hero,
.pat-main,
.pat-footer{position:relative;z-index:1}

/* Hero */
.pat-hero{
    max-width:var(--pat-max-width);
    margin:0 auto 28px;
    padding:68px 24px 56px;
    border-radius:24px;
    
    box-shadow:0 14px 36px rgba(16,34,45,0.10);
    overflow:hidden;
    border:1px solid rgba(47,150,209,0.12);
}

.pat-hero::before{
    content:"";
    position:absolute;
    inset:0;
    
}

.pat-hero-inner{
    position:relative;
    max-width:620px;
    background:rgba(255,255,255,0.90);
    padding:34px;
    border-radius:22px;
    border:1px solid rgba(47,150,209,0.14);
    backdrop-filter:blur(10px);
    box-shadow:0 16px 34px rgba(16,34,45,0.08);
}

.pat-title{
    font-family:"Fraunces",serif;
    font-size:clamp(38px, 4.4vw, 58px);
    margin:0 0 10px;
    letter-spacing:-0.5px;
    color:var(--pat-text);
}

.pat-sub{
    font-size:12px;
    margin:0 0 12px;
    color:var(--pat-accent);
    letter-spacing:2.4px;
    text-transform:uppercase;
    font-weight:600;
}

.pat-lead{color:var(--pat-muted);margin:0;font-size:17px;line-height:1.65;max-width:54ch}

.pat-hero-features{
    list-style:none;
    padding:16px 0 0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    color:var(--pat-muted);
    font-size:12px;
}

.pat-hero-features li{
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,0.82);
    border:1px solid rgba(47,150,209,0.10);
    backdrop-filter:blur(6px);
}

/* Main + form */
.pat-main{max-width:var(--pat-max-width);margin:-36px auto 0;padding:20px 20px}

.pat-form-wrap{
    background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,252,255,0.98));
    border:1px solid var(--pat-border);
    padding:34px;
    border-radius:24px;
    margin-top: 20px;
    box-shadow:var(--pat-shadow);
}

.pat-section-title{
    font-family:"Fraunces",serif;
    font-size:26px;
    margin:0 0 6px;
    color:var(--pat-text);
}

.pat-section-sub{color:var(--pat-muted);margin:0 0 22px;font-size:15px}

.pat-form{display:flex;flex-direction:column;gap:var(--pat-gap)}

.pat-fieldset{border:0;margin:0;padding:0;background:transparent}
.pat-fieldset + .pat-fieldset{margin-top:6px;padding-top:18px;border-top:1px dashed rgba(9,34,49,0.12)}

.pat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--pat-gap)}
.pat-field{display:flex;flex-direction:column;gap:8px}
.pat-field.full{grid-column:1 / -1}

.pat-field label{font-size:13px;color:var(--pat-text);letter-spacing:0.4px;font-weight:600}

.pat-field input,
.pat-field select,
.pat-field textarea{
    width:100%;
    padding:14px 14px;
    border-radius:16px;
    border:1px solid rgba(47,150,209,0.14);
    background:#f7fbff;
    color:var(--pat-text);
    box-sizing:border-box;
    font-size:14px;
    transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}

.pat-field input::placeholder,
.pat-field textarea::placeholder{color:rgba(85,112,127,0.65)}

.pat-field textarea{min-height:120px;resize:vertical}

.pat-field input:focus,
.pat-field select:focus,
.pat-field textarea:focus{
    outline:none;
    border-color:rgba(47,150,209,0.68);
    background:#ffffff;
    box-shadow:0 0 0 4px rgba(111,200,241,0.16), 0 10px 24px rgba(16,34,45,0.08);
    transform:translateY(-1px);
}

.pat-field input:hover,
.pat-field select:hover,
.pat-field textarea:hover{box-shadow:0 8px 18px rgba(9,34,49,0.05)}

.pat-cta-wrap{text-align:center;margin-top:8px}

.pat-cta{
    position:relative;
    overflow:hidden;
    background:linear-gradient(120deg, var(--pat-accent), #4ab0e0);
    color:#fff !important;
    padding:15px 34px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.3) !important;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.3px;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(47,150,209,0.24);
    transition:transform .18s ease, box-shadow .18s ease;
}

.pat-cta::after{
    content:"";
    position:absolute;
    top:-10%;
    left:-40%;
    width:40%;
    height:120%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-20deg);
    opacity:0;
    transition:opacity .2s ease, left .5s ease;
}

.pat-cta:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(47,150,209,0.28)}
.pat-cta:hover::after{left:120%;opacity:0.8}
.pat-cta:active{transform:translateY(0)}
.pat-cta:focus-visible{outline:3px solid rgba(0,180,216,0.4);outline-offset:3px}

/* Footer */
.pat-footer{max-width:var(--pat-max-width);margin:32px auto 0;padding:0 20px}
.pat-features{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px;margin:8px 0}
.pat-feature{
    position:relative;
    padding:16px 16px 18px;
    border-radius:18px;
    border:1px solid rgba(47,150,209,0.12);
    background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,248,255,0.96));
    color:#1e4b60;
    box-shadow:0 10px 20px rgba(16,34,45,0.07);
    transition:transform .2s ease, box-shadow .2s ease;
}

.pat-feature::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    border-radius:18px 18px 0 0;
    background:linear-gradient(90deg, var(--pat-accent), var(--pat-accent-2));
}

.pat-feature:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(16,34,45,0.12)}

.pat-copyright{margin-top:14px;color:#7a98a6;font-size:13px;text-align:center}

.pat-success,
.pat-error{
    padding:14px 16px;
    border-radius:10px;
    margin-bottom:14px;
    text-align:center;
    font-weight:600;
}

.pat-success{background:#e6fff1;border:1px solid #bdebd0;color:#0b5f3a;box-shadow:0 8px 16px rgba(7,92,52,0.08)}
.pat-error{background:#fff2f2;border:1px solid #ffd0d0;color:#7a1f1f;box-shadow:0 8px 16px rgba(122,31,31,0.08)}

/* Utility and motion */
.pat-required{color:#e36f6f;margin-left:6px;font-weight:700}
.screen-reader-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

@keyframes pat-fade-up{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}

.pat-hero{animation:pat-fade-up .7s ease-out both}
.pat-form-wrap{animation:pat-fade-up .7s ease-out .12s both}
.pat-feature{animation:pat-fade-up .6s ease-out both}
.pat-feature:nth-child(2){animation-delay:.08s}
.pat-feature:nth-child(3){animation-delay:.16s}
.pat-feature:nth-child(4){animation-delay:.24s}

@media (prefers-reduced-motion:reduce){
    .pat-hero,
    .pat-form-wrap,
    .pat-feature{animation:none}
}

@media (max-width:1000px){
    .pat-features{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width:900px){
    .pat-main{margin:-26px auto 0}
    .pat-grid{grid-template-columns:1fr}
    .pat-hero{padding:46px 18px}
    .pat-hero-inner{padding:24px}
    .pat-form-wrap{padding:26px}
}

@media (max-width:640px){
    .pat-container{padding:44px 0 56px}
    .pat-features{grid-template-columns:1fr}
    .pat-cta{width:100%}
}